osl-base-extended 1.0.48 → 1.0.49

package/fesm2022/osl-base-extended.mjs

@@ -162,12 +162,17 @@ class baseComponent {
                 continue;
             }
             const isRequired = el.required || el.requiredIf?.(model);
-            if (isRequired) {
-                const value = model[el.key];
-                const isEmpty = value === null || value === undefined || value === ''
-                    || (Array.isArray(value) && value.length === 0);
-                if (isEmpty) {
-                    errors.push(`${el.label} is required`);
+            const value = model[el.key];
+            const isEmpty = value === null || value === undefined || value === ''
+                || (Array.isArray(value) && value.length === 0);
+            if (isRequired && isEmpty) {
+                errors.push(`${el.label} is required`);
+                continue;
+            }
+            if (el.inputType === 'email' && !isEmpty) {
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(value)) {
+                    errors.push(`${el.label} must be a valid email address`);
                 }
             }
         }
@@ -968,6 +973,35 @@ class Oslinput {
     togglePassword() {
         this.showPassword = !this.showPassword;
     }
+    onKeyDown(event) {
+        if (!this.mask)
+            return;
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if (event.key.length !== 1)
+            return; // allow control keys (Backspace, Tab, arrows, etc.)
+        if (!this.isKeyAllowedByMask(event.key)) {
+            event.preventDefault();
+        }
+    }
+    isKeyAllowedByMask(key) {
+        const maskSlots = new Set();
+        for (const c of this.mask) {
+            if (c === '0')
+                maskSlots.add('digit');
+            else if (c === 'A')
+                maskSlots.add('letter');
+            else if (c === '*')
+                maskSlots.add('any');
+        }
+        if (maskSlots.has('any'))
+            return true;
+        if (maskSlots.has('letter') && /[a-zA-Z]/.test(key))
+            return true;
+        if (maskSlots.has('digit') && /\d/.test(key))
+            return true;
+        return false;
+    }
     onModelChange(value) {
         const processed = this.mask ? this.applyMask(value) : value;
         this.model = processed;
@@ -1006,11 +1040,11 @@ class Oslinput {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n        <span [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\r\n    </label>\r\n    </div>\r\n}\r\n\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\r\n        @if(prefixIcon) {\r\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\r\n        }\r\n        <input\r\n    \r\n            [type]=\"inputType\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [attr.min]=\"min || null\"\r\n            [attr.max]=\"max || null\"\r\n            [attr.minlength]=\"minLength\"\r\n            [attr.maxlength]=\"maxLength\"\r\n            [email]=\"type === 'email'\"\r\n            #myField=\"ngModel\"\r\n            class=\"inner-input\"\r\n        >\r\n        @if(type === 'password') {\r\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\r\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            </button>\r\n        }\r\n        @if(suffixIcon && type !== 'password') {\r\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\r\n        }\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid) {\r\n        @if(myField.errors?.['required']) {\r\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n        } @else if(myField.errors?.['email']) {\r\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\r\n        } @else if(myField.errors?.['minlength']) {\r\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n        } @else if(myField.errors?.['maxlength']) {\r\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n        } @else if(myField.errors?.['min']) {\r\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\r\n        } @else if(myField.errors?.['max']) {\r\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\r\n        }\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n        <span [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\r\n    </label>\r\n    </div>\r\n}\r\n\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\r\n        @if(prefixIcon) {\r\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\r\n        }\r\n        <input\r\n    \r\n            [type]=\"inputType\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [attr.min]=\"min || null\"\r\n            [attr.max]=\"max || null\"\r\n            [attr.minlength]=\"minLength\"\r\n            [attr.maxlength]=\"maxLength\"\r\n            [email]=\"type === 'email'\"\r\n            #myField=\"ngModel\"\r\n            class=\"inner-input\"\r\n        >\r\n        @if(type === 'password') {\r\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\r\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            </button>\r\n        }\r\n        @if(suffixIcon && type !== 'password') {\r\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\r\n        }\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid) {\r\n        @if(myField.errors?.['required']) {\r\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n        } @else if(myField.errors?.['email']) {\r\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\r\n        } @else if(myField.errors?.['minlength']) {\r\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n        } @else if(myField.errors?.['maxlength']) {\r\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n        } @else if(myField.errors?.['min']) {\r\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\r\n        } @else if(myField.errors?.['max']) {\r\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\r\n        }\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n        <span [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\r\n    </label>\r\n    </div>\r\n}\r\n\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\r\n        @if(prefixIcon) {\r\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\r\n        }\r\n        <input\r\n    \r\n            [type]=\"inputType\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [attr.min]=\"min || null\"\r\n            [attr.max]=\"max || null\"\r\n            [attr.minlength]=\"minLength\"\r\n            [attr.maxlength]=\"maxLength\"\r\n            [email]=\"type === 'email'\"\r\n            #myField=\"ngModel\"\r\n            class=\"inner-input\"\r\n        >\r\n        @if(type === 'password') {\r\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\r\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            </button>\r\n        }\r\n        @if(suffixIcon && type !== 'password') {\r\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\r\n        }\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid) {\r\n        @if(myField.errors?.['required']) {\r\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n        } @else if(myField.errors?.['email']) {\r\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\r\n        } @else if(myField.errors?.['minlength']) {\r\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n        } @else if(myField.errors?.['maxlength']) {\r\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n        } @else if(myField.errors?.['min']) {\r\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\r\n        } @else if(myField.errors?.['max']) {\r\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\r\n        }\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
+            args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n    @if(label){\r\n    <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n    <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n        <span [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\r\n    </label>\r\n    </div>\r\n}\r\n\r\n    <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\r\n        @if(prefixIcon) {\r\n            <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\r\n        }\r\n        <input\r\n    \r\n            [type]=\"inputType\"\r\n            [ngModel]=\"model\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            (change)=\"onChange()\"\r\n            [required]=\"required\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [attr.min]=\"min || null\"\r\n            [attr.max]=\"max || null\"\r\n            [attr.minlength]=\"minLength\"\r\n            [attr.maxlength]=\"maxLength\"\r\n            [email]=\"type === 'email'\"\r\n            #myField=\"ngModel\"\r\n            class=\"inner-input\"\r\n        >\r\n        @if(type === 'password') {\r\n            <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\r\n                <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n            </button>\r\n        }\r\n        @if(suffixIcon && type !== 'password') {\r\n            <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\r\n        }\r\n    </div>\r\n\r\n    @if(myField.touched && myField.invalid) {\r\n        @if(myField.errors?.['required']) {\r\n            <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n        } @else if(myField.errors?.['email']) {\r\n            <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\r\n        } @else if(myField.errors?.['minlength']) {\r\n            <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\r\n        } @else if(myField.errors?.['maxlength']) {\r\n            <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\r\n        } @else if(myField.errors?.['min']) {\r\n            <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\r\n        } @else if(myField.errors?.['max']) {\r\n            <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\r\n        }\r\n    }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']