@webilix/ngx-form-m3 0.0.42 → 0.0.43

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, EventEmitter, Output, makeEnvironmentProviders, ViewChild, Inject } from '@angular/core';
+import { HostBinding, Directive, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, EventEmitter, Output, model, computed, makeEnvironmentProviders, ViewChild, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, Validators, FormsModule, FormGroup } from '@angular/forms';
 import { MatIconButton, MatButton } from '@angular/material/button';
@@ -24,6 +24,9 @@ import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i3$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import * as i1$5 from '@angular/router';
 
 class AutoCompleteDirective {
@@ -1752,6 +1755,93 @@ class InputSelectMethods extends InputMethods {
     }
 }
 
+class InputTagComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    separatorKeysCodes = [ENTER, COMMA];
+    inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    tags = Array.isArray(this.formControl.value) ? this.formControl.value : [];
+    filteredTags = computed(() => {
+        const value = this.inputValue().toLowerCase();
+        const options = this.input.tags
+            .filter((tag) => !this.tags.includes(tag))
+            .filter((t, i, a) => a.indexOf(t) === i)
+            .sort((t1, t2) => t1.localeCompare(t2));
+        return value ? options.filter((option) => option.toLowerCase().includes(value)) : options;
+    }, ...(ngDevMode ? [{ debugName: "filteredTags" }] : []));
+    setValues() {
+        this.tags = this.tags.sort((t1, t2) => t1.localeCompare(t2));
+        this.formControl.setValue(this.tags.length === 0 ? null : this.tags);
+        this.formControl.markAsTouched();
+        this.inputValue.set('');
+    }
+    addTag(event) {
+        const value = (event.value || '').trim();
+        if (!value || this.tags.includes(value))
+            return;
+        this.tags.push(value);
+        this.setValues();
+    }
+    removeTag(tag) {
+        if (!this.tags.includes(tag))
+            return;
+        this.tags = this.tags.filter((t) => t !== tag);
+        this.setValues();
+    }
+    selectTag(event) {
+        const value = event.option.viewValue;
+        if (!value || this.tags.includes(value))
+            return;
+        this.tags.push(value);
+        this.setValues();
+        event.option.deselect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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    </mat-chip-grid>\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-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) {\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\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.1.4", ngImport: i0, type: InputTagComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-tag' }, imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        AutoCompleteDirective,
+                        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    </mat-chip-grid>\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-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) {\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputTagMethods extends InputMethods {
+    control(input, validators) {
+        if (input.minCount)
+            validators.push(MinCountValidator(input.minCount));
+        if (input.maxCount)
+            validators.push(MaxCountValidator(input.maxCount));
+        const value = (Array.isArray(input.value) ? input.value : [])
+            .filter((value) => Helper.IS.string(value) && value !== '')
+            .filter((value, index, arr) => arr.indexOf(value) === index);
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Array.isArray(value) && value.length > 0 ? value : null;
+    }
+}
+
 class InputTextComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1961,6 +2051,7 @@ const InputInfo = {
     PRICE: { title: 'قیمت', methods: new InputPriceMethods(), component: InputPriceComponent },
     ROUTE: { title: 'مسیر', methods: new InputRouteMethods(), component: InputRouteComponent },
     SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
+    TAG: { title: 'تگ', methods: new InputTagMethods(), component: InputTagComponent },
     TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
     TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
     URL: { title: 'آدرس سایت', methods: new InputUrlMethods(), component: InputUrlComponent },
@@ -2170,6 +2261,7 @@ class NgxFormComponent {
             input.type === 'ITEM-LIST' ||
             input.type === 'MULTI-SELECT' ||
             input.type === 'OPTION-LIST' ||
+            input.type === 'TAG' ||
             input.optional ||
             readonly
             ? []