@webilix/ngx-form-m3 0.0.10 → 0.0.12

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

@@ -252,6 +252,40 @@ const INPUT_CONTROL = new InjectionToken('NGX-FORM-INPUT-CONTROL');
 const INPUT_TYPE = new InjectionToken('NGX-FORM-INPUT-TYPE');
 const INPUT_CONFIG = new InjectionToken('NGX-FORM-INPUT-CONFIG');
 
+class InputCheckboxComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    toggleValue() {
+        const value = !!this.formControl.value;
+        this.formControl.setValue(!value);
+        this.formControl.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputCheckboxComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-checkbox" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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\n        class=\"ngx-helper-form-m3-checkbox-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"toggleValue()\"\n    >\n        <mat-icon>{{ !!formControl.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ input.message }}</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: [":host ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center}\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: 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.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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: InputCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-checkbox' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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\n        class=\"ngx-helper-form-m3-checkbox-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"toggleValue()\"\n    >\n        <mat-icon>{{ !!formControl.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ input.message }}</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: [":host ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center}\n"] }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputCheckboxMethods extends InputMethods {
+    control(input, validators) {
+        return new FormControl(!!input.value, validators);
+    }
+    value(value, input) {
+        return !!value;
+    }
+}
+
 class InputColorComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -565,6 +599,47 @@ class InputFileMethods extends InputMethods {
     }
 }
 
+class InputIpComponent {
+    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: InputIpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputIpComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-ip" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0622\u06CC\u200C\u067E\u06CC' }}</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    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>language</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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        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\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.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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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: InputIpComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-ip' }, 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\u062F\u0631\u0633 \u0622\u06CC\u200C\u067E\u06CC' }}</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    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>language</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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        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\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 InputIpMethods extends InputMethods {
+    control(input, validators) {
+        validators.push(Validators.pattern(Helper.RE.IP4.get(true)));
+        const value = input.value && Helper.RE.IP4.verify(input.value) ? input.value : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return typeof value === 'string' && Helper.RE.IP4.verify(value) ? value : null;
+    }
+}
+
 class InputMobileComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1071,11 +1146,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 const InputInfo = {
+    CHECKBOX: { title: 'یک انتخابی', methods: new InputCheckboxMethods(), component: InputCheckboxComponent },
     COLOR: { title: 'رنگ', methods: new InputColorMethods(), component: InputColorComponent },
     COMPONENT: { title: 'کامپوننت', methods: new InputComponentMethods(), component: InputComponentComponent },
     DATE: { title: 'تاریخ', methods: new InputDateMethods(), component: InputDateComponent },
     EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
     FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
+    IP: { title: 'آدرس آی‌پی', methods: new InputIpMethods(), component: InputIpComponent },
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
     MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },
     NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
@@ -1164,7 +1241,6 @@ class NgxFormComponent {
                     this.lastValues = { ...this.formGroup.value };
                 }
                 this.values = this.getValues();
-                console.log(this.values);
                 this.onChange.next(this.values);
             },
         });