@webilix/ngx-form-m3 0.0.27 → 0.0.28

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

@@ -20,7 +20,7 @@ import * as i1$3 from '@webilix/ngx-calendar-m3';
 import * as i3 from '@angular/cdk/bidi';
 import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3$2 from '@angular/material/select';
+import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$4 from '@angular/router';
 
@@ -1068,12 +1068,26 @@ class InputMultiSelectComponent {
         this.formControl.setValue(this.ids.length === 0 ? null : this.ids);
         this.formControl.markAsTouched();
     }
+    getSelectValues() {
+        if (this.formControl.disabled)
+            return '';
+        const ids = this.input.options.map((option) => option.id);
+        this.ids = Array.isArray(this.formControl.value) ? this.formControl.value : [this.formControl.value];
+        this.ids = this.ids.filter((id) => ids.includes(id));
+        if (this.ids.length > 3)
+            return `${this.ids.length} ${this.input.english ? 'Items' : 'گزینه'}`;
+        return this.input.options
+            .filter((option) => this.ids.includes(option.id))
+            .map((option) => option.title)
+            .join('، ');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: InputMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\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 -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\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: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], 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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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]", exportAs: ["matButton"] }, { 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.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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- LABEL -->\n    @if (input.view === 'SELECT') {\n    <mat-label>{{ input.title }}</mat-label>\n    }\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 (DEFAULT VIEW) -->\n    @if (!input.view) {\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    }\n\n    <!-- INPUT (SELECT VIEW) -->\n    @if (input.view === 'SELECT') {\n    <mat-select\n        [formControl]=\"formControl\"\n        [multiple]=\"true\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n    >\n        <mat-select-trigger>{{ getSelectValues() }}</mat-select-trigger>\n        @for (option of input.options; track $index) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n    }\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: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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]", exportAs: ["matButton"] }, { 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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: InputMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-multi-select' }, imports: [
+                        NgClass,
                         ReactiveFormsModule,
                         MatButton,
                         MatFormField,
@@ -1081,9 +1095,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         MatIconButton,
                         MatInputModule,
                         MatMenuModule,
+                        MatSelectModule,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\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 -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\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: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- LABEL -->\n    @if (input.view === 'SELECT') {\n    <mat-label>{{ input.title }}</mat-label>\n    }\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 (DEFAULT VIEW) -->\n    @if (!input.view) {\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    }\n\n    <!-- INPUT (SELECT VIEW) -->\n    @if (input.view === 'SELECT') {\n    <mat-select\n        [formControl]=\"formControl\"\n        [multiple]=\"true\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n    >\n        <mat-select-trigger>{{ getSelectValues() }}</mat-select-trigger>\n        @for (option of input.options; track $index) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n    }\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: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
         }], propDecorators: { listHeight: [{
                 type: HostBinding,
                 args: ['style.--listHeight']
@@ -1368,7 +1383,7 @@ class InputSelectComponent {
         return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: InputSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-select" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\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    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (closed)=\"searchInput.value = ''; searchQuery = ''\"\n    >\n        <!-- SEARCH -->\n        <div\n            class=\"ngx-helper-form-m3-select-input\"\n            [style.display]=\"!input.hideSearch && input.options.length > 10 ? '' : 'none'\"\n        >\n            <input\n                type=\"text\"\n                [class.ngx-form-m3-en]=\"input.english\"\n                placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n                (input)=\"searchQuery = searchInput.value.trim()\"\n                #searchInput\n            />\n        </div>\n\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n        </mat-select-trigger>\n\n        <!-- OPTIONS -->\n        @for (option of input.options; track $index) {\n        <!-- CHECK SEARCH QUERY -->\n        @if (!searchQuery || option.title.includes(searchQuery)) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        } }\n    </mat-select>\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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]", exportAs: ["matButton"] }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "19.2.10", type: InputSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-select" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\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    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (closed)=\"searchInput.value = ''; searchQuery = ''\"\n    >\n        <!-- SEARCH -->\n        <div\n            class=\"ngx-helper-form-m3-select-input\"\n            [style.display]=\"!input.hideSearch && input.options.length > 10 ? '' : 'none'\"\n        >\n            <input\n                type=\"text\"\n                [class.ngx-form-m3-en]=\"input.english\"\n                placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n                (input)=\"searchQuery = searchInput.value.trim()\"\n                #searchInput\n            />\n        </div>\n\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n        </mat-select-trigger>\n\n        <!-- OPTIONS -->\n        @for (option of input.options; track $index) {\n        <!-- CHECK SEARCH QUERY -->\n        @if (!searchQuery || option.title.includes(searchQuery)) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        } }\n    </mat-select>\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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]", exportAs: ["matButton"] }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "19.2.10", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,