@webilix/ngx-form-m3 0.0.13 → 0.0.14

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

@@ -654,6 +654,45 @@ class InputFileMethods extends InputMethods {
     }
 }
 
+class InputIconComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputIconComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-icon" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</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    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\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: [""], 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: 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: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: "19.0.5", ngImport: i0, type: InputIconComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-icon' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        AutoCompleteDirective,
+                        AutoFocusDirective,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</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    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\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" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputIconMethods extends InputMethods {
+    control(input, validators) {
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return typeof value === 'string' && value !== '' ? value : null;
+    }
+}
+
 class InputIpComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1212,6 +1251,7 @@ const InputInfo = {
     DATE: { title: 'تاریخ', methods: new InputDateMethods(), component: InputDateComponent },
     EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
     FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
+    ICON: { title: 'آیکون', methods: new InputIconMethods(), component: InputIconComponent },
     IP: { title: 'آدرس آی‌پی', methods: new InputIpMethods(), component: InputIpComponent },
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
     MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },