Migration: input/output

_____
ng generate @angular/core:signal-input-migration
✔ Which directory do you want to migrate? ./
✔ Do you want to migrate as much as possible, even if it may break your build? no
    Preparing analysis for: src/tsconfig.app.json..
    Preparing analysis for: projects/ng-select2-component/tsconfig.lib.json..
    Preparing analysis for: src/tsconfig.spec.json..
    Preparing analysis for: projects/ng-select2-component/tsconfig.spec.json..
    Scanning for inputs: src/tsconfig.app.json..
    Scanning for inputs: projects/ng-select2-component/tsconfig.lib.json..
    Scanning for inputs: src/tsconfig.spec.json..
    Scanning for inputs: projects/ng-select2-component/tsconfig.spec.json..

    Processing analysis data between targets..

    Migrating: src/tsconfig.app.json..
    Migrating: projects/ng-select2-component/tsconfig.lib.json..
    Migrating: src/tsconfig.spec.json..
    Migrating: projects/ng-select2-component/tsconfig.spec.json..
    Applying changes..

    Successfully migrated to signal inputs 🎉
      -> Migrated 29/38 inputs.
    To see why 9 inputs couldn't be migrated
    consider re-running with "--insert-todos" or "--best-effort-mode".
UPDATE projects/ng-select2-component/src/lib/select2.component.ts (41006 bytes)
UPDATE projects/ng-select2-component/src/lib/select2.component.html (10564 bytes)
____
ng generate @angular/core:output-migration
✔ Which directory do you want to migrate? .
    Preparing analysis for: src/tsconfig.app.json..
    Preparing analysis for: projects/ng-select2-component/tsconfig.lib.json..
    Preparing analysis for: src/tsconfig.spec.json..
    Preparing analysis for: projects/ng-select2-component/tsconfig.spec.json..
    Scanning for outputs: src/tsconfig.app.json..
    Scanning for outputs: projects/ng-select2-component/tsconfig.lib.json..
    Scanning for outputs: src/tsconfig.spec.json..
    Scanning for outputs: projects/ng-select2-component/tsconfig.spec.json..

    Processing analysis data between targets..

    Migrating: src/tsconfig.app.json..
    Migrating: projects/ng-select2-component/tsconfig.lib.json..
    Migrating: src/tsconfig.spec.json..
    Migrating: projects/ng-select2-component/tsconfig.spec.json..
    Applying changes..

    Successfully migrated to outputs as functions 🎉
      -> Migrated 9 out of 9 detected outputs (100.00 %).
UPDATE projects/ng-select2-component/src/lib/select2.component.ts (40891 bytes)

projects/ng-select2-component/src/lib/select2.component.html

@@ -1,6 +1,6 @@
 <div class="select2-label" (click)="toggleOpenAndClose()">
   <ng-content select="select2-label"></ng-content>
-  @if (required) {
+  @if (required()) {
     <span class="select2-required"></span>
   }
 </div>
@@ -31,9 +31,9 @@
       [class.select2-selection--single]="!multiple"
       role="combobox"
     >
-      @if (selectionOverride) {
+      @if (selectionOverride()) {
         <span class="select2-selection__override" [innerHTML]="_selectionOverrideLabel()"></span>
-        @if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
+        @if (!multiple && resettable() && resetSelectedValue() !== value && select2Option && !(disabled || readonly())) {
           <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
         }
       } @else if (!multiple) {
@@ -42,7 +42,7 @@
             <span>&nbsp;</span>
           }
           @if (select2Option) {
-            @if (!hasTemplate(select2Option, 'option', true) || noLabelTemplate) {
+            @if (!hasTemplate(select2Option, 'option', true) || noLabelTemplate()) {
               <span [innerHTML]="select2Option.label"></span>
             } @else {
               <ng-container
@@ -51,20 +51,20 @@
             }
           }
           <span [class.select2-selection__placeholder__option]="option" class="select2-selection__placeholder">{{
-            placeholder
+            placeholder()
           }}</span>
         </span>
-        @if (resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
+        @if (resettable() && resetSelectedValue() !== value && select2Option && !(disabled || readonly())) {
           <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
         }
         <span class="select2-selection__arrow" role="presentation"> </span>
       } @else {
         <ul class="select2-selection__rendered">
-          @if (!autoCreate) {
+          @if (!autoCreate()) {
             <span
               [class.select2-selection__placeholder__option]="select2Options?.length > 0"
               class="select2-selection__placeholder"
-              >{{ placeholder }}</span
+              >{{ placeholder() }}</span
             >
           }
           @for (op of option || []; track trackBy($index, op)) {
@@ -74,22 +74,22 @@
               tabindex="0"
               (keydown.enter)="removeSelection($event, op)"
             >
-              @if (!(disabled || readonly)) {
+              @if (!(disabled || readonly())) {
                 <span
                   (click)="removeSelection($event, op)"
                   class="select2-selection__choice__remove"
                   role="presentation"
                   >×</span
                 >
               }
-              @if (!hasTemplate(op, 'option', true) || noLabelTemplate) {
+              @if (!hasTemplate(op, 'option', true) || noLabelTemplate()) {
                 <span [innerHTML]="op.label"></span>
               } @else {
                 <ng-container *ngTemplateOutlet="getTemplate(op, 'option', true); context: op"></ng-container>
               }
             </li>
           }
-          @if (autoCreate) {
+          @if (autoCreate()) {
             <li class="select2-selection__auto-create" (focus)="stopEvent($event)" (blur)="stopEvent($event)">
               <input
                 [id]="id + '-create-field'"
@@ -111,7 +111,7 @@
       }
     </div>
   </div>
-  @if (!overlay) {
+  @if (!overlay()) {
     <ng-container *ngTemplateOutlet="containerTemplate"></ng-container>
   }
 
@@ -125,7 +125,7 @@
   cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayBackdropClass="select2-overlay-backdrop"
   [cdkConnectedOverlayOrigin]="trigger"
-  [cdkConnectedOverlayOpen]="this.isOpen && overlay"
+  [cdkConnectedOverlayOpen]="this.isOpen && overlay()"
   [cdkConnectedOverlayMinWidth]="overlayWidth"
   [cdkConnectedOverlayHeight]="overlayHeight"
   [cdkConnectedOverlayPositions]="_positions"
@@ -138,9 +138,9 @@
   <div
     class="select2-container select2-container--default select2-container-dropdown"
     [class.select2-container--open]="isOpen"
-    [class.select2-overlay]="overlay"
-    [class.select2-position-auto]="listPosition === 'auto'"
-    [class.select2-style-borderless]="styleMode === 'borderless'"
+    [class.select2-overlay]="overlay()"
+    [class.select2-position-auto]="listPosition() === 'auto'"
+    [class.select2-style-borderless]="styleMode() === 'borderless'"
   >
     <div
       #dropdown
@@ -153,7 +153,7 @@
           #searchInput
           [id]="id + '-search-field'"
           [value]="searchText"
-          (keydown)="keyDown($event, autoCreate)"
+          (keydown)="keyDown($event, autoCreate())"
           (keyup)="searchUpdate($event)"
           (change)="prevChange($event)"
           class="select2-search__field"
@@ -171,25 +171,25 @@
         <ul
           #results
           class="select2-results__options"
-          [class.select2-grid]="grid && isNumber(grid)"
-          [class.select2-grid-auto]="grid && !isNumber(grid)"
-          [style.max-height]="resultMaxHeight"
-          [style.--grid-size]="grid || null"
+          [class.select2-grid]="grid() && isNumber(grid())"
+          [class.select2-grid-auto]="grid() && !isNumber(grid())"
+          [style.max-height]="resultMaxHeight()"
+          [style.--grid-size]="grid() || null"
           role="tree"
           tabindex="-1"
           infiniteScroll
-          [infiniteScrollDisabled]="!infiniteScroll && !isOpen"
-          [infiniteScrollDistance]="infiniteScrollDistance"
-          [infiniteScrollThrottle]="infiniteScrollThrottle"
+          [infiniteScrollDisabled]="!infiniteScroll() && !isOpen"
+          [infiniteScrollDistance]="infiniteScrollDistance()"
+          [infiniteScrollThrottle]="infiniteScrollThrottle()"
           [infiniteScrollContainer]="results"
           (scrolled)="onScroll('down')"
           (scrolledUp)="onScroll('up')"
           (keydown)="keyDown($event)"
         >
-          @if (showSelectAll && multiple) {
+          @if (showSelectAll() && multiple) {
             <li class="select2-results__option select2-selectall" (click)="selectAll()" tabindex="1" aria-selected>
               <div class="select2-label-content">
-                {{ selectAllTest() ? removeAllText : selectAllText }}
+                {{ selectAllTest() ? removeAllText() : selectAllText() }}
               </div>
             </li>
           }
@@ -257,7 +257,7 @@
             <li class="select2-no-result select2-results__option" [innerHTML]="noResultMessage"></li>
           }
           @if (maxResultsExceeded) {
-            <li class="select2-too-much-result select2-results__option" [innerHTML]="maxResultsMessage"></li>
+            <li class="select2-too-much-result select2-results__option" [innerHTML]="maxResultsMessage()"></li>
           }
         </ul>
       </div>