@webilix/ngx-form-m3 0.0.45 → 0.0.48

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

@@ -207,6 +207,8 @@ class InputErrorPipe {
                 return `شماره کارت بانکی صحیح مشخص نشده است.`;
             case 'bank-sheba':
                 return `شماره شبا صحیح مشخص نشده است.`;
+            case 'username':
+                return value;
             case 'pattern':
                 switch (type) {
                     case 'EMAIL':
@@ -493,6 +495,48 @@ const LengthValidator = (length) => {
     };
 };
 
+const UsernameValidator = (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 { username: `مقدار باید حداقل داری ${Helper.NUMBER.format(minLength)} کاراکتر باشد.` };
+        // USERNAME
+        const regExp = new RegExp(/^[a-z0-9-.]{1,}$/);
+        if (!regExp.test(value)) {
+            const chars = [
+                'حروف انگلیسی کوچک',
+                'اعداد انگلیسی',
+                !!verify?.useDash ? 'خط فاصله' : '',
+                !!verify?.useDot ? 'نقطه' : '',
+            ].filter((char) => char !== '');
+            return { username: `کاراکترهای مجاز: ${chars.join('، ')}` };
+        }
+        // USE DASH
+        if (!verify?.useDash && value.indexOf('-') !== -1)
+            return { username: `امکان استفاده از خط فاصله در کلمه عبور وجود ندارد.` };
+        // USE DOT
+        if (!verify?.useDot && value.indexOf('.') !== -1)
+            return { username: `امکان استفاده از نقطه در کلمه عبور وجود ندارد.` };
+        // START WITH CHAR
+        if (!!verify?.startWithChar) {
+            const regExp = new RegExp(/^[a-z]{1}/);
+            if (!regExp.test(value))
+                return { username: 'مقدار باید با یک کاراکتر انگلیسی شروع شده باشد.' };
+        }
+        // END WITH CHAR
+        if (!!verify?.endWithChar) {
+            const regExp = new RegExp(/[a-z]{1}$/);
+            if (!regExp.test(value))
+                return { username: 'مقدار باید با یک کاراکتر انگلیسی تمام شده باشد.' };
+        }
+        return null;
+    };
+};
+
 class InputBankCardMethods extends InputMethods {
     control(input, validators) {
         validators.push(BankCardValidator());
@@ -1801,7 +1845,7 @@ class InputTagComponent {
         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" }] });
+    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        <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-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\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,
@@ -1818,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         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" }]
+                    ], 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        <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-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\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 }]
@@ -1938,6 +1982,97 @@ class InputTextareaMethods extends InputMethods {
     }
 }
 
+class InputTimeComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    hour = '--';
+    hours = [...Array(24).keys()].map((hour) => hour.toString().padStart(2, '0'));
+    minute = '--';
+    minutes = [...Array(60).keys()].map((minute) => minute.toString().padStart(2, '0'));
+    second = '--';
+    seconds = [...Array(60).keys()].map((minute) => minute.toString().padStart(2, '0'));
+    ngOnInit() {
+        if (!this.input.value)
+            return;
+        const value = this.input.value.split(':');
+        this.hour = value[0];
+        this.minute = value[1];
+        this.second = this.input.showSeconds ? value[2] : '00';
+    }
+    setValue() {
+        const value = this.hour === '--' ? null : [this.hour, this.minute, this.second].join(':');
+        this.formControl.setValue(value);
+        this.formControl.markAsTouched();
+    }
+    resetTime() {
+        this.hour = '--';
+        this.minute = '--';
+        this.second = '--';
+        this.setValue();
+    }
+    setNow() {
+        const now = new Date();
+        this.hour = now.getHours().toString().padStart(2, '0');
+        this.minute = now.getMinutes().toString().padStart(2, '0');
+        this.second = this.input.showSeconds ? now.getSeconds().toString().padStart(2, '0') : '00';
+        this.setValue();
+    }
+    setHour(hour) {
+        this.hour = hour;
+        this.minute = this.minute === '--' ? '00' : this.minute;
+        this.second = this.input.showSeconds ? (this.second === '--' ? '00' : this.minute) : '00';
+        this.setValue();
+    }
+    setMinute(minute) {
+        if (this.hour === '--')
+            return;
+        this.minute = minute;
+        this.setValue();
+    }
+    setSecond(second) {
+        if (this.hour === '--' || !this.input.showSeconds)
+            return;
+        this.second = second;
+        this.setValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputTimeComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-time" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</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    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'access_time' }}\n        </mat-icon>\n    </span>\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-time-input\">\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"hourMenu\"\n            [disabled]=\"formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        >\n            {{ hour }}\n        </button>\n        <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\">\n            @for (h of hours; track $index) {\n            <button mat-menu-item (click)=\"setHour(h)\" [disabled]=\"hour === h || formControl.disabled\">\n                <span class=\"hour\">{{ h }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"minuteMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ minute }}\n        </button>\n        <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\">\n            @for (m of minutes; track $index) {\n            <button mat-menu-item (click)=\"setMinute(m)\" [disabled]=\"minute === m || formControl.disabled\">\n                <span class=\"minute\">{{ m }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <!-- SECOND -->\n        @if (input.showSeconds) {\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"secondMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ second }}\n        </button>\n        <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\">\n            @for (s of seconds; track $index) {\n            <button mat-menu-item (click)=\"setSecond(s)\" [disabled]=\"second === s || formControl.disabled\">\n                <span class=\"second\">{{ s }}</span>\n            </button>\n            }\n        </mat-menu>\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: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "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: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTimeComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-time' }, imports: [
+                        ReactiveFormsModule,
+                        MatButton,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        MatMenuModule,
+                        MatSelectModule,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</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    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'access_time' }}\n        </mat-icon>\n    </span>\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-time-input\">\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"hourMenu\"\n            [disabled]=\"formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        >\n            {{ hour }}\n        </button>\n        <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\">\n            @for (h of hours; track $index) {\n            <button mat-menu-item (click)=\"setHour(h)\" [disabled]=\"hour === h || formControl.disabled\">\n                <span class=\"hour\">{{ h }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"minuteMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ minute }}\n        </button>\n        <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\">\n            @for (m of minutes; track $index) {\n            <button mat-menu-item (click)=\"setMinute(m)\" [disabled]=\"minute === m || formControl.disabled\">\n                <span class=\"minute\">{{ m }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <!-- SECOND -->\n        @if (input.showSeconds) {\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"secondMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ second }}\n        </button>\n        <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\">\n            @for (s of seconds; track $index) {\n            <button mat-menu-item (click)=\"setSecond(s)\" [disabled]=\"second === s || formControl.disabled\">\n                <span class=\"second\">{{ s }}</span>\n            </button>\n            }\n        </mat-menu>\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 InputTimeMethods extends InputMethods {
+    control(input, validators) {
+        const value = input.value && Helper.IS.STRING.time(input.value) ? input.value : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && Helper.IS.STRING.time(value) ? value : null;
+    }
+}
+
 class InputUrlComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1979,6 +2114,47 @@ class InputUrlMethods extends InputMethods {
     }
 }
 
+class InputUsernameComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputUsernameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputUsernameComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-username" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\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    <!-- 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        [ngClass]=\"'ngx-form-m3-en'\"\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: "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: 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputUsernameComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-username' }, imports: [
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        AutoCompleteDirective,
+                        AutoFocusDirective,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\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    <!-- 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        [ngClass]=\"'ngx-form-m3-en'\"\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 InputUsernameMethods extends InputMethods {
+    control(input, validators) {
+        validators.push(UsernameValidator(input.verify));
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && value !== '' ? value : null;
+    }
+}
+
 class InputComponent {
     formGroup;
     input;
@@ -2055,7 +2231,9 @@ const InputInfo = {
     TAG: { title: 'تگ', methods: new InputTagMethods(), component: InputTagComponent },
     TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
     TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
+    TIME: { title: 'ساعت', methods: new InputTimeMethods(), component: InputTimeComponent },
     URL: { title: 'آدرس سایت', methods: new InputUrlMethods(), component: InputUrlComponent },
+    USERNAME: { title: 'نام کاربری', methods: new InputUsernameMethods(), component: InputUsernameComponent },
 };
 
 const NGX_FORM_CONFIG = new InjectionToken('NGX-FORM-CONFIG');