@webilix/ngx-form-m3 0.0.57 → 0.0.58

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

@@ -1013,11 +1013,11 @@ class ListInputComponent {
         input.value = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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    enterkeyhint=\"done\"\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.3.10", ngImport: i0, type: ListInputComponent, decorators: [{
             type: Component,
-            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"] }]
+            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    enterkeyhint=\"done\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"] }]
         }], propDecorators: { english: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1053,11 +1053,11 @@ class ListItemComponent {
         this.view = 'VALUE';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ListItemComponent, isStandalone: true, selector: "list-item", inputs: { value: "value", english: "english", disabled: "disabled", disableSort: "disableSort" }, outputs: { onUpdate: "onUpdate", onDelete: "onDelete" }, ngImport: i0, template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "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: "17.0.0", version: "20.3.10", type: ListItemComponent, isStandalone: true, selector: "list-item", inputs: { value: "value", english: "english", disabled: "disabled", disableSort: "disableSort" }, outputs: { onUpdate: "onUpdate", onDelete: "onDelete" }, ngImport: i0, template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "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.3.10", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'list-item', imports: [CdkDragHandle, FormsModule, MatIcon, MatIconButton, MatInput, AutoFocusDirective], template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"] }]
+            args: [{ selector: 'list-item', imports: [CdkDragHandle, FormsModule, MatIcon, MatIconButton, MatInput, AutoFocusDirective], template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"] }]
         }], propDecorators: { value: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1845,7 +1845,7 @@ class InputTagComponent {
         event.option.deselect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: InputTagComponent, isStandalone: true, selector: "ng-component", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: true, transformFunction: null }, isButtonDisabled: { classPropertyName: "isButtonDisabled", publicName: "isButtonDisabled", isSignal: false, isRequired: true, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange" }, host: { attributes: { "selector": "input-tag" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</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    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\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: [""], dependencies: [{ 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.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: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: InputTagComponent, isStandalone: true, selector: "ng-component", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: true, transformFunction: null }, isButtonDisabled: { classPropertyName: "isButtonDisabled", publicName: "isButtonDisabled", isSignal: false, isRequired: true, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange" }, host: { attributes: { "selector": "input-tag" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</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    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            enterkeyhint=\"done\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\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: [""], dependencies: [{ 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.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: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputTagComponent, decorators: [{
             type: Component,
@@ -1862,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</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    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\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" }]
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</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    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            enterkeyhint=\"done\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\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" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]