@apexara/ng-components 1.0.6-test.7 → 1.0.6

package/fesm2022/apexara-ng-components-input.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, HostListener, Output, Input, Component } from '@angular/core';
+import { model, input, computed, EventEmitter, signal, HostListener, Output, Input, Component } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import * as i1 from '@angular/forms';
@@ -10,6 +10,19 @@ import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/to
 
 class ApexInputComponent {
     constructor() {
+        // Stable per-instance id wiring label ↔ input ↔ error message for AT.
+        this.inputId = `apex-input-${ApexInputComponent.nextId++}`;
+        this.errorId = `${this.inputId}-error`;
+        // ── Angular Signal Forms (FormValueControl) ──────────────────────────────
+        // The [formField] directive (Angular 22+) binds the field's value to `value`
+        // and flows field state into `disabled`/`invalid`/`errors`. This coexists with
+        // the legacy `options.formGroup`/`formControlName` Reactive-Forms binding —
+        // when a formGroup is supplied that path takes over (see the template).
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        this.fieldErrorMessage = computed(() => this.errors()[0]?.message ?? '', ...(ngDevMode ? [{ debugName: "fieldErrorMessage" }] : []));
         this.inputChange = new EventEmitter();
         this.suffixImgChange = new EventEmitter();
         this.helperTextChange = new EventEmitter();
@@ -18,6 +31,13 @@ class ApexInputComponent {
         this.tooltipPosition = TooltipPosition;
         this.control = null;
     }
+    static { this.nextId = 0; }
+    // Accessible-name fallback chain: explicit ariaLabel → visible label →
+    // placeholder. aria-label wins the accname algorithm, so the name stays
+    // correct even when consumers hide the .header visually.
+    get ariaLabelValue() {
+        return this.options?.ariaLabel ?? (this.options?.label || this.options?.placeholder || null);
+    }
     ngOnInit() {
         this.setControl();
     }
@@ -27,9 +47,12 @@ class ApexInputComponent {
         }
     }
     onInput(event) {
-        const input = event.target;
-        const sanitizedValue = input.value.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|[\uD83C-\uDBFF\uDC00-\uDFFF])/g, '');
-        input.value = sanitizedValue;
+        const el = event.target;
+        const sanitizedValue = el.value.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|[\uD83C-\uDBFF\uDC00-\uDFFF])/g, '');
+        el.value = sanitizedValue;
+        // Drive the Signal Forms field (no-op for legacy uncontrolled usage, which
+        // simply listens to `inputChange`).
+        this.value.set(sanitizedValue);
         this.inputChange.emit(sanitizedValue);
     }
     onSuffixImage() {
@@ -94,7 +117,7 @@ class ApexInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexInputComponent, isStandalone: true, selector: "apex-input", inputs: { options: "options" }, outputs: { inputChange: "inputChange", suffixImgChange: "suffixImgChange", helperTextChange: "helperTextChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexInputComponent, isStandalone: true, selector: "apex-input", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputChange: "inputChange", suffixImgChange: "suffixImgChange", helperTextChange: "helperTextChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label [attr.for]=\"inputId\">{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'error': invalid(), 'disabled': options.disabled || disabled() }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled || disabled()\" class=\"input\" autocomplete=\"off\" [id]=\"inputId\" [attr.aria-label]=\"ariaLabelValue\" [attr.aria-invalid]=\"invalid() ? 'true' : null\" [attr.aria-describedby]=\"invalid() && fieldErrorMessage() ? errorId : null\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [value]=\"value()\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        @if (invalid() && fieldErrorMessage()) {\n            <div class=\"footer error\" [id]=\"errorId\" aria-live=\"polite\">{{ fieldErrorMessage() }}</div>\n        }\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [id]=\"inputId\" [attr.aria-label]=\"ariaLabelValue\" [attr.aria-invalid]=\"controlInvalid() ? 'true' : null\" [attr.aria-describedby]=\"controlInvalid() && label() ? errorId : null\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\" [id]=\"errorId\" aria-live=\"polite\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<!-- Prefix is decorative (the field is named via label/aria-label): empty alt\n     lets apex-img mark it aria-hidden. The suffix is interactive (click emits),\n     so it carries button semantics + keyboard activation. -->\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"''\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"options.suffixAriaLabel ?? 'Input action'\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" (keydown.enter)=\"onSuffixImage()\" (keydown.space)=\"$event.preventDefault(); onSuffixImage()\" [alt]=\"''\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt", "loading"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexInputComponent, decorators: [{
             type: Component,
@@ -107,10 +130,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ReactiveFormsModule,
                         ApexTooltipDirective,
                         ApexTooltipDirective
-                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
+                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label [attr.for]=\"inputId\">{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'error': invalid(), 'disabled': options.disabled || disabled() }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled || disabled()\" class=\"input\" autocomplete=\"off\" [id]=\"inputId\" [attr.aria-label]=\"ariaLabelValue\" [attr.aria-invalid]=\"invalid() ? 'true' : null\" [attr.aria-describedby]=\"invalid() && fieldErrorMessage() ? errorId : null\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [value]=\"value()\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        @if (invalid() && fieldErrorMessage()) {\n            <div class=\"footer error\" [id]=\"errorId\" aria-live=\"polite\">{{ fieldErrorMessage() }}</div>\n        }\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [id]=\"inputId\" [attr.aria-label]=\"ariaLabelValue\" [attr.aria-invalid]=\"controlInvalid() ? 'true' : null\" [attr.aria-describedby]=\"controlInvalid() && label() ? errorId : null\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\" [id]=\"errorId\" aria-live=\"polite\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<!-- Prefix is decorative (the field is named via label/aria-label): empty alt\n     lets apex-img mark it aria-hidden. The suffix is interactive (click emits),\n     so it carries button semantics + keyboard activation. -->\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"''\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"options.suffixAriaLabel ?? 'Input action'\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" (keydown.enter)=\"onSuffixImage()\" (keydown.space)=\"$event.preventDefault(); onSuffixImage()\" [alt]=\"''\"></apex-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--apex-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--apex-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--apex-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--apex-input-border-color, #E9E9E9);border-width:var(--apex-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--apex-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-input-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}apex-img.left path{fill:var(--apex-input-icon-left-fill, #C6C6C6);stroke:var(--apex-input-icon-left-stroke, transparent)}apex-img.right path{fill:var(--apex-input-icon-right-fill, #C6C6C6);stroke:var(--apex-input-icon-right-stroke, transparent)}.error{border-color:var(--apex-input-border-error-color, #F96138);border-width:var(--apex-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--apex-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
-            }], inputChange: [{
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], inputChange: [{
                 type: Output
             }], suffixImgChange: [{
                 type: Output

package/fesm2022/apexara-ng-components-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, signal } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';\n\nimport { Subscription, filter } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n}\n\nexport interface ApexControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    ApexImageComponent,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n    ApexTooltipDirective\n  ]\n})\n\nexport class ApexInputComponent {\n\n  @Input() options!: ApexInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label = signal('');\n  public controlInvalid = signal(false);\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n\n    const sanitizedValue = input.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n\n    input.value = sanitizedValue;\n\n    this.inputChange.emit(sanitizedValue);\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n\n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n\n    this.controlSubscription.add(\n      this.control.events\n        .pipe(filter(event => event instanceof TouchedChangeEvent))\n        .subscribe(() => {\n          this.initChange();\n        })\n    );\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid.set(control.touched && control.invalid);\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n\n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label.set('');\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid()) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label.set(options.errors[error]);\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"'Input prefix icon'\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [alt]=\"'Input suffix icon'\"></apex-img>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, signal, model, input, computed } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';\nimport { FormValueControl, ValidationError } from '@angular/forms/signals';\n\nimport { Subscription, filter } from 'rxjs';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexControlErrors;\n  // Accessible name override. Consumers that hide the visible label (or rely on\n  // placeholder-only design) still get a real accessible name — the input falls\n  // back to label, then placeholder, when this is not set.\n  ariaLabel?: string;\n  // Accessible name for the interactive suffix icon (e.g. \"Show password\").\n  suffixAriaLabel?: string;\n}\n\nexport interface ApexControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    ApexImageComponent,\n    ReactiveFormsModule,\n    ApexTooltipDirective,\n    ApexTooltipDirective\n  ]\n})\n\nexport class ApexInputComponent implements FormValueControl<string> {\n\n  private static nextId = 0;\n\n  // Stable per-instance id wiring label ↔ input ↔ error message for AT.\n  public readonly inputId = `apex-input-${ApexInputComponent.nextId++}`;\n  public readonly errorId = `${this.inputId}-error`;\n\n  @Input() options!: ApexInputOptions;\n\n  // Accessible-name fallback chain: explicit ariaLabel → visible label →\n  // placeholder. aria-label wins the accname algorithm, so the name stays\n  // correct even when consumers hide the .header visually.\n  public get ariaLabelValue(): string | null {\n    return this.options?.ariaLabel ?? (this.options?.label || this.options?.placeholder || null);\n  }\n\n  // ── Angular Signal Forms (FormValueControl) ──────────────────────────────\n  // The [formField] directive (Angular 22+) binds the field's value to `value`\n  // and flows field state into `disabled`/`invalid`/`errors`. This coexists with\n  // the legacy `options.formGroup`/`formControlName` Reactive-Forms binding —\n  // when a formGroup is supplied that path takes over (see the template).\n  public value = model<string>('');\n  public disabled = input<boolean>(false);\n  public invalid = input<boolean>(false);\n  public errors = input<readonly ValidationError[]>([]);\n\n  public fieldErrorMessage = computed<string>(() => this.errors()[0]?.message ?? '');\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label = signal('');\n  public controlInvalid = signal(false);\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const el = event.target as HTMLInputElement;\n\n    const sanitizedValue = el.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n\n    el.value = sanitizedValue;\n\n    // Drive the Signal Forms field (no-op for legacy uncontrolled usage, which\n    // simply listens to `inputChange`).\n    this.value.set(sanitizedValue);\n\n    this.inputChange.emit(sanitizedValue);\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n\n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n\n    this.controlSubscription.add(\n      this.control.events\n        .pipe(filter(event => event instanceof TouchedChangeEvent))\n        .subscribe(() => {\n          this.initChange();\n        })\n    );\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid.set(control.touched && control.invalid);\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n\n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label.set('');\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid()) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label.set(options.errors[error]);\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label [attr.for]=\"inputId\">{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'error': invalid(), 'disabled': options.disabled || disabled() }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled || disabled()\" class=\"input\" autocomplete=\"off\" [id]=\"inputId\" [attr.aria-label]=\"ariaLabelValue\" [attr.aria-invalid]=\"invalid() ? 'true' : null\" [attr.aria-describedby]=\"invalid() && fieldErrorMessage() ? errorId : null\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [value]=\"value()\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        @if (invalid() && fieldErrorMessage()) {\n            <div class=\"footer error\" [id]=\"errorId\" aria-live=\"polite\">{{ fieldErrorMessage() }}</div>\n        }\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid(), 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [id]=\"inputId\" [attr.aria-label]=\"ariaLabelValue\" [attr.aria-invalid]=\"controlInvalid() ? 'true' : null\" [attr.aria-describedby]=\"controlInvalid() && label() ? errorId : null\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\" [id]=\"errorId\" aria-live=\"polite\">\n            {{ label() }}\n        </div>\n    }\n}\n\n<!-- Prefix is decorative (the field is named via label/aria-label): empty alt\n     lets apex-img mark it aria-hidden. The suffix is interactive (click emits),\n     so it carries button semantics + keyboard activation. -->\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <apex-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [alt]=\"''\"></apex-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <apex-img class=\"icon right\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"options.suffixAriaLabel ?? 'Input action'\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" (keydown.enter)=\"onSuffixImage()\" (keydown.space)=\"$event.preventDefault(); onSuffixImage()\" [alt]=\"''\"></apex-img>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-more-options.mjs

@@ -111,7 +111,7 @@ class ApexMoreOptionsComponent {
         this.scrollBlockersAttached = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexMoreOptionsComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexMoreOptionsComponent, isStandalone: true, selector: "apex-more-options", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n", styles: [":host{display:inline-block}.trigger{width:var(--apex-more-options-trigger-size, 32px);height:var(--apex-more-options-trigger-size, 32px);display:flex;justify-content:center;align-items:center;background:var(--apex-more-options-trigger-background, transparent);border:1px solid var(--apex-more-options-trigger-border-color, #E9E9E9);border-radius:var(--apex-more-options-trigger-border-radius, 8px);box-sizing:border-box;cursor:pointer}.trigger:hover,.trigger.opened{background:var(--apex-more-options-trigger-hover-background, #F7F8FB)}.trigger.vertical svg{transform:rotate(90deg)}.trigger svg path{fill:var(--apex-more-options-icon-fill, #000000)}.dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-more-options-dropdown-background, #FFFFFF);border-radius:var(--apex-more-options-dropdown-border-radius, 8px);box-shadow:var(--apex-more-options-dropdown-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35));overflow:hidden;z-index:10}.dropdown-item{height:var(--apex-more-options-item-height, 44px);display:flex;align-items:center;justify-content:flex-start;color:var(--apex-more-options-item-color, #0B1222);font-size:14px;font-weight:500;cursor:pointer;padding:0 12px}.dropdown-item:hover{background-color:var(--apex-more-options-item-hover-background, #F3F3F3)}.dropdown-item.disabled{opacity:.5;pointer-events:none}.dropdown-item span{white-space:nowrap;margin:0 12px}.item-icon{width:20px;height:20px;min-width:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img path{fill:var(--apex-more-options-item-icon-fill, #5D6068);stroke:var(--apex-more-options-item-icon-stroke, #ffffff00)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexMoreOptionsComponent, isStandalone: true, selector: "apex-more-options", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n", styles: [":host{display:inline-block}.trigger{width:var(--apex-more-options-trigger-size, 32px);height:var(--apex-more-options-trigger-size, 32px);display:flex;justify-content:center;align-items:center;background:var(--apex-more-options-trigger-background, transparent);border:1px solid var(--apex-more-options-trigger-border-color, #E9E9E9);border-radius:var(--apex-more-options-trigger-border-radius, 8px);box-sizing:border-box;cursor:pointer}.trigger:hover,.trigger.opened{background:var(--apex-more-options-trigger-hover-background, #F7F8FB)}.trigger.vertical svg{transform:rotate(90deg)}.trigger svg path{fill:var(--apex-more-options-icon-fill, #000000)}.dropdown{min-width:184px;width:fit-content;position:fixed;background-color:var(--apex-more-options-dropdown-background, #FFFFFF);border-radius:var(--apex-more-options-dropdown-border-radius, 8px);box-shadow:var(--apex-more-options-dropdown-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35));overflow:hidden;z-index:10}.dropdown-item{height:var(--apex-more-options-item-height, 44px);display:flex;align-items:center;justify-content:flex-start;color:var(--apex-more-options-item-color, #0B1222);font-size:14px;font-weight:500;cursor:pointer;padding:0 12px}.dropdown-item:hover{background-color:var(--apex-more-options-item-hover-background, #F3F3F3)}.dropdown-item.disabled{opacity:.5;pointer-events:none}.dropdown-item span{white-space:nowrap;margin:0 12px}.item-icon{width:20px;height:20px;min-width:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.item-icon apex-img path{fill:var(--apex-more-options-item-icon-fill, #5D6068);stroke:var(--apex-more-options-item-icon-stroke, #ffffff00)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt", "loading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexMoreOptionsComponent, decorators: [{
             type: Component,

package/fesm2022/apexara-ng-components-more-options.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-more-options.mjs","sources":["../../../../projects/apexara/ng-components/more-options/src/more-options.component.ts","../../../../projects/apexara/ng-components/more-options/src/more-options.component.html","../../../../projects/apexara/ng-components/more-options/apexara-ng-components-more-options.ts"],"sourcesContent":["import {\n  Component, ElementRef, HostListener,\n  input, output, signal, viewChild, Injector, afterNextRender\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexMoreOptionsItem {\n  icon?: string;\n  label: string;\n  execute?: () => void;\n  disabled?: boolean;\n}\n\n@Component({\n  selector: 'apex-more-options',\n  templateUrl: './more-options.component.html',\n  styleUrls: ['./more-options.component.css'],\n  imports: [\n    NgClass,\n    ApexImageComponent\n  ],\n})\n\nexport class ApexMoreOptionsComponent {\n\n  constructor(\n    private elementRef: ElementRef,\n    private injector: Injector) { }\n\n  public items = input<ApexMoreOptionsItem[]>([]);\n  public vertical = input(false);\n\n  public itemClick = output<ApexMoreOptionsItem>();\n\n  public dropdownRef = viewChild<ElementRef>('dropdown');\n\n  public isOpen = signal(false);\n\n  private scrollBlockersAttached = false;\n  private wheelListener = (event: WheelEvent | TouchEvent) => this.blockScroll(event);\n\n\n  public ngOnDestroy(): void {\n    this.detachScrollBlockers();\n  }\n\n  public toggle(event: MouseEvent): void {\n    this.isOpen.update(v => !v);\n\n    if (this.isOpen()) {\n      afterNextRender(() => {\n        this.positionDropdown();\n        this.attachScrollBlockers();\n      }, { injector: this.injector });\n    } else {\n      this.detachScrollBlockers();\n    }\n  }\n\n  public onItemClick(item: ApexMoreOptionsItem, event: MouseEvent): void {\n    if (item.disabled) {\n      return;\n    }\n\n    if (item.execute) {\n      item.execute();\n    }\n\n    this.itemClick.emit(item);\n    this.isOpen.set(false);\n    this.detachScrollBlockers();\n  }\n\n  @HostListener('document:click', ['$event'])\n  public onDocumentClick(event: Event): void {\n    const clickedInside = this.elementRef.nativeElement.contains(event.target);\n    const dropdownEl = this.dropdownRef()?.nativeElement;\n    const clickedDropdown = dropdownEl?.contains(event.target);\n\n    if (!clickedInside && !clickedDropdown && this.isOpen()) {\n      this.isOpen.set(false);\n      this.detachScrollBlockers();\n    }\n  }\n\n  private positionDropdown(): void {\n    const dropdown = this.dropdownRef();\n\n    if (!dropdown) {\n      return;\n    }\n\n    const trigger = this.elementRef.nativeElement.querySelector('.trigger');\n    const rect = trigger.getBoundingClientRect();\n    const dropdownEl = dropdown.nativeElement;\n\n    // Position below trigger initially\n    dropdownEl.style.top = `${rect.bottom + 4}px`;\n    dropdownEl.style.bottom = 'unset';\n\n    // Check if dropdown overflows viewport bottom — if so, open upward\n    if (dropdownEl.getBoundingClientRect().bottom > window.innerHeight) {\n      dropdownEl.style.top = 'unset';\n      dropdownEl.style.bottom = `${window.innerHeight - rect.top + 4}px`;\n    }\n\n    // Horizontal positioning\n    const dropdownWidth = dropdownEl.offsetWidth;\n    const left = rect.left + rect.width / 2;\n\n    if (left + dropdownWidth / 2 > window.innerWidth - 10) {\n      dropdownEl.style.left = `${window.innerWidth - 10 - dropdownWidth}px`;\n      dropdownEl.style.transform = '';\n    } else {\n      dropdownEl.style.left = `${left}px`;\n      dropdownEl.style.transform = 'translateX(-50%)';\n    }\n  }\n\n  private blockScroll(event: WheelEvent | TouchEvent): void {\n    const dropdown = this.dropdownRef();\n    if (!dropdown) {\n      return;\n    }\n\n    const dropdownEl = dropdown.nativeElement;\n    const isInsideDropdown = dropdownEl.contains(event.target as HTMLElement);\n\n    if (isInsideDropdown) {\n      const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;\n      if (!canScroll) {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    event.preventDefault();\n  }\n\n  private attachScrollBlockers(): void {\n    if (this.scrollBlockersAttached) {\n      return;\n    }\n\n    window.addEventListener('wheel', this.wheelListener, { passive: false });\n    window.addEventListener('touchmove', this.wheelListener, { passive: false });\n\n    this.scrollBlockersAttached = true;\n  }\n\n  private detachScrollBlockers(): void {\n    if (!this.scrollBlockersAttached) {\n      return;\n    }\n\n    window.removeEventListener('wheel', this.wheelListener as EventListener);\n    window.removeEventListener('touchmove', this.wheelListener as EventListener);\n\n    this.scrollBlockersAttached = false;\n  }\n\n}\n","<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-more-options.mjs","sources":["../../../../projects/apexara/ng-components/more-options/src/more-options.component.ts","../../../../projects/apexara/ng-components/more-options/src/more-options.component.html","../../../../projects/apexara/ng-components/more-options/apexara-ng-components-more-options.ts"],"sourcesContent":["import {\n  Component, ElementRef, HostListener,\n  input, output, signal, viewChild, Injector, afterNextRender\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexMoreOptionsItem {\n  icon?: string;\n  label: string;\n  execute?: () => void;\n  disabled?: boolean;\n}\n\n@Component({\n  selector: 'apex-more-options',\n  templateUrl: './more-options.component.html',\n  styleUrls: ['./more-options.component.css'],\n  imports: [\n    NgClass,\n    ApexImageComponent\n  ],\n})\n\nexport class ApexMoreOptionsComponent {\n\n  constructor(\n    private elementRef: ElementRef,\n    private injector: Injector) { }\n\n  public items = input<ApexMoreOptionsItem[]>([]);\n  public vertical = input(false);\n\n  public itemClick = output<ApexMoreOptionsItem>();\n\n  public dropdownRef = viewChild<ElementRef>('dropdown');\n\n  public isOpen = signal(false);\n\n  private scrollBlockersAttached = false;\n  private wheelListener = (event: WheelEvent | TouchEvent) => this.blockScroll(event);\n\n\n  public ngOnDestroy(): void {\n    this.detachScrollBlockers();\n  }\n\n  public toggle(event: MouseEvent): void {\n    this.isOpen.update(v => !v);\n\n    if (this.isOpen()) {\n      afterNextRender(() => {\n        this.positionDropdown();\n        this.attachScrollBlockers();\n      }, { injector: this.injector });\n    } else {\n      this.detachScrollBlockers();\n    }\n  }\n\n  public onItemClick(item: ApexMoreOptionsItem, event: MouseEvent): void {\n    if (item.disabled) {\n      return;\n    }\n\n    if (item.execute) {\n      item.execute();\n    }\n\n    this.itemClick.emit(item);\n    this.isOpen.set(false);\n    this.detachScrollBlockers();\n  }\n\n  @HostListener('document:click', ['$event'])\n  public onDocumentClick(event: Event): void {\n    const clickedInside = this.elementRef.nativeElement.contains(event.target);\n    const dropdownEl = this.dropdownRef()?.nativeElement;\n    const clickedDropdown = dropdownEl?.contains(event.target);\n\n    if (!clickedInside && !clickedDropdown && this.isOpen()) {\n      this.isOpen.set(false);\n      this.detachScrollBlockers();\n    }\n  }\n\n  private positionDropdown(): void {\n    const dropdown = this.dropdownRef();\n\n    if (!dropdown) {\n      return;\n    }\n\n    const trigger = this.elementRef.nativeElement.querySelector('.trigger');\n    const rect = trigger.getBoundingClientRect();\n    const dropdownEl = dropdown.nativeElement;\n\n    // Position below trigger initially\n    dropdownEl.style.top = `${rect.bottom + 4}px`;\n    dropdownEl.style.bottom = 'unset';\n\n    // Check if dropdown overflows viewport bottom — if so, open upward\n    if (dropdownEl.getBoundingClientRect().bottom > window.innerHeight) {\n      dropdownEl.style.top = 'unset';\n      dropdownEl.style.bottom = `${window.innerHeight - rect.top + 4}px`;\n    }\n\n    // Horizontal positioning\n    const dropdownWidth = dropdownEl.offsetWidth;\n    const left = rect.left + rect.width / 2;\n\n    if (left + dropdownWidth / 2 > window.innerWidth - 10) {\n      dropdownEl.style.left = `${window.innerWidth - 10 - dropdownWidth}px`;\n      dropdownEl.style.transform = '';\n    } else {\n      dropdownEl.style.left = `${left}px`;\n      dropdownEl.style.transform = 'translateX(-50%)';\n    }\n  }\n\n  private blockScroll(event: WheelEvent | TouchEvent): void {\n    const dropdown = this.dropdownRef();\n    if (!dropdown) {\n      return;\n    }\n\n    const dropdownEl = dropdown.nativeElement;\n    const isInsideDropdown = dropdownEl.contains(event.target as HTMLElement);\n\n    if (isInsideDropdown) {\n      const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;\n      if (!canScroll) {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    event.preventDefault();\n  }\n\n  private attachScrollBlockers(): void {\n    if (this.scrollBlockersAttached) {\n      return;\n    }\n\n    window.addEventListener('wheel', this.wheelListener, { passive: false });\n    window.addEventListener('touchmove', this.wheelListener, { passive: false });\n\n    this.scrollBlockersAttached = true;\n  }\n\n  private detachScrollBlockers(): void {\n    if (!this.scrollBlockersAttached) {\n      return;\n    }\n\n    window.removeEventListener('wheel', this.wheelListener as EventListener);\n    window.removeEventListener('touchmove', this.wheelListener as EventListener);\n\n    this.scrollBlockersAttached = false;\n  }\n\n}\n","<div class=\"trigger\" [ngClass]=\"{ opened: isOpen(), vertical: vertical() }\" (click)=\"toggle($event)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.75 8C4.75 8.14834 4.70601 8.29334 4.6236 8.41668C4.54119 8.54001 4.42406 8.63614 4.28701 8.69291C4.14997 8.74967 3.99917 8.76453 3.85368 8.73559C3.7082 8.70665 3.57456 8.63522 3.46967 8.53033C3.36478 8.42544 3.29335 8.2918 3.26441 8.14632C3.23547 8.00083 3.25032 7.85003 3.30709 7.71299C3.36386 7.57594 3.45999 7.45881 3.58332 7.3764C3.70666 7.29399 3.85166 7.25 4 7.25C4.19884 7.25023 4.38948 7.32932 4.53008 7.46992C4.67068 7.61052 4.74977 7.80116 4.75 8ZM12 7.25C11.8517 7.25 11.7067 7.29399 11.5833 7.3764C11.46 7.45881 11.3639 7.57594 11.3071 7.71299C11.2503 7.85003 11.2355 8.00083 11.2644 8.14632C11.2933 8.2918 11.3648 8.42544 11.4697 8.53033C11.5746 8.63522 11.7082 8.70665 11.8537 8.73559C11.9992 8.76453 12.15 8.74967 12.287 8.69291C12.4241 8.63614 12.5412 8.54001 12.6236 8.41668C12.706 8.29334 12.75 8.14834 12.75 8C12.7498 7.80116 12.6707 7.61052 12.5301 7.46992C12.3895 7.32932 12.1988 7.25023 12 7.25ZM8 7.25C7.85166 7.25 7.70666 7.29399 7.58332 7.3764C7.45999 7.45881 7.36386 7.57594 7.30709 7.71299C7.25033 7.85003 7.23547 8.00083 7.26441 8.14632C7.29335 8.2918 7.36478 8.42544 7.46967 8.53033C7.57456 8.63522 7.7082 8.70665 7.85368 8.73559C7.99917 8.76453 8.14997 8.74967 8.28701 8.69291C8.42406 8.63614 8.54119 8.54001 8.6236 8.41668C8.70601 8.29334 8.75 8.14834 8.75 8C8.74977 7.80116 8.67068 7.61052 8.53008 7.46992C8.38948 7.32932 8.19884 7.25023 8 7.25Z\"/>\n    </svg>\n</div>\n\n@if (isOpen()) {\n    <div class=\"dropdown\" #dropdown>\n        @if (items().length > 0) {\n            @for (item of items(); track $index) {\n                <div class=\"dropdown-item\"\n                     [ngClass]=\"{ disabled: item.disabled }\"\n                     (click)=\"onItemClick(item, $event)\">\n                    @if (item.icon) {\n                        <div class=\"item-icon\">\n                            <apex-img [src]=\"'assets/img/' + item.icon\" [alt]=\"'Action icon.'\"></apex-img>\n                        </div>\n                    }\n                    <span>{{ item.label }}</span>\n                </div>\n            }\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}