@webilix/ngx-form-m3 0.0.38 → 0.0.39

package/fesm2022/webilix-ngx-form-m3.mjs

@@ -955,6 +955,7 @@ class ListInputComponent {
     english;
     disabled;
     autoFocus;
+    placeholder;
     onFocus = new EventEmitter();
     onInput = new EventEmitter();
     checkValue(input) {
@@ -965,11 +966,11 @@ class ListInputComponent {
         input.value = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ListInputComponent, isStandalone: true, selector: "list-input", inputs: { english: "english", disabled: "disabled", autoFocus: "autoFocus" }, outputs: { onFocus: "onFocus", onInput: "onInput" }, ngImport: i0, template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F'\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ListInputComponent, isStandalone: true, selector: "list-input", inputs: { english: "english", disabled: "disabled", autoFocus: "autoFocus", placeholder: "placeholder" }, outputs: { onFocus: "onFocus", onInput: "onInput" }, ngImport: i0, template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"placeholder || (english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F')\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ListInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'list-input', imports: [MatInput, AutoFocusDirective], template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F'\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"] }]
+            args: [{ selector: 'list-input', imports: [MatInput, AutoFocusDirective], template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"placeholder || (english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F')\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"] }]
         }], propDecorators: { english: [{
                 type: Input,
                 args: [{ required: true }]
@@ -979,6 +980,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }], autoFocus: [{
                 type: Input,
                 args: [{ required: true }]
+            }], placeholder: [{
+                type: Input,
+                args: [{ required: true }]
             }], onFocus: [{
                 type: Output
             }], onInput: [{
@@ -1063,7 +1067,7 @@ class InputItemListComponent {
         this.setValue();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputItemListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-item-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputItemListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-item-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus", "placeholder"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputItemListComponent, decorators: [{
             type: Component,
@@ -1078,7 +1082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         MultiLinePipe,
                         ListInputComponent,
                         ListItemComponent,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1466,7 +1470,7 @@ class InputOptionListComponent {
         this.setValue();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputOptionListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-option-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: InputOptionListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-option-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus", "placeholder"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InputOptionListComponent, decorators: [{
             type: Component,
@@ -1481,7 +1485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         MultiLinePipe,
                         ListInputComponent,
                         ListItemComponent,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]