@webilix/ngx-form-m3 0.0.66 → 0.0.67

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

@@ -229,6 +229,8 @@ class InputErrorPipe {
                         return `شماره موبایل صحیح مشخص نشده است.`;
                 }
                 break;
+            case 'id':
+                return value;
             case 'username':
                 return value;
             case 'pattern':
@@ -373,7 +375,7 @@ class InputBankCardComponent {
     setCard(card) {
         card = card.replace(/-/g, '').substring(0, 6);
         const bank = Helper.BANK.findCard(card);
-        this.bank.update(() => bank?.title || '');
+        this.bank.set(bank?.title || '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputBankCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputBankCardComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-bank-card" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u06A9\u0627\u0631\u062A \u0628\u0627\u0646\u06A9\u06CC' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\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-bank-card-input\">\n        <!-- BANK NAME -->\n        @if (!input.hideBank && bank() !== '') {\n            <div class=\"bank\">{{ bank() }}</div>\n        }\n\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"numeric\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [maskito]=\"maskitoOptions\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setValue(); setCard(bankCardInput.value)\"\n            #bankCardInput\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
@@ -528,6 +530,47 @@ const DuplicateValidator = (callback) => {
     };
 };
 
+const IdValidator = (verify) => {
+    return (formControl) => {
+        const value = formControl.value;
+        if (Helper.IS.empty(value) || !Helper.IS.string(value))
+            return null;
+        // MINLENGTH
+        const minLength = verify?.minLength;
+        if (minLength && minLength > 0 && value.length < minLength)
+            return { id: `مقدار باید حداقل داری ${Helper.NUMBER.format(minLength)} کاراکتر باشد.` };
+        // MAXLENGTH
+        const maxLength = verify?.maxLength;
+        if (maxLength && maxLength > 0 && value.length > maxLength)
+            return { id: `مقدار می‌تواند حداکثر داری ${Helper.NUMBER.format(maxLength)} کاراکتر باشد.` };
+        // ID
+        const regExp = new RegExp(/^[a-z0-9-.]{1,}$/);
+        if (!regExp.test(value)) {
+            const chars = [].filter((char) => char !== '');
+            return { id: 'کاراکترهای مجاز: حروف انگلیسی کوچک  و اعداد انگلیسی' };
+        }
+        // USE DASH
+        if (!verify?.useDash && value.indexOf('-') !== -1)
+            return { id: `امکان استفاده از خط فاصله در مقدار وجود ندارد.` };
+        // USE DOT
+        if (!verify?.useDot && value.indexOf('.') !== -1)
+            return { id: `امکان استفاده از نقطه در مقدار وجود ندارد.` };
+        // START WITH CHAR
+        if (!verify?.canStartWithNumber) {
+            const regExp = new RegExp(/^[a-z]{1}/);
+            if (!regExp.test(value))
+                return { id: 'مقدار باید با یک کاراکتر انگلیسی شروع شده باشد.' };
+        }
+        // END WITH CHAR
+        if (!verify?.canEndWithNumber) {
+            const regExp = new RegExp(/[a-z]{1}$/);
+            if (!regExp.test(value))
+                return { id: 'مقدار باید با یک کاراکتر انگلیسی تمام شده باشد.' };
+        }
+        return null;
+    };
+};
+
 const LengthValidator = (length) => {
     return (formControl) => {
         const value = formControl.value;
@@ -573,10 +616,10 @@ const UsernameValidator = (verify) => {
         }
         // USE DASH
         if (!verify?.useDash && value.indexOf('-') !== -1)
-            return { username: `امکان استفاده از خط فاصله در کلمه عبور وجود ندارد.` };
+            return { username: `امکان استفاده از خط فاصله در نام کاربری وجود ندارد.` };
         // USE DOT
         if (!verify?.useDot && value.indexOf('.') !== -1)
-            return { username: `امکان استفاده از نقطه در کلمه عبور وجود ندارد.` };
+            return { username: `امکان استفاده از نقطه در نام کاربری وجود ندارد.` };
         // START WITH CHAR
         if (!!verify?.startWithChar) {
             const regExp = new RegExp(/^[a-z]{1}/);
@@ -1015,6 +1058,46 @@ class InputIconMethods extends InputMethods {
     }
 }
 
+class InputIdComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputIdComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-id" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0646\u0627\u0633\u0647' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\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>label</mat-icon>\n        </span>\n    }\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        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maxLength]=\"input.verify?.maxLength || 524288\"\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIdComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-id' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        AutoCompleteDirective,
+                        AutoFocusDirective,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0646\u0627\u0633\u0647' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\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>label</mat-icon>\n        </span>\n    }\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        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maxLength]=\"input.verify?.maxLength || 524288\"\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 InputIdMethods extends InputMethods {
+    control(input, validators) {
+        validators.push(IdValidator(input.verify));
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && value !== '' ? value : null;
+    }
+}
+
 class InputIpComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -2328,6 +2411,7 @@ const InputInfo = {
     EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
     FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
     ICON: { title: 'آیکون', methods: new InputIconMethods(), component: InputIconComponent },
+    ID: { title: 'شناسه', methods: new InputIdMethods(), component: InputIdComponent },
     IP: { title: 'آدرس آی‌پی', methods: new InputIpMethods(), component: InputIpComponent },
     'ITEM-LIST': { title: 'لیست مقادیر', methods: new InputItemListMethods(), component: InputItemListComponent },
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },