ngx-kit 6.0.0 → 6.0.2

package/fesm2022/ngx-kit-form-field.mjs

@@ -1,87 +1,152 @@
 import * as i0 from '@angular/core';
-import { model, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, signal, inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, HostListener, Directive } from '@angular/core';
 
-// form-field.component.ts
-let nextId = 0;
-class NgxFormField {
-    // ─────────────────────────────────────────────────────────
-    // Two-way binding
-    // ─────────────────────────────────────────────────────────
-    value = model('', /* @ts-ignore */
+const MX_FORM_FIELD = new InjectionToken('mx-form-field', {
+    factory: () => new MgxFormFieldRef(),
+});
+class MgxFormFieldRef {
+    value = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    // ─────────────────────────────────────────────────────────
-    // Required inputs
-    // ─────────────────────────────────────────────────────────
+}
+
+class NgxFormField {
+    ref = inject(MX_FORM_FIELD);
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    // ─────────────────────────────────────────────────────────
-    // Optional inputs (Signal inputs)
-    // ─────────────────────────────────────────────────────────
-    type = input('text', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    placeholder = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Forces the label to float even when the control is empty.
+     * Similar to Material's floatLabel behavior.
+     */
+    float = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "float" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit state overrides are useful when the projected control
+     * is managed by Angular Forms.
+     */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    float = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "float" }] : /* istanbul ignore next */ []));
-    name = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    autocomplete = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    rows = input(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    hint = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    errorMessages = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
-    dir = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
-    id = input(`mx-field-${++nextId}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    // ─────────────────────────────────────────────────────────
-    // Outputs
-    // ─────────────────────────────────────────────────────────
-    focused = output();
-    blurred = output();
-    // ─────────────────────────────────────────────────────────
-    // Derived state (Computed signal)
-    // ─────────────────────────────────────────────────────────
-    hasValue = computed(() => {
-        const v = this.value();
-        return v !== null && v !== undefined && v !== '';
-    }, /* @ts-ignore */
+    hintVisible = computed(() => !this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintVisible" }] : /* istanbul ignore next */ []));
+    errorVisible = computed(() => this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorVisible" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxFormField, isStandalone: true, selector: "ngx-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"mx-form-field\"\r\n  [class.mx-form-field--float]=\"float()\"\r\n  [class.mx-form-field--disabled]=\"disabled()\"\r\n  [class.mx-form-field--readonly]=\"readonly()\"\r\n  [class.mx-form-field--invalid]=\"invalid()\"\r\n  [class.mx-form-field--required]=\"required()\">\r\n  <div class=\"mx-form-field__before\">\r\n    <div class=\"mx-form-field__prefix\">\r\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\r\n\r\n  <span class=\"mx-form-field__label\">\r\n    <span [aria-label]=\"label()\">{{ label() }}</span>\r\n  </span>\r\n\r\n  <div class=\"mx-form-field__after\">\r\n    <div class=\"mx-form-field__suffix\">\r\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (hintVisible()) {\r\n  <div class=\"mx-form-field__hint\">\r\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\r\n  </div>\r\n}\r\n\r\n@if (errorVisible()) {\r\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\r\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\r\n  </div>\r\n}\r\n", styles: ["ngx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-side-width: 40px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555);--mx-field-label-color: light-dark(#555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888, #999);--mx-field-hint-color: light-dark(#007bd4, #03a9f4);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{position:relative;display:flex;align-items:stretch;width:100%;min-width:220px;height:var(--mx-field-height);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{flex:1 1 auto;border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease,color .15s ease}.mx-form-field__before{display:flex;flex:0 0 var(--mx-field-side-width);min-width:0;border-inline-end:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field__after{display:flex;justify-content:flex-end;min-width:var(--mx-field-side-width);border-inline-start:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field__prefix,.mx-form-field__suffix{display:flex;align-items:center;justify-content:center;min-width:0;height:100%;pointer-events:auto}.mx-form-field__prefix button,.mx-form-field__suffix button{background:none;border:none}.mx-form-field__prefix{padding-inline-start:8px}.mx-form-field__suffix{padding-inline-end:8px}.mx-form-field__prefix:empty,.mx-form-field__suffix:empty{display:none}.mx-form-field__prefix ::ng-deep>*,.mx-form-field__suffix ::ng-deep>*{max-width:100%}.mx-form-field__label{position:relative;display:flex;flex:0 0 auto;align-items:center;min-width:0;max-width:70%;border-inline:0;color:var(--mx-field-label-color);white-space:nowrap;overflow:visible}.mx-form-field__label span{display:block;opacity:.72;transform-origin:center;transform:translateY(0) scale(1);transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-width:0;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;line-height:1.4;text-align:start;caret-color:var(--mx-field-active-color)}.mx-form-field>textarea{min-height:100%;resize:vertical}.mx-form-field>select{cursor:pointer;appearance:none;-webkit-appearance:none}.mx-form-field>input:disabled,.mx-form-field>textarea:disabled,.mx-form-field>select:disabled{cursor:not-allowed}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.75}.mx-form-field:has(>input.has-value) .mx-form-field__label span,.mx-form-field:has(>textarea.has-value) .mx-form-field__label span,.mx-form-field:has(>select.has-value) .mx-form-field__label span,.mx-form-field.mx-form-field--float .mx-form-field__label span,.mx-form-field:focus-within .mx-form-field__label span{transform:translateY(-100%) scale(.86);opacity:1}.mx-form-field:has(>input.has-value) .mx-form-field__label,.mx-form-field:has(>textarea.has-value) .mx-form-field__label,.mx-form-field:has(>select.has-value) .mx-form-field__label,.mx-form-field.mx-form-field--float .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__label{border-top-width:0}.mx-form-field:has(>input.has-value) .mx-form-field__label:before,.mx-form-field:has(>input.has-value) .mx-form-field__label:after,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:before,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:after,.mx-form-field:has(>select.has-value) .mx-form-field__label:before,.mx-form-field:has(>select.has-value) .mx-form-field__label:after,.mx-form-field.mx-form-field--float .mx-form-field__label:before,.mx-form-field.mx-form-field--float .mx-form-field__label:after,.mx-form-field:focus-within .mx-form-field__label:before,.mx-form-field:focus-within .mx-form-field__label:after{width:0}.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__before,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__label,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:var(--mx-field-active-color)}.mx-form-field:focus-within .mx-form-field__label span{color:var(--mx-field-active-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__before,.mx-form-field.mx-form-field--invalid .mx-form-field__label,.mx-form-field.mx-form-field--invalid .mx-form-field__after,.mx-form-field:has(>input.ng-invalid) .mx-form-field__before,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label,.mx-form-field:has(>input.ng-invalid) .mx-form-field__after,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__before,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__after,.mx-form-field:has(>select.ng-invalid) .mx-form-field__before,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label,.mx-form-field:has(>select.ng-invalid) .mx-form-field__after{border-color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__label span,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label span{color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid:focus-within:after,.mx-form-field:has(>input.ng-invalid:focus):after,.mx-form-field:has(>textarea.ng-invalid:focus):after,.mx-form-field:has(>select.ng-invalid:focus):after{border-color:color-mix(in srgb,var(--mx-field-invalid-color) 20%,transparent)}.mx-form-field>input:user-invalid,.mx-form-field>textarea:user-invalid,.mx-form-field>select:user-invalid{color:var(--mx-field-text-color)}.mx-form-field.mx-form-field--disabled{opacity:.62;cursor:not-allowed}.mx-form-field.mx-form-field--disabled .mx-form-field__before,.mx-form-field.mx-form-field--disabled .mx-form-field__label,.mx-form-field.mx-form-field--disabled .mx-form-field__after{border-color:var(--mx-field-disabled-color)}.mx-form-field.mx-form-field--readonly .mx-form-field__label{color:var(--mx-field-label-color)}.mx-form-field.mx-form-field--readonly>input,.mx-form-field.mx-form-field--readonly>textarea{cursor:default}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field__hint,.mx-form-field__error-list{display:block;margin-top:5px;padding-inline:2px;font-size:.8rem;line-height:1.4}.mx-form-field__hint{color:var(--mx-field-hint-color)}.mx-form-field__error-list{color:var(--mx-field-invalid-color)}[dir=rtl] .mx-form-field__before{border-inline-start:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-end:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}[dir=rtl] .mx-form-field__after{border-inline-end:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-start:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}[dir=rtl] .mx-form-field__label span{transform-origin:center}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:Highlight}.mx-form-field__label span{color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n  class=\"mx-form-field\"\r\n  [class.mx-form-field--float]=\"float()\"\r\n  [class.mx-form-field--disabled]=\"disabled()\"\r\n  [class.mx-form-field--readonly]=\"readonly()\"\r\n  [class.mx-form-field--invalid]=\"invalid()\"\r\n  [class.mx-form-field--required]=\"required()\">\r\n  <div class=\"mx-form-field__before\">\r\n    <div class=\"mx-form-field__prefix\">\r\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\r\n\r\n  <span class=\"mx-form-field__label\">\r\n    <span [aria-label]=\"label()\">{{ label() }}</span>\r\n  </span>\r\n\r\n  <div class=\"mx-form-field__after\">\r\n    <div class=\"mx-form-field__suffix\">\r\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (hintVisible()) {\r\n  <div class=\"mx-form-field__hint\">\r\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\r\n  </div>\r\n}\r\n\r\n@if (errorVisible()) {\r\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\r\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\r\n  </div>\r\n}\r\n", styles: ["ngx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-side-width: 40px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555);--mx-field-label-color: light-dark(#555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888, #999);--mx-field-hint-color: light-dark(#007bd4, #03a9f4);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{position:relative;display:flex;align-items:stretch;width:100%;min-width:220px;height:var(--mx-field-height);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{flex:1 1 auto;border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease,color .15s ease}.mx-form-field__before{display:flex;flex:0 0 var(--mx-field-side-width);min-width:0;border-inline-end:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field__after{display:flex;justify-content:flex-end;min-width:var(--mx-field-side-width);border-inline-start:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field__prefix,.mx-form-field__suffix{display:flex;align-items:center;justify-content:center;min-width:0;height:100%;pointer-events:auto}.mx-form-field__prefix button,.mx-form-field__suffix button{background:none;border:none}.mx-form-field__prefix{padding-inline-start:8px}.mx-form-field__suffix{padding-inline-end:8px}.mx-form-field__prefix:empty,.mx-form-field__suffix:empty{display:none}.mx-form-field__prefix ::ng-deep>*,.mx-form-field__suffix ::ng-deep>*{max-width:100%}.mx-form-field__label{position:relative;display:flex;flex:0 0 auto;align-items:center;min-width:0;max-width:70%;border-inline:0;color:var(--mx-field-label-color);white-space:nowrap;overflow:visible}.mx-form-field__label span{display:block;opacity:.72;transform-origin:center;transform:translateY(0) scale(1);transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-width:0;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;line-height:1.4;text-align:start;caret-color:var(--mx-field-active-color)}.mx-form-field>textarea{min-height:100%;resize:vertical}.mx-form-field>select{cursor:pointer;appearance:none;-webkit-appearance:none}.mx-form-field>input:disabled,.mx-form-field>textarea:disabled,.mx-form-field>select:disabled{cursor:not-allowed}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.75}.mx-form-field:has(>input.has-value) .mx-form-field__label span,.mx-form-field:has(>textarea.has-value) .mx-form-field__label span,.mx-form-field:has(>select.has-value) .mx-form-field__label span,.mx-form-field.mx-form-field--float .mx-form-field__label span,.mx-form-field:focus-within .mx-form-field__label span{transform:translateY(-100%) scale(.86);opacity:1}.mx-form-field:has(>input.has-value) .mx-form-field__label,.mx-form-field:has(>textarea.has-value) .mx-form-field__label,.mx-form-field:has(>select.has-value) .mx-form-field__label,.mx-form-field.mx-form-field--float .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__label{border-top-width:0}.mx-form-field:has(>input.has-value) .mx-form-field__label:before,.mx-form-field:has(>input.has-value) .mx-form-field__label:after,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:before,.mx-form-field:has(>textarea.has-value) .mx-form-field__label:after,.mx-form-field:has(>select.has-value) .mx-form-field__label:before,.mx-form-field:has(>select.has-value) .mx-form-field__label:after,.mx-form-field.mx-form-field--float .mx-form-field__label:before,.mx-form-field.mx-form-field--float .mx-form-field__label:after,.mx-form-field:focus-within .mx-form-field__label:before,.mx-form-field:focus-within .mx-form-field__label:after{width:0}.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__before,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__label,.mx-form-field:hover:not(:has(>input:disabled)):not(:has(>textarea:disabled)):not(:has(>select:disabled)) .mx-form-field__after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:var(--mx-field-active-color)}.mx-form-field:focus-within .mx-form-field__label span{color:var(--mx-field-active-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__before,.mx-form-field.mx-form-field--invalid .mx-form-field__label,.mx-form-field.mx-form-field--invalid .mx-form-field__after,.mx-form-field:has(>input.ng-invalid) .mx-form-field__before,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label,.mx-form-field:has(>input.ng-invalid) .mx-form-field__after,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__before,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__after,.mx-form-field:has(>select.ng-invalid) .mx-form-field__before,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label,.mx-form-field:has(>select.ng-invalid) .mx-form-field__after{border-color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid .mx-form-field__label span,.mx-form-field:has(>input.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>textarea.ng-invalid) .mx-form-field__label span,.mx-form-field:has(>select.ng-invalid) .mx-form-field__label span{color:var(--mx-field-invalid-color)}.mx-form-field.mx-form-field--invalid:focus-within:after,.mx-form-field:has(>input.ng-invalid:focus):after,.mx-form-field:has(>textarea.ng-invalid:focus):after,.mx-form-field:has(>select.ng-invalid:focus):after{border-color:color-mix(in srgb,var(--mx-field-invalid-color) 20%,transparent)}.mx-form-field>input:user-invalid,.mx-form-field>textarea:user-invalid,.mx-form-field>select:user-invalid{color:var(--mx-field-text-color)}.mx-form-field.mx-form-field--disabled{opacity:.62;cursor:not-allowed}.mx-form-field.mx-form-field--disabled .mx-form-field__before,.mx-form-field.mx-form-field--disabled .mx-form-field__label,.mx-form-field.mx-form-field--disabled .mx-form-field__after{border-color:var(--mx-field-disabled-color)}.mx-form-field.mx-form-field--readonly .mx-form-field__label{color:var(--mx-field-label-color)}.mx-form-field.mx-form-field--readonly>input,.mx-form-field.mx-form-field--readonly>textarea{cursor:default}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field__hint,.mx-form-field__error-list{display:block;margin-top:5px;padding-inline:2px;font-size:.8rem;line-height:1.4}.mx-form-field__hint{color:var(--mx-field-hint-color)}.mx-form-field__error-list{color:var(--mx-field-invalid-color)}[dir=rtl] .mx-form-field__before{border-inline-start:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-end:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}[dir=rtl] .mx-form-field__after{border-inline-end:var(--mx-field-border-width) solid var(--mx-field-border-color);border-inline-start:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}[dir=rtl] .mx-form-field__label span{transform-origin:center}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field__before,.mx-form-field__label,.mx-form-field__after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field__before,.mx-form-field:focus-within .mx-form-field__label,.mx-form-field:focus-within .mx-form-field__after{border-color:Highlight}.mx-form-field__label span{color:CanvasText}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+
+class NgxInput {
+    el = inject(ElementRef);
+    ref = inject(MX_FORM_FIELD);
+    hasValue = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
-    // ─────────────────────────────────────────────────────────
-    // Event handlers
-    // ─────────────────────────────────────────────────────────
-    onInput(event) {
-        const target = event.target;
-        this.value.set(target.value);
+    ngAfterViewInit() {
+        // Covers initial values coming from [value], Reactive Forms,
+        // template-driven forms, browser autofill, etc.
+        queueMicrotask(() => this.syncValue());
     }
-    onFocus() {
-        this.focused.emit();
+    onInput() {
+        this.syncValue();
+    }
+    onChange() {
+        this.syncValue();
     }
     onBlur() {
-        this.blurred.emit();
+        this.syncValue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxFormField, isStandalone: true, selector: "ngx-form-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, host: { properties: { "attr.dir": "dir() || null" } }, ngImport: i0, template: "<!-- form-field.component.html -->\n<div class=\"mx-form-field\" [class.float]=\"float()\">\n  @if (type() === 'textarea') {\n    <textarea\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-label]=\"label()\"\n      [class.has-value]=\"hasValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"></textarea>\n  } @else {\n    <input\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-label]=\"label()\"\n      [class.has-value]=\"hasValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\" />\n  }\n\n  <div class=\"mx-form-field_before\"></div>\n  <label class=\"mx-form-field_label\" [attr.for]=\"id()\">\n    <span>{{ label() }}</span>\n  </label>\n  <div class=\"mx-form-field_after\"></div>\n</div>\n\n@if (hint()) {\n  <div class=\"mx-form-field_hint\">{{ hint() }}</div>\n}\n\n@if (errorMessages().length > 0) {\n  <div class=\"mx-form-field_error-list\" role=\"alert\">\n    @for (msg of errorMessages(); track msg) {\n      <div>{{ msg }}</div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-margin: 5px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555555);--mx-field-label-color: light-dark(#555555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888888, #999999);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));--mx-field-error-ring: light-dark(rgb(214 0 0 / 10%), rgb(255 77 90 / 15%));position:relative;display:inline-flex;align-items:stretch;width:220px;max-width:100%;height:var(--mx-field-height);margin-top:var(--mx-field-margin);margin-bottom:var(--mx-field-margin);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field_before,.mx-form-field_label,.mx-form-field_after{border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease}.mx-form-field_before{flex:0 0 14px;border-right:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field_label{flex:0 0 auto;min-width:0;border-left:0;border-right:0;color:var(--mx-field-label-color);white-space:nowrap}.mx-form-field_label span{display:block;padding:calc((var(--mx-field-height) - 1em) / 2) 6px;color:inherit;font-size:14px;font-weight:400;line-height:1;opacity:.72;transform-origin:left center;transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field_after{flex:1 1 auto;min-width:14px;border-left:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;min-width:0;width:100%;height:100%;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;text-align:start;caret-color:var(--mx-field-active-color);z-index:2}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.8}.mx-form-field>input:focus~.mx-form-field_label span,.mx-form-field>input.has-value~.mx-form-field_label span,.mx-form-field>textarea:focus~.mx-form-field_label span,.mx-form-field>textarea.has-value~.mx-form-field_label span,.mx-form-field.float .mx-form-field_label span{transform:translateY(-50%) scale(.86);opacity:1}.mx-form-field>input:focus~.mx-form-field_label,.mx-form-field>input.has-value~.mx-form-field_label,.mx-form-field>textarea:focus~.mx-form-field_label,.mx-form-field>textarea.has-value~.mx-form-field_label,.mx-form-field.float .mx-form-field_label{border-top-width:0}.mx-form-field:hover:not(:has(input:disabled)):not(:has(textarea:disabled)):not(:has(select:disabled)) .mx-form-field_before,.mx-form-field:hover:not(:has(input:disabled)):not(:has(textarea:disabled)):not(:has(select:disabled)) .mx-form-field_label,.mx-form-field:hover:not(:has(input:disabled)):not(:has(textarea:disabled)):not(:has(select:disabled)) .mx-form-field_after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field_before,.mx-form-field:focus-within .mx-form-field_label,.mx-form-field:focus-within .mx-form-field_after{border-color:var(--mx-field-active-color)!important}.mx-form-field:focus-within .mx-form-field_label span{color:var(--mx-field-active-color)}.mx-form-field>input:invalid~.mx-form-field_before,.mx-form-field>input:invalid~.mx-form-field_label,.mx-form-field>input:invalid~.mx-form-field_after,.mx-form-field>textarea:invalid~.mx-form-field_before,.mx-form-field>textarea:invalid~.mx-form-field_label,.mx-form-field>textarea:invalid~.mx-form-field_after{border-color:var(--mx-field-invalid-color)}.mx-form-field:has(input:invalid:focus):after,.mx-form-field:has(textarea:invalid:focus):after{border-color:var(--mx-field-error-ring)}.mx-form-field:has(input:invalid:focus) .mx-form-field_label span,.mx-form-field:has(textarea:invalid:focus) .mx-form-field_label span{color:var(--mx-field-invalid-color)}.mx-form-field:has(input:disabled),.mx-form-field:has(textarea:disabled),.mx-form-field:has(select:disabled){opacity:.62;cursor:not-allowed}.mx-form-field:has(input:disabled) .mx-form-field_before,.mx-form-field:has(input:disabled) .mx-form-field_label,.mx-form-field:has(input:disabled) .mx-form-field_after,.mx-form-field:has(textarea:disabled) .mx-form-field_before,.mx-form-field:has(textarea:disabled) .mx-form-field_label,.mx-form-field:has(textarea:disabled) .mx-form-field_after,.mx-form-field:has(select:disabled) .mx-form-field_before,.mx-form-field:has(select:disabled) .mx-form-field_label,.mx-form-field:has(select:disabled) .mx-form-field_after{border-color:var(--mx-field-disabled-color)}.mx-form-field:has(input:read-only:not(:disabled)){--mx-field-border-color: light-dark(#9a9a9a, #686868)}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field_hint{font-size:.8rem;color:var(--mx-field-hint-color, light-dark(#3598fb, #0366d0))}.mx-form-field_error-list{font-size:.8rem;color:var(--mx-field-error-list-color, light-dark(#d60000, #ff4d5a))}:host([dir=rtl]) .mx-form-field_before{flex:0 0 14px;border-right:var(--mx-field-border-width) solid var(--mx-field-border-color);border-left:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}:host([dir=rtl]) .mx-form-field_after{border-left:var(--mx-field-border-width) solid var(--mx-field-border-color);border-right:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}:host([dir=rtl]) .mx-form-field_label span{transform-origin:right center}:host([dir=rtl]) .mx-form-field>input:focus~:host([dir=rtl]) .mx-form-field_label span,:host([dir=rtl]) .mx-form-field>input.has-value~:host([dir=rtl]) .mx-form-field_label span,:host([dir=rtl]) .mx-form-field>textarea:focus~:host([dir=rtl]) .mx-form-field_label span{transform:translateY(-50%) scale(.86)}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field_before,.mx-form-field_label,.mx-form-field_after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field_before,.mx-form-field:focus-within .mx-form-field_label,.mx-form-field:focus-within .mx-form-field_after{border-color:Highlight}.mx-form-field_label span{color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    syncValue() {
+        const value = this.el.nativeElement.value;
+        this.ref.value.set(value);
+        this.hasValue.set(value !== null &&
+            value !== undefined &&
+            value !== '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxInput, isStandalone: true, selector: "[ngxInput],ngx-input", host: { listeners: { "input": "onInput()", "change": "onChange()", "blur": "onBlur()" }, properties: { "class.has-value": "hasValue()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormField, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.dir]': 'dir() || null',
-                    }, template: "<!-- form-field.component.html -->\n<div class=\"mx-form-field\" [class.float]=\"float()\">\n  @if (type() === 'textarea') {\n    <textarea\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-label]=\"label()\"\n      [class.has-value]=\"hasValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"></textarea>\n  } @else {\n    <input\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-label]=\"label()\"\n      [class.has-value]=\"hasValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\" />\n  }\n\n  <div class=\"mx-form-field_before\"></div>\n  <label class=\"mx-form-field_label\" [attr.for]=\"id()\">\n    <span>{{ label() }}</span>\n  </label>\n  <div class=\"mx-form-field_after\"></div>\n</div>\n\n@if (hint()) {\n  <div class=\"mx-form-field_hint\">{{ hint() }}</div>\n}\n\n@if (errorMessages().length > 0) {\n  <div class=\"mx-form-field_error-list\" role=\"alert\">\n    @for (msg of errorMessages(); track msg) {\n      <div>{{ msg }}</div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;max-width:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.mx-form-field{--mx-field-height: 44px;--mx-field-radius: 6px;--mx-field-border-width: 1px;--mx-field-margin: 5px;--mx-field-border-color: light-dark(#737373, #8f8f8f);--mx-field-hover-color: light-dark(#3f3f3f, #d0d0d0);--mx-field-active-color: light-dark(#007ffe, #4da3ff);--mx-field-invalid-color: light-dark(#d60000, #ff4d5a);--mx-field-disabled-color: light-dark(#bdbdbd, #555555);--mx-field-label-color: light-dark(#555555, #c7c7c7);--mx-field-text-color: light-dark(#1a1a1a, #f5f5f5);--mx-field-placeholder-color: light-dark(#888888, #999999);--mx-field-focus-ring: light-dark(rgb(0 127 254 / 12%), rgb(77 163 255 / 18%));--mx-field-error-ring: light-dark(rgb(214 0 0 / 10%), rgb(255 77 90 / 15%));position:relative;display:inline-flex;align-items:stretch;width:220px;max-width:100%;height:var(--mx-field-height);margin-top:var(--mx-field-margin);margin-bottom:var(--mx-field-margin);color:var(--mx-field-text-color);isolation:isolate}.mx-form-field_before,.mx-form-field_label,.mx-form-field_after{border:var(--mx-field-border-width) solid var(--mx-field-border-color);pointer-events:none;transition:border-color .15s ease}.mx-form-field_before{flex:0 0 14px;border-right:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}.mx-form-field_label{flex:0 0 auto;min-width:0;border-left:0;border-right:0;color:var(--mx-field-label-color);white-space:nowrap}.mx-form-field_label span{display:block;padding:calc((var(--mx-field-height) - 1em) / 2) 6px;color:inherit;font-size:14px;font-weight:400;line-height:1;opacity:.72;transform-origin:left center;transition:transform .15s cubic-bezier(.2,0,0,1),opacity .15s ease,color .15s ease}.mx-form-field_after{flex:1 1 auto;min-width:14px;border-left:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}.mx-form-field>input,.mx-form-field>textarea,.mx-form-field>select{position:absolute;inset:0;min-width:0;width:100%;height:100%;margin:0;padding:0 16px;border:0;outline:0;background:transparent;color:var(--mx-field-text-color);font:inherit;font-size:14px;text-align:start;caret-color:var(--mx-field-active-color);z-index:2}.mx-form-field>input::placeholder,.mx-form-field>textarea::placeholder{color:var(--mx-field-placeholder-color);opacity:0;transition:opacity .12s ease}.mx-form-field>input:focus::placeholder,.mx-form-field>textarea:focus::placeholder{opacity:.8}.mx-form-field>input:focus~.mx-form-field_label span,.mx-form-field>input.has-value~.mx-form-field_label span,.mx-form-field>textarea:focus~.mx-form-field_label span,.mx-form-field>textarea.has-value~.mx-form-field_label span,.mx-form-field.float .mx-form-field_label span{transform:translateY(-50%) scale(.86);opacity:1}.mx-form-field>input:focus~.mx-form-field_label,.mx-form-field>input.has-value~.mx-form-field_label,.mx-form-field>textarea:focus~.mx-form-field_label,.mx-form-field>textarea.has-value~.mx-form-field_label,.mx-form-field.float .mx-form-field_label{border-top-width:0}.mx-form-field:hover:not(:has(input:disabled)):not(:has(textarea:disabled)):not(:has(select:disabled)) .mx-form-field_before,.mx-form-field:hover:not(:has(input:disabled)):not(:has(textarea:disabled)):not(:has(select:disabled)) .mx-form-field_label,.mx-form-field:hover:not(:has(input:disabled)):not(:has(textarea:disabled)):not(:has(select:disabled)) .mx-form-field_after{border-color:var(--mx-field-hover-color)}.mx-form-field:focus-within .mx-form-field_before,.mx-form-field:focus-within .mx-form-field_label,.mx-form-field:focus-within .mx-form-field_after{border-color:var(--mx-field-active-color)!important}.mx-form-field:focus-within .mx-form-field_label span{color:var(--mx-field-active-color)}.mx-form-field>input:invalid~.mx-form-field_before,.mx-form-field>input:invalid~.mx-form-field_label,.mx-form-field>input:invalid~.mx-form-field_after,.mx-form-field>textarea:invalid~.mx-form-field_before,.mx-form-field>textarea:invalid~.mx-form-field_label,.mx-form-field>textarea:invalid~.mx-form-field_after{border-color:var(--mx-field-invalid-color)}.mx-form-field:has(input:invalid:focus):after,.mx-form-field:has(textarea:invalid:focus):after{border-color:var(--mx-field-error-ring)}.mx-form-field:has(input:invalid:focus) .mx-form-field_label span,.mx-form-field:has(textarea:invalid:focus) .mx-form-field_label span{color:var(--mx-field-invalid-color)}.mx-form-field:has(input:disabled),.mx-form-field:has(textarea:disabled),.mx-form-field:has(select:disabled){opacity:.62;cursor:not-allowed}.mx-form-field:has(input:disabled) .mx-form-field_before,.mx-form-field:has(input:disabled) .mx-form-field_label,.mx-form-field:has(input:disabled) .mx-form-field_after,.mx-form-field:has(textarea:disabled) .mx-form-field_before,.mx-form-field:has(textarea:disabled) .mx-form-field_label,.mx-form-field:has(textarea:disabled) .mx-form-field_after,.mx-form-field:has(select:disabled) .mx-form-field_before,.mx-form-field:has(select:disabled) .mx-form-field_label,.mx-form-field:has(select:disabled) .mx-form-field_after{border-color:var(--mx-field-disabled-color)}.mx-form-field:has(input:read-only:not(:disabled)){--mx-field-border-color: light-dark(#9a9a9a, #686868)}.mx-form-field input:-webkit-autofill,.mx-form-field input:-webkit-autofill:hover,.mx-form-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--mx-field-text-color);caret-color:var(--mx-field-text-color);transition:background-color 99999s ease-in-out 0s}.mx-form-field_hint{font-size:.8rem;color:var(--mx-field-hint-color, light-dark(#3598fb, #0366d0))}.mx-form-field_error-list{font-size:.8rem;color:var(--mx-field-error-list-color, light-dark(#d60000, #ff4d5a))}:host([dir=rtl]) .mx-form-field_before{flex:0 0 14px;border-right:var(--mx-field-border-width) solid var(--mx-field-border-color);border-left:0;border-radius:0 var(--mx-field-radius) var(--mx-field-radius) 0}:host([dir=rtl]) .mx-form-field_after{border-left:var(--mx-field-border-width) solid var(--mx-field-border-color);border-right:0;border-radius:var(--mx-field-radius) 0 0 var(--mx-field-radius)}:host([dir=rtl]) .mx-form-field_label span{transform-origin:right center}:host([dir=rtl]) .mx-form-field>input:focus~:host([dir=rtl]) .mx-form-field_label span,:host([dir=rtl]) .mx-form-field>input.has-value~:host([dir=rtl]) .mx-form-field_label span,:host([dir=rtl]) .mx-form-field>textarea:focus~:host([dir=rtl]) .mx-form-field_label span{transform:translateY(-50%) scale(.86)}@media(prefers-reduced-motion:reduce){.mx-form-field *,.mx-form-field:after{transition:none!important}}@media(forced-colors:active){.mx-form-field_before,.mx-form-field_label,.mx-form-field_after{border-color:CanvasText}.mx-form-field:focus-within .mx-form-field_before,.mx-form-field:focus-within .mx-form-field_label,.mx-form-field:focus-within .mx-form-field_after{border-color:Highlight}.mx-form-field_label span{color:CanvasText}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxInput],ngx-input',
+                    standalone: true,
+                    host: {
+                        '[class.has-value]': 'hasValue()',
+                    },
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onChange: [{
+                type: HostListener,
+                args: ['change']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class NgxError {
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxError, isStandalone: true, selector: "[ngxError],ngx-error", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxError],ngx-error',
+                    standalone: true,
+                }]
+        }] });
+
+class NgxHint {
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxHint, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxHint, isStandalone: true, selector: "[ngxHint],ngx-hint", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxHint, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxHint],ngx-hint',
+                    standalone: true,
+                }]
+        }] });
+
+class NgxPrefix {
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPrefix, isStandalone: true, selector: "[ngxPrefix],ngx-prefix", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxPrefix],ngx-prefix',
+                    standalone: true,
+                }]
+        }] });
+
+class NgxSuffix {
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxSuffix, isStandalone: true, selector: "[ngxSuffix],ngx-suffix", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxSuffix],ngx-suffix',
+                    standalone: true,
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxFormField };
+export { MX_FORM_FIELD, MgxFormFieldRef, NgxError, NgxFormField, NgxHint, NgxInput, NgxPrefix, NgxSuffix };
 //# sourceMappingURL=ngx-kit-form-field.mjs.map

package/fesm2022/ngx-kit-form-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-kit-form-field.mjs","sources":["../../../projects/libs/form-field/components/form-field.ts","../../../projects/libs/form-field/components/form-field.html","../../../projects/libs/form-field/ngx-kit-form-field.ts"],"sourcesContent":["// form-field.component.ts\nimport { Component, ChangeDetectionStrategy, input, output, model, computed } from '@angular/core';\nimport { NgxFormFieldType } from '../types/field-type';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'ngx-form-field',\n  standalone: true,\n  templateUrl: './form-field.html',\n  styleUrl: './form-field.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.dir]': 'dir() || null',\n  },\n})\nexport class NgxFormField {\n  // ─────────────────────────────────────────────────────────\n  // Two-way binding\n  // ─────────────────────────────────────────────────────────\n  readonly value = model<string | number>('');\n\n  // ─────────────────────────────────────────────────────────\n  // Required inputs\n  // ─────────────────────────────────────────────────────────\n  readonly label = input.required<string>();\n\n  // ─────────────────────────────────────────────────────────\n  // Optional inputs (Signal inputs)\n  // ─────────────────────────────────────────────────────────\n  readonly type = input<NgxFormFieldType>('text');\n  readonly placeholder = input<string>('');\n  readonly required = input<boolean>(false);\n  readonly disabled = input<boolean>(false);\n  readonly readonly = input<boolean>(false);\n  readonly float = input<boolean>(false);\n  readonly name = input<string | null>(null);\n  readonly autocomplete = input<string | null>(null);\n  readonly rows = input<number>(3);\n  readonly hint = input<string>('');\n  readonly errorMessages = input<string[]>([]);\n  readonly dir = input<'' | 'ltr' | 'rtl'>('');\n  readonly id = input<string>(`mx-field-${++nextId}`);\n\n  // ─────────────────────────────────────────────────────────\n  // Outputs\n  // ─────────────────────────────────────────────────────────\n  readonly focused = output<void>();\n  readonly blurred = output<void>();\n\n  // ─────────────────────────────────────────────────────────\n  // Derived state (Computed signal)\n  // ─────────────────────────────────────────────────────────\n  readonly hasValue = computed(() => {\n    const v = this.value();\n    return v !== null && v !== undefined && v !== '';\n  });\n\n  // ─────────────────────────────────────────────────────────\n  // Event handlers\n  // ─────────────────────────────────────────────────────────\n  onInput(event: Event): void {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n    this.value.set(target.value);\n  }\n\n  onFocus(): void {\n    this.focused.emit();\n  }\n\n  onBlur(): void {\n    this.blurred.emit();\n  }\n}\n","<!-- form-field.component.html -->\n<div class=\"mx-form-field\" [class.float]=\"float()\">\n  @if (type() === 'textarea') {\n    <textarea\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-label]=\"label()\"\n      [class.has-value]=\"hasValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"></textarea>\n  } @else {\n    <input\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-label]=\"label()\"\n      [class.has-value]=\"hasValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\" />\n  }\n\n  <div class=\"mx-form-field_before\"></div>\n  <label class=\"mx-form-field_label\" [attr.for]=\"id()\">\n    <span>{{ label() }}</span>\n  </label>\n  <div class=\"mx-form-field_after\"></div>\n</div>\n\n@if (hint()) {\n  <div class=\"mx-form-field_hint\">{{ hint() }}</div>\n}\n\n@if (errorMessages().length > 0) {\n  <div class=\"mx-form-field_error-list\" role=\"alert\">\n    @for (msg of errorMessages(); track msg) {\n      <div>{{ msg }}</div>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;AAIA,IAAI,MAAM,GAAG,CAAC;MAYD,YAAY,CAAA;;;;IAId,KAAK,GAAG,KAAK,CAAkB,EAAE;8EAAC;;;;IAKlC,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;;;;IAKhC,IAAI,GAAG,KAAK,CAAmB,MAAM;6EAAC;IACtC,WAAW,GAAG,KAAK,CAAS,EAAE;oFAAC;IAC/B,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,KAAK,GAAG,KAAK,CAAU,KAAK;8EAAC;IAC7B,IAAI,GAAG,KAAK,CAAgB,IAAI;6EAAC;IACjC,YAAY,GAAG,KAAK,CAAgB,IAAI;qFAAC;IACzC,IAAI,GAAG,KAAK,CAAS,CAAC;6EAAC;IACvB,IAAI,GAAG,KAAK,CAAS,EAAE;6EAAC;IACxB,aAAa,GAAG,KAAK,CAAW,EAAE;sFAAC;IACnC,GAAG,GAAG,KAAK,CAAqB,EAAE;4EAAC;AACnC,IAAA,EAAE,GAAG,KAAK,CAAS,CAAA,SAAA,EAAY,EAAE,MAAM,CAAA,CAAE;2EAAC;;;;IAK1C,OAAO,GAAG,MAAM,EAAQ;IACxB,OAAO,GAAG,MAAM,EAAQ;;;;AAKxB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;QACtB,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,EAAE;IAClD,CAAC;iFAAC;;;;AAKF,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgD;QACrE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9B;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;uGAxDW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,8hEChBzB,siDAsDA,EAAA,MAAA,EAAA,CAAA,kwNAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDtCa,YAAY,EAAA,UAAA,EAAA,CAAA;kBAVxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,cACd,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,YAAY,EAAE,eAAe;AAC9B,qBAAA,EAAA,QAAA,EAAA,siDAAA,EAAA,MAAA,EAAA,CAAA,kwNAAA,CAAA,EAAA;;;AEdH;;AAEG;;;;"}
+{"version":3,"file":"ngx-kit-form-field.mjs","sources":["../../../projects/libs/form-field/tokens/form-field.token.ts","../../../projects/libs/form-field/components/form-field.ts","../../../projects/libs/form-field/components/form-field.html","../../../projects/libs/form-field/directives/ngx-input.directive.ts","../../../projects/libs/form-field/directives/ngx-error.directive.ts","../../../projects/libs/form-field/directives/ngx-hint.directive.ts","../../../projects/libs/form-field/directives/ngx-prefix.directive.ts","../../../projects/libs/form-field/directives/ngx-suffix.directive.ts","../../../projects/libs/form-field/ngx-kit-form-field.ts"],"sourcesContent":["import { InjectionToken, signal } from '@angular/core';\n\nexport const MX_FORM_FIELD =\n  new InjectionToken<MgxFormFieldRef>('mx-form-field', {\n    factory: () => new MgxFormFieldRef(),\n  });\n\nexport class MgxFormFieldRef {\n  readonly value = signal('');\n}\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  input,\r\n  inject,\r\n} from '@angular/core';\r\n\r\nimport { MX_FORM_FIELD } from '../tokens/form-field.token';\r\n\r\n@Component({\r\n  selector: 'ngx-form-field',\r\n  standalone: true,\r\n  templateUrl: './form-field.html',\r\n  styleUrl: './form-field.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class NgxFormField {\r\n  protected readonly ref = inject(MX_FORM_FIELD);\r\n\r\n  readonly label = input.required<string>();\r\n\r\n  /**\r\n   * Forces the label to float even when the control is empty.\r\n   * Similar to Material's floatLabel behavior.\r\n   */\r\n  readonly float = input(false);\r\n\r\n  /**\r\n   * Explicit state overrides are useful when the projected control\r\n   * is managed by Angular Forms.\r\n   */\r\n  readonly invalid = input(false);\r\n  readonly required = input(false);\r\n  readonly disabled = input(false);\r\n  readonly readonly = input(false);\r\n\r\n  readonly hintVisible = computed(() => !this.invalid());\r\n\r\n  readonly errorVisible = computed(() => this.invalid());\r\n}\r\n","<div\r\n  class=\"mx-form-field\"\r\n  [class.mx-form-field--float]=\"float()\"\r\n  [class.mx-form-field--disabled]=\"disabled()\"\r\n  [class.mx-form-field--readonly]=\"readonly()\"\r\n  [class.mx-form-field--invalid]=\"invalid()\"\r\n  [class.mx-form-field--required]=\"required()\">\r\n  <div class=\"mx-form-field__before\">\r\n    <div class=\"mx-form-field__prefix\">\r\n      <ng-content select=\"[ngxPrefix],ngx-prefix\"></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-content select=\"[ngxInput],ngx-input\"></ng-content>\r\n\r\n  <span class=\"mx-form-field__label\">\r\n    <span [aria-label]=\"label()\">{{ label() }}</span>\r\n  </span>\r\n\r\n  <div class=\"mx-form-field__after\">\r\n    <div class=\"mx-form-field__suffix\">\r\n      <ng-content select=\"[ngxSuffix],ngx-suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (hintVisible()) {\r\n  <div class=\"mx-form-field__hint\">\r\n    <ng-content select=\"[ngxHint],ngx-hint\"></ng-content>\r\n  </div>\r\n}\r\n\r\n@if (errorVisible()) {\r\n  <div class=\"mx-form-field__error-list\" role=\"alert\">\r\n    <ng-content select=\"[ngxError],ngx-error\"></ng-content>\r\n  </div>\r\n}\r\n","import {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  HostListener,\n  inject,\n  signal,\n} from '@angular/core';\n\nimport { MX_FORM_FIELD } from '../tokens/form-field.token';\n\ntype FormControlElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n@Directive({\n  selector: '[ngxInput],ngx-input',\n  standalone: true,\n  host: {\n    '[class.has-value]': 'hasValue()',\n  },\n})\nexport class NgxInput implements AfterViewInit {\n  private readonly el =\n    inject<ElementRef<FormControlElement>>(ElementRef);\n\n  private readonly ref = inject(MX_FORM_FIELD);\n\n  readonly hasValue = signal(false);\n\n  ngAfterViewInit(): void {\n    // Covers initial values coming from [value], Reactive Forms,\n    // template-driven forms, browser autofill, etc.\n    queueMicrotask(() => this.syncValue());\n  }\n\n  @HostListener('input')\n  protected onInput(): void {\n    this.syncValue();\n  }\n\n  @HostListener('change')\n  protected onChange(): void {\n    this.syncValue();\n  }\n\n  @HostListener('blur')\n  protected onBlur(): void {\n    this.syncValue();\n  }\n\n  private syncValue(): void {\n    const value = this.el.nativeElement.value;\n\n    this.ref.value.set(value);\n\n    this.hasValue.set(\n      value !== null &&\n      value !== undefined &&\n      value !== '',\n    );\n  }\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxError],ngx-error',\n  standalone: true,\n})\nexport class NgxError {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxHint],ngx-hint',\n  standalone: true,\n})\nexport class NgxHint {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxPrefix],ngx-prefix',\n  standalone: true,\n})\nexport class NgxPrefix {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngxSuffix],ngx-suffix',\n  standalone: true,\n})\nexport class NgxSuffix {\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-kit-gallery.mjs

@@ -334,11 +334,11 @@ class NgxImageViewerComponent {
             : ev.clientY;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxImageViewerComponent, isStandalone: true, selector: "ngx-image-viewer", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)" }, classAttribute: "ngx-image-viewer-host" }, viewQueries: [{ propertyName: "stageEl", first: true, predicate: ["stage"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngx-iv-stage\" #stage [class.zoomed]=\"isZoomed()\">\n  @if (toolbarConfig().close) {\n    <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"\u0628\u0633\u062A\u0646\">\u2715</button>\n  }\n\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n\n  @if (toolbarConfig().prevNext && images().length > 1) {\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"\u0642\u0628\u0644\u06CC\">\n      \u2039\n    </button>\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"\u0628\u0639\u062F\u06CC\">\n      \u203A\n    </button>\n  }\n\n  @if (toolbarConfig().counter && images().length > 1) {\n    <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n  }\n</div>\n\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n\n<div class=\"ngx-iv-toolbar\">\n  @if (toolbarConfig().zoomOut) {\n    <button type=\"button\" (click)=\"zoomOut()\" title=\"\u06A9\u0648\u0686\u06A9\u200C\u0646\u0645\u0627\u06CC\u06CC\">\uFF0D</button>\n  }\n  @if (toolbarConfig().zoomIn) {\n    <button type=\"button\" (click)=\"zoomIn()\" title=\"\u0628\u0632\u0631\u06AF\u200C\u0646\u0645\u0627\u06CC\u06CC\">\uFF0B</button>\n  }\n  @if (toolbarConfig().resetZoom) {\n    <button type=\"button\" (click)=\"resetView()\" title=\"\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC \u0632\u0648\u0645\">\u2922</button>\n  }\n  @if (toolbarConfig().rotateLeft) {\n    <button type=\"button\" (click)=\"rotateLeft()\" title=\"\u0686\u0631\u062E\u0634 \u0628\u0647 \u0686\u067E\">\u27F2</button>\n  }\n  @if (toolbarConfig().rotateRight) {\n    <button type=\"button\" (click)=\"rotateRight()\" title=\"\u0686\u0631\u062E\u0634 \u0628\u0647 \u0631\u0627\u0633\u062A\">\u27F3</button>\n  }\n  @if (toolbarConfig().download) {\n    <button type=\"button\" (click)=\"download()\" title=\"\u062F\u0627\u0646\u0644\u0648\u062F\">\u2B73</button>\n  }\n  @if (toolbarConfig().print) {\n    <button type=\"button\" (click)=\"print()\" title=\"\u067E\u0631\u06CC\u0646\u062A\">\uD83D\uDDB6</button>\n  }\n  @if (toolbarConfig().fullscreen) {\n    <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"\u062A\u0645\u0627\u0645\u200C\u0635\u0641\u062D\u0647\">\u26F6</button>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.5rem;outline:none}.ngx-iv-stage{position:relative;block-size:420px;background:light-dark(#f3f4f6,#0b0b0d);border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-iv-image{position:absolute;inset:0;margin:auto;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;cursor:default;transition:transform 60ms linear}.ngx-iv-image.grab{cursor:grab}.ngx-iv-image.grab:active{cursor:grabbing}.ngx-iv-nav{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:40px;block-size:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ngx-iv-nav:hover{background:#000000a6}.ngx-iv-nav--prev{inset-inline-start:.6rem}.ngx-iv-nav--next{inset-inline-end:.6rem}.ngx-iv-counter{position:absolute;inset-block-end:.6rem;inset-inline-start:50%;translate:-50% 0;padding:.2rem .7rem;border-radius:999px;background:#00000080;color:#fff;font-size:.75rem}.ngx-iv-close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;inline-size:32px;block-size:32px;border-radius:50%;border:none;background:#00000073;color:#fff;cursor:pointer;z-index:2}.ngx-iv-caption{font-size:.85rem;color:light-dark(#4b5563,#a1a1aa);text-align:center}.ngx-iv-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}.ngx-iv-toolbar button{appearance:none;border:1px solid light-dark(#d1d5db,#3f3f46);background:light-dark(#ffffff,#232327);color:light-dark(#374151,#d4d4d8);border-radius:8px;inline-size:36px;block-size:36px;font-size:1rem;cursor:pointer}.ngx-iv-toolbar button:hover{background:light-dark(#f3f4f6,#2c2c31)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxImageViewerComponent, isStandalone: true, selector: "ngx-image-viewer", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)" }, classAttribute: "ngx-image-viewer-host" }, viewQueries: [{ propertyName: "stageEl", first: true, predicate: ["stage"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngx-iv-stage\" #stage [class.zoomed]=\"isZoomed()\">\n  @if (toolbarConfig().close) {\n    <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"Close\">\u2715</button>\n  }\n\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n\n  @if (toolbarConfig().prevNext && images().length > 1) {\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"Previous\">\n      \u2039\n    </button>\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"Next\">\n      \u203A\n    </button>\n  }\n\n  @if (toolbarConfig().counter && images().length > 1) {\n    <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n  }\n</div>\n\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n\n<div class=\"ngx-iv-toolbar\">\n  @if (toolbarConfig().zoomOut) {\n    <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\uFF0D</button>\n  }\n  @if (toolbarConfig().zoomIn) {\n    <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">\uFF0B</button>\n  }\n  @if (toolbarConfig().resetZoom) {\n    <button type=\"button\" (click)=\"resetView()\" title=\"Reset zoom\">\u2922</button>\n  }\n  @if (toolbarConfig().rotateLeft) {\n    <button type=\"button\" (click)=\"rotateLeft()\" title=\"Rotate left\">\u27F2</button>\n  }\n  @if (toolbarConfig().rotateRight) {\n    <button type=\"button\" (click)=\"rotateRight()\" title=\"Rotate right\">\u27F3</button>\n  }\n  @if (toolbarConfig().download) {\n    <button type=\"button\" (click)=\"download()\" title=\"Download\">\u2B73</button>\n  }\n  @if (toolbarConfig().print) {\n    <button type=\"button\" (click)=\"print()\" title=\"Print\">\uD83D\uDDB6</button>\n  }\n  @if (toolbarConfig().fullscreen) {\n    <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"Fullscreen\">\u26F6</button>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.5rem;outline:none}.ngx-iv-stage{position:relative;block-size:420px;background:light-dark(#f3f4f6,#0b0b0d);border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-iv-image{position:absolute;inset:0;margin:auto;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;cursor:default;transition:transform 60ms linear}.ngx-iv-image.grab{cursor:grab}.ngx-iv-image.grab:active{cursor:grabbing}.ngx-iv-nav{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:40px;block-size:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ngx-iv-nav:hover{background:#000000a6}.ngx-iv-nav--prev{inset-inline-start:.6rem}.ngx-iv-nav--next{inset-inline-end:.6rem}.ngx-iv-counter{position:absolute;inset-block-end:.6rem;inset-inline-start:50%;translate:-50% 0;padding:.2rem .7rem;border-radius:999px;background:#00000080;color:#fff;font-size:.75rem}.ngx-iv-close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;inline-size:32px;block-size:32px;border-radius:50%;border:none;background:#00000073;color:#fff;cursor:pointer;z-index:2}.ngx-iv-caption{font-size:.85rem;color:light-dark(#4b5563,#a1a1aa);text-align:center}.ngx-iv-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}.ngx-iv-toolbar button{appearance:none;border:1px solid light-dark(#d1d5db,#3f3f46);background:light-dark(#ffffff,#232327);color:light-dark(#374151,#d4d4d8);border-radius:8px;inline-size:36px;block-size:36px;font-size:1rem;cursor:pointer}.ngx-iv-toolbar button:hover{background:light-dark(#f3f4f6,#2c2c31)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-image-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ngx-image-viewer-host', tabindex: '0' }, template: "<div class=\"ngx-iv-stage\" #stage [class.zoomed]=\"isZoomed()\">\n  @if (toolbarConfig().close) {\n    <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"\u0628\u0633\u062A\u0646\">\u2715</button>\n  }\n\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n\n  @if (toolbarConfig().prevNext && images().length > 1) {\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"\u0642\u0628\u0644\u06CC\">\n      \u2039\n    </button>\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"\u0628\u0639\u062F\u06CC\">\n      \u203A\n    </button>\n  }\n\n  @if (toolbarConfig().counter && images().length > 1) {\n    <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n  }\n</div>\n\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n\n<div class=\"ngx-iv-toolbar\">\n  @if (toolbarConfig().zoomOut) {\n    <button type=\"button\" (click)=\"zoomOut()\" title=\"\u06A9\u0648\u0686\u06A9\u200C\u0646\u0645\u0627\u06CC\u06CC\">\uFF0D</button>\n  }\n  @if (toolbarConfig().zoomIn) {\n    <button type=\"button\" (click)=\"zoomIn()\" title=\"\u0628\u0632\u0631\u06AF\u200C\u0646\u0645\u0627\u06CC\u06CC\">\uFF0B</button>\n  }\n  @if (toolbarConfig().resetZoom) {\n    <button type=\"button\" (click)=\"resetView()\" title=\"\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC \u0632\u0648\u0645\">\u2922</button>\n  }\n  @if (toolbarConfig().rotateLeft) {\n    <button type=\"button\" (click)=\"rotateLeft()\" title=\"\u0686\u0631\u062E\u0634 \u0628\u0647 \u0686\u067E\">\u27F2</button>\n  }\n  @if (toolbarConfig().rotateRight) {\n    <button type=\"button\" (click)=\"rotateRight()\" title=\"\u0686\u0631\u062E\u0634 \u0628\u0647 \u0631\u0627\u0633\u062A\">\u27F3</button>\n  }\n  @if (toolbarConfig().download) {\n    <button type=\"button\" (click)=\"download()\" title=\"\u062F\u0627\u0646\u0644\u0648\u062F\">\u2B73</button>\n  }\n  @if (toolbarConfig().print) {\n    <button type=\"button\" (click)=\"print()\" title=\"\u067E\u0631\u06CC\u0646\u062A\">\uD83D\uDDB6</button>\n  }\n  @if (toolbarConfig().fullscreen) {\n    <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"\u062A\u0645\u0627\u0645\u200C\u0635\u0641\u062D\u0647\">\u26F6</button>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.5rem;outline:none}.ngx-iv-stage{position:relative;block-size:420px;background:light-dark(#f3f4f6,#0b0b0d);border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-iv-image{position:absolute;inset:0;margin:auto;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;cursor:default;transition:transform 60ms linear}.ngx-iv-image.grab{cursor:grab}.ngx-iv-image.grab:active{cursor:grabbing}.ngx-iv-nav{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:40px;block-size:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ngx-iv-nav:hover{background:#000000a6}.ngx-iv-nav--prev{inset-inline-start:.6rem}.ngx-iv-nav--next{inset-inline-end:.6rem}.ngx-iv-counter{position:absolute;inset-block-end:.6rem;inset-inline-start:50%;translate:-50% 0;padding:.2rem .7rem;border-radius:999px;background:#00000080;color:#fff;font-size:.75rem}.ngx-iv-close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;inline-size:32px;block-size:32px;border-radius:50%;border:none;background:#00000073;color:#fff;cursor:pointer;z-index:2}.ngx-iv-caption{font-size:.85rem;color:light-dark(#4b5563,#a1a1aa);text-align:center}.ngx-iv-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}.ngx-iv-toolbar button{appearance:none;border:1px solid light-dark(#d1d5db,#3f3f46);background:light-dark(#ffffff,#232327);color:light-dark(#374151,#d4d4d8);border-radius:8px;inline-size:36px;block-size:36px;font-size:1rem;cursor:pointer}.ngx-iv-toolbar button:hover{background:light-dark(#f3f4f6,#2c2c31)}\n"] }]
+            args: [{ selector: 'ngx-image-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ngx-image-viewer-host', tabindex: '0' }, template: "<div class=\"ngx-iv-stage\" #stage [class.zoomed]=\"isZoomed()\">\n  @if (toolbarConfig().close) {\n    <button type=\"button\" class=\"ngx-iv-close\" (click)=\"close()\" aria-label=\"Close\">\u2715</button>\n  }\n\n  @if (activeImage(); as img) {\n    <img\n      class=\"ngx-iv-image\"\n      [class.grab]=\"isZoomed()\"\n      [src]=\"img.src\"\n      [alt]=\"img.alt || ''\"\n      draggable=\"false\"\n      [style.transform]=\"stageTransform()\"\n      (mousedown)=\"onPanPointerDown($event)\" />\n  }\n\n  @if (toolbarConfig().prevNext && images().length > 1) {\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--prev\" (click)=\"prev()\" aria-label=\"Previous\">\n      \u2039\n    </button>\n    <button type=\"button\" class=\"ngx-iv-nav ngx-iv-nav--next\" (click)=\"next()\" aria-label=\"Next\">\n      \u203A\n    </button>\n  }\n\n  @if (toolbarConfig().counter && images().length > 1) {\n    <div class=\"ngx-iv-counter\">{{ activeIndex() + 1 }} / {{ images().length }}</div>\n  }\n</div>\n\n@if (activeImage()?.caption) {\n  <div class=\"ngx-iv-caption\">{{ activeImage()?.caption }}</div>\n}\n\n<div class=\"ngx-iv-toolbar\">\n  @if (toolbarConfig().zoomOut) {\n    <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\uFF0D</button>\n  }\n  @if (toolbarConfig().zoomIn) {\n    <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">\uFF0B</button>\n  }\n  @if (toolbarConfig().resetZoom) {\n    <button type=\"button\" (click)=\"resetView()\" title=\"Reset zoom\">\u2922</button>\n  }\n  @if (toolbarConfig().rotateLeft) {\n    <button type=\"button\" (click)=\"rotateLeft()\" title=\"Rotate left\">\u27F2</button>\n  }\n  @if (toolbarConfig().rotateRight) {\n    <button type=\"button\" (click)=\"rotateRight()\" title=\"Rotate right\">\u27F3</button>\n  }\n  @if (toolbarConfig().download) {\n    <button type=\"button\" (click)=\"download()\" title=\"Download\">\u2B73</button>\n  }\n  @if (toolbarConfig().print) {\n    <button type=\"button\" (click)=\"print()\" title=\"Print\">\uD83D\uDDB6</button>\n  }\n  @if (toolbarConfig().fullscreen) {\n    <button type=\"button\" (click)=\"toggleFullscreen()\" title=\"Fullscreen\">\u26F6</button>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.5rem;outline:none}.ngx-iv-stage{position:relative;block-size:420px;background:light-dark(#f3f4f6,#0b0b0d);border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-iv-image{position:absolute;inset:0;margin:auto;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;cursor:default;transition:transform 60ms linear}.ngx-iv-image.grab{cursor:grab}.ngx-iv-image.grab:active{cursor:grabbing}.ngx-iv-nav{position:absolute;inset-block-start:50%;translate:0 -50%;inline-size:40px;block-size:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ngx-iv-nav:hover{background:#000000a6}.ngx-iv-nav--prev{inset-inline-start:.6rem}.ngx-iv-nav--next{inset-inline-end:.6rem}.ngx-iv-counter{position:absolute;inset-block-end:.6rem;inset-inline-start:50%;translate:-50% 0;padding:.2rem .7rem;border-radius:999px;background:#00000080;color:#fff;font-size:.75rem}.ngx-iv-close{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;inline-size:32px;block-size:32px;border-radius:50%;border:none;background:#00000073;color:#fff;cursor:pointer;z-index:2}.ngx-iv-caption{font-size:.85rem;color:light-dark(#4b5563,#a1a1aa);text-align:center}.ngx-iv-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}.ngx-iv-toolbar button{appearance:none;border:1px solid light-dark(#d1d5db,#3f3f46);background:light-dark(#ffffff,#232327);color:light-dark(#374151,#d4d4d8);border-radius:8px;inline-size:36px;block-size:36px;font-size:1rem;cursor:pointer}.ngx-iv-toolbar button:hover{background:light-dark(#f3f4f6,#2c2c31)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: true }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomStep", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], stageEl: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]