@tailng-ui/components 0.17.0 → 0.19.0

package/src/lib/form/input/tng-input.component.js

@@ -1,9 +1,9 @@
-import { __decorate } from "tslib";
 import { Component, forwardRef, HostBinding, input, output, } from '@angular/core';
 import { booleanAttribute } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceTngInputNullableBoolean, TngInput, } from '@tailng-ui/primitives';
 import { TngFormFieldComponent, } from '../form-field/tng-form-field.component';
+import * as i0 from "@angular/core";
 function normalizeAttr(value) {
     if (value === undefined || value === null)
         return null;
@@ -18,43 +18,31 @@ function readInputValue(event) {
         return null;
     return target.value;
 }
-let TngInputComponent = class TngInputComponent {
+export class TngInputComponent {
     // ---- Wrapper (form-field) appearance knobs ----
-    appearance = input('outline');
-    size = input('md');
-    tone = input('neutral');
-    fullWidth = input(true, {
-        transform: booleanAttribute,
-    });
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    tone = input('neutral', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    fullWidth = input(true, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
     // ---- Input API passthrough ----
-    ariaDescribedBy = input(null);
-    ariaInvalid = input(null, {
-        transform: coerceTngInputNullableBoolean,
-    });
-    ariaLabel = input(null);
-    ariaLabelledby = input(null);
-    ariaRequired = input(null, {
-        transform: coerceTngInputNullableBoolean,
-    });
-    autocomplete = input(null);
-    disabled = input(false, {
-        transform: booleanAttribute,
-    });
-    id = input(null);
-    name = input(null);
-    placeholder = input(null);
-    readonly = input(false, {
-        transform: booleanAttribute,
-    });
-    required = input(false, {
-        transform: booleanAttribute,
-    });
-    type = input('text');
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : {}), transform: coerceTngInputNullableBoolean });
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    ariaRequired = input(null, { ...(ngDevMode ? { debugName: "ariaRequired" } : {}), transform: coerceTngInputNullableBoolean });
+    autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     /**
      * Controlled value input (only used when NOT using CVA).
      * If you bind [value], you should also listen to (valueChange) (or use signals).
      */
-    value = input(null);
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     // ---- Outputs ----
     valueChange = output();
     inputEvent = output({ alias: 'input' });
@@ -138,37 +126,38 @@ let TngInputComponent = class TngInputComponent {
     normalizeAttrValue(value) {
         return normalizeAttr(value);
     }
-};
-__decorate([
-    HostBinding('attr.data-slot')
-], TngInputComponent.prototype, "dataSlot", void 0);
-__decorate([
-    HostBinding('attr.data-appearance')
-], TngInputComponent.prototype, "dataAppearance", null);
-__decorate([
-    HostBinding('attr.data-size')
-], TngInputComponent.prototype, "dataSize", null);
-__decorate([
-    HostBinding('attr.data-tone')
-], TngInputComponent.prototype, "dataTone", null);
-__decorate([
-    HostBinding('attr.data-full-width')
-], TngInputComponent.prototype, "dataFullWidth", null);
-TngInputComponent = __decorate([
-    Component({
-        selector: 'tng-input',
-        standalone: true,
-        imports: [TngFormFieldComponent, TngInput],
-        templateUrl: './tng-input.component.html',
-        styleUrl: './tng-input.component.css',
-        providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngInputComponent, isStandalone: true, selector: "tng-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", blurEvent: "blur" }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.data-appearance": "this.dataAppearance", "attr.data-size": "this.dataSize", "attr.data-tone": "this.dataTone", "attr.data-full-width": "this.dataFullWidth" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TngInputComponent),
                 multi: true,
             },
-        ],
-    })
-], TngInputComponent);
-export { TngInputComponent };
+        ], ngImport: i0, template: "<tng-form-field\n  class=\"tng-input\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [tone]=\"tone()\"\n  [fullWidth]=\"fullWidth()\"\n>\n  <input\n    tngInput\n    class=\"tng-input-control\"\n    [type]=\"type()\"\n    [disabled]=\"effectiveDisabled\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [ariaLabelledby]=\"ariaLabelledby()\"\n    [ariaDescribedBy]=\"ariaDescribedBy()\"\n    [ariaInvalid]=\"ariaInvalid()\"\n    [ariaRequired]=\"ariaRequired()\"\n    [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n    [attr.id]=\"normalizeAttrValue(id())\"\n    [attr.name]=\"normalizeAttrValue(name())\"\n    [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n    [value]=\"effectiveValue\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n</tng-form-field>", styles: [":host {\n  display: inline-flex;\n  max-width: 100%;\n}\n\n:host([data-full-width]) {\n  width: 100%;\n}\n\n.tng-input {\n  width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-input {\n  width: auto;\n}\n\n/* Optional: make sure the native control fills the form-field */\n.tng-input-control {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n  box-shadow: none;\n  color: inherit;\n  display: block;\n  flex: 1 1 auto;\n  font: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0;\n  width: 100%;\n}\n\n.tng-input-control::placeholder {\n  color: var(--_tng-input-placeholder, var(--tng-semantic-foreground-muted));\n}\n"], dependencies: [{ kind: "component", type: TngFormFieldComponent, selector: "tng-form-field", inputs: ["appearance", "size", "tone", "fullWidth"] }, { kind: "directive", type: TngInput, selector: "input[tngInput], textarea[tngInput]", inputs: ["ariaDescribedBy", "ariaLabel", "ariaLabelledby", "ariaInvalid", "ariaRequired", "disabled", "readonly", "required"], exportAs: ["tngInput"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-input', standalone: true, imports: [TngFormFieldComponent, TngInput], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<tng-form-field\n  class=\"tng-input\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [tone]=\"tone()\"\n  [fullWidth]=\"fullWidth()\"\n>\n  <input\n    tngInput\n    class=\"tng-input-control\"\n    [type]=\"type()\"\n    [disabled]=\"effectiveDisabled\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [ariaLabelledby]=\"ariaLabelledby()\"\n    [ariaDescribedBy]=\"ariaDescribedBy()\"\n    [ariaInvalid]=\"ariaInvalid()\"\n    [ariaRequired]=\"ariaRequired()\"\n    [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n    [attr.id]=\"normalizeAttrValue(id())\"\n    [attr.name]=\"normalizeAttrValue(name())\"\n    [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n    [value]=\"effectiveValue\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n</tng-form-field>", styles: [":host {\n  display: inline-flex;\n  max-width: 100%;\n}\n\n:host([data-full-width]) {\n  width: 100%;\n}\n\n.tng-input {\n  width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-input {\n  width: auto;\n}\n\n/* Optional: make sure the native control fills the form-field */\n.tng-input-control {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  box-sizing: border-box;\n  box-shadow: none;\n  color: inherit;\n  display: block;\n  flex: 1 1 auto;\n  font: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0;\n  width: 100%;\n}\n\n.tng-input-control::placeholder {\n  color: var(--_tng-input-placeholder, var(--tng-semantic-foreground-muted));\n}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRequired", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], blurEvent: [{ type: i0.Output, args: ["blur"] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataAppearance: [{
+                type: HostBinding,
+                args: ['attr.data-appearance']
+            }], dataSize: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], dataTone: [{
+                type: HostBinding,
+                args: ['attr.data-tone']
+            }], dataFullWidth: [{
+                type: HostBinding,
+                args: ['attr.data-full-width']
+            }] } });
 //# sourceMappingURL=tng-input.component.js.map

package/src/lib/form/input/tng-input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  forwardRef,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\nimport type { ControlValueAccessor} from '@angular/forms';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n  coerceTngInputNullableBoolean,\n  TngInput,\n  type TngInputType,\n} from '@tailng-ui/primitives';\n\nimport {\n  TngFormFieldComponent,\n  type TngFormFieldAppearance,\n  type TngFormFieldSize,\n  type TngFormFieldTone,\n} from '../form-field/tng-form-field.component';\n\ntype NullableBooleanInput = boolean | null | string | undefined;\n\nfunction normalizeAttr(value: string | null | undefined): string | null {\n  if (value === undefined || value === null) return null;\n  const v = value.trim();\n  return v.length > 0 ? v : null;\n}\n\nfunction readInputValue(event: unknown): string | null {\n  if (!(event instanceof Event)) return null;\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement)) return null;\n  return target.value;\n}\n\n@Component({\n  selector: 'tng-input',\n  standalone: true,\n  imports: [TngFormFieldComponent, TngInput],\n  templateUrl: './tng-input.component.html',\n  styleUrl: './tng-input.component.css',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => TngInputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class TngInputComponent implements ControlValueAccessor {\n  // ---- Wrapper (form-field) appearance knobs ----\n  public readonly appearance = input<TngFormFieldAppearance>('outline');\n  public readonly size = input<TngFormFieldSize>('md');\n  public readonly tone = input<TngFormFieldTone>('neutral');\n  public readonly fullWidth = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n\n  // ---- Input API passthrough ----\n  public readonly ariaDescribedBy = input<string | null>(null);\n  public readonly ariaInvalid = input<boolean | null, NullableBooleanInput>(null, {\n    transform: coerceTngInputNullableBoolean,\n  });\n  public readonly ariaLabel = input<string | null>(null);\n  public readonly ariaLabelledby = input<string | null>(null);\n  public readonly ariaRequired = input<boolean | null, NullableBooleanInput>(null, {\n    transform: coerceTngInputNullableBoolean,\n  });\n\n  public readonly autocomplete = input<string | null>(null);\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly id = input<string | null>(null);\n  public readonly name = input<string | null>(null);\n  public readonly placeholder = input<string | null>(null);\n  public readonly readonly = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly required = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly type = input<TngInputType>('text');\n\n  /**\n   * Controlled value input (only used when NOT using CVA).\n   * If you bind [value], you should also listen to (valueChange) (or use signals).\n   */\n  public readonly value = input<string | null>(null);\n\n  // ---- Outputs ----\n  public readonly valueChange = output<string>();\n  public readonly inputEvent = output<Event>({ alias: 'input' });\n  public readonly blurEvent = output<FocusEvent>({ alias: 'blur' });\n\n  // ---- CVA state ----\n  private usingCva = false;\n  private cvaValue: string | null = null;\n  private cvaDisabled = false;\n\n  private onChange: (value: string) => void = () => undefined;\n  private onTouched: () => void = () => undefined;\n\n  // ---- Host attrs (optional, useful for styling/debug) ----\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'input-component' as const;\n\n  @HostBinding('attr.data-appearance')\n  protected get dataAppearance(): TngFormFieldAppearance {\n    return this.appearance();\n  }\n\n  @HostBinding('attr.data-size')\n  protected get dataSize(): TngFormFieldSize {\n    return this.size();\n  }\n\n  @HostBinding('attr.data-tone')\n  protected get dataTone(): TngFormFieldTone {\n    return this.tone();\n  }\n\n  @HostBinding('attr.data-full-width')\n  protected get dataFullWidth(): '' | null {\n    return this.fullWidth() ? '' : null;\n  }\n\n  // ---- Derived values for template ----\n  protected get effectiveValue(): string {\n    const v = this.usingCva ? this.cvaValue : this.value();\n    return v ?? '';\n  }\n\n  protected get effectiveDisabled(): boolean {\n    return this.cvaDisabled || this.disabled();\n  }\n\n  // ---- CVA ----\n  public writeValue(value: unknown): void {\n    this.usingCva = true;\n    this.cvaValue =\n      typeof value === 'string'\n        ? value\n        : value == null\n          ? null\n          : String(value);\n  }\n\n  public registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled = isDisabled;\n  }\n\n  // ---- DOM handlers ----\n  public onInput(event: unknown): void {\n    const next = readInputValue(event);\n    if (next === null) return;\n\n    // If disabled, ignore (optional safety)\n    if (this.effectiveDisabled) return;\n\n    // Keep CVA in sync when used\n    if (this.usingCva) {\n      if (this.cvaValue === next) {\n        // Still forward the raw event output if you want:\n        if (event instanceof Event) this.inputEvent.emit(event);\n        return;\n      }\n      this.cvaValue = next;\n      this.onChange(next);\n    }\n\n    // For controlled-input usage, emit valueChange always\n    this.valueChange.emit(next);\n\n    if (event instanceof Event) {\n      this.inputEvent.emit(event);\n    }\n  }\n\n  public onBlur(event: FocusEvent): void {\n    this.onTouched();\n    this.blurEvent.emit(event);\n  }\n\n  protected normalizeAttrValue(value: string | null | undefined): string | null {\n    return normalizeAttr(value);\n  }\n}"]}
+{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  forwardRef,\n  HostBinding,\n  input,\n  output,\n} from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\nimport type { ControlValueAccessor} from '@angular/forms';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n  coerceTngInputNullableBoolean,\n  TngInput,\n  type TngInputType,\n} from '@tailng-ui/primitives';\n\nimport {\n  TngFormFieldComponent,\n  type TngFormFieldAppearance,\n  type TngFormFieldSize,\n  type TngFormFieldTone,\n} from '../form-field/tng-form-field.component';\n\ntype NullableBooleanInput = boolean | null | string | undefined;\n\nfunction normalizeAttr(value: string | null | undefined): string | null {\n  if (value === undefined || value === null) return null;\n  const v = value.trim();\n  return v.length > 0 ? v : null;\n}\n\nfunction readInputValue(event: unknown): string | null {\n  if (!(event instanceof Event)) return null;\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement)) return null;\n  return target.value;\n}\n\n@Component({\n  selector: 'tng-input',\n  standalone: true,\n  imports: [TngFormFieldComponent, TngInput],\n  templateUrl: './tng-input.component.html',\n  styleUrl: './tng-input.component.css',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => TngInputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class TngInputComponent implements ControlValueAccessor {\n  // ---- Wrapper (form-field) appearance knobs ----\n  public readonly appearance = input<TngFormFieldAppearance>('outline');\n  public readonly size = input<TngFormFieldSize>('md');\n  public readonly tone = input<TngFormFieldTone>('neutral');\n  public readonly fullWidth = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n\n  // ---- Input API passthrough ----\n  public readonly ariaDescribedBy = input<string | null>(null);\n  public readonly ariaInvalid = input<boolean | null, NullableBooleanInput>(null, {\n    transform: coerceTngInputNullableBoolean,\n  });\n  public readonly ariaLabel = input<string | null>(null);\n  public readonly ariaLabelledby = input<string | null>(null);\n  public readonly ariaRequired = input<boolean | null, NullableBooleanInput>(null, {\n    transform: coerceTngInputNullableBoolean,\n  });\n\n  public readonly autocomplete = input<string | null>(null);\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly id = input<string | null>(null);\n  public readonly name = input<string | null>(null);\n  public readonly placeholder = input<string | null>(null);\n  public readonly readonly = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly required = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly type = input<TngInputType>('text');\n\n  /**\n   * Controlled value input (only used when NOT using CVA).\n   * If you bind [value], you should also listen to (valueChange) (or use signals).\n   */\n  public readonly value = input<string | null>(null);\n\n  // ---- Outputs ----\n  public readonly valueChange = output<string>();\n  public readonly inputEvent = output<Event>({ alias: 'input' });\n  public readonly blurEvent = output<FocusEvent>({ alias: 'blur' });\n\n  // ---- CVA state ----\n  private usingCva = false;\n  private cvaValue: string | null = null;\n  private cvaDisabled = false;\n\n  private onChange: (value: string) => void = () => undefined;\n  private onTouched: () => void = () => undefined;\n\n  // ---- Host attrs (optional, useful for styling/debug) ----\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'input-component' as const;\n\n  @HostBinding('attr.data-appearance')\n  protected get dataAppearance(): TngFormFieldAppearance {\n    return this.appearance();\n  }\n\n  @HostBinding('attr.data-size')\n  protected get dataSize(): TngFormFieldSize {\n    return this.size();\n  }\n\n  @HostBinding('attr.data-tone')\n  protected get dataTone(): TngFormFieldTone {\n    return this.tone();\n  }\n\n  @HostBinding('attr.data-full-width')\n  protected get dataFullWidth(): '' | null {\n    return this.fullWidth() ? '' : null;\n  }\n\n  // ---- Derived values for template ----\n  protected get effectiveValue(): string {\n    const v = this.usingCva ? this.cvaValue : this.value();\n    return v ?? '';\n  }\n\n  protected get effectiveDisabled(): boolean {\n    return this.cvaDisabled || this.disabled();\n  }\n\n  // ---- CVA ----\n  public writeValue(value: unknown): void {\n    this.usingCva = true;\n    this.cvaValue =\n      typeof value === 'string'\n        ? value\n        : value == null\n          ? null\n          : String(value);\n  }\n\n  public registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled = isDisabled;\n  }\n\n  // ---- DOM handlers ----\n  public onInput(event: unknown): void {\n    const next = readInputValue(event);\n    if (next === null) return;\n\n    // If disabled, ignore (optional safety)\n    if (this.effectiveDisabled) return;\n\n    // Keep CVA in sync when used\n    if (this.usingCva) {\n      if (this.cvaValue === next) {\n        // Still forward the raw event output if you want:\n        if (event instanceof Event) this.inputEvent.emit(event);\n        return;\n      }\n      this.cvaValue = next;\n      this.onChange(next);\n    }\n\n    // For controlled-input usage, emit valueChange always\n    this.valueChange.emit(next);\n\n    if (event instanceof Event) {\n      this.inputEvent.emit(event);\n    }\n  }\n\n  public onBlur(event: FocusEvent): void {\n    this.onTouched();\n    this.blurEvent.emit(event);\n  }\n\n  protected normalizeAttrValue(value: string | null | undefined): string | null {\n    return normalizeAttr(value);\n  }\n}","<tng-form-field\n  class=\"tng-input\"\n  [appearance]=\"appearance()\"\n  [size]=\"size()\"\n  [tone]=\"tone()\"\n  [fullWidth]=\"fullWidth()\"\n>\n  <input\n    tngInput\n    class=\"tng-input-control\"\n    [type]=\"type()\"\n    [disabled]=\"effectiveDisabled\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [ariaLabelledby]=\"ariaLabelledby()\"\n    [ariaDescribedBy]=\"ariaDescribedBy()\"\n    [ariaInvalid]=\"ariaInvalid()\"\n    [ariaRequired]=\"ariaRequired()\"\n    [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n    [attr.id]=\"normalizeAttrValue(id())\"\n    [attr.name]=\"normalizeAttrValue(name())\"\n    [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n    [value]=\"effectiveValue\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n</tng-form-field>"]}

package/src/lib/form/input-otp/tng-input-otp.component.d.ts

@@ -1,5 +1,6 @@
 import { AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
 export type TngInputOtpType = 'numeric' | 'alphanumeric' | 'custom';
 export type TngInputOtpInputMode = 'numeric' | 'text' | 'tel' | 'decimal';
 export declare function sanitizeTngOtpCharacters(value: string, mode: TngInputOtpType, pattern: string | RegExp | null): readonly string[];
@@ -81,5 +82,7 @@ export declare class TngInputOtpComponent implements AfterViewInit, ControlValue
     private isFocusWithinHost;
     private normalizeAndClamp;
     private attachFormResetListener;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TngInputOtpComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TngInputOtpComponent, "tng-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "complete": "complete"; }, never, never, true, never>;
 }
 //# sourceMappingURL=tng-input-otp.component.d.ts.map

package/src/lib/form/input-otp/tng-input-otp.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tng-input-otp.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input-otp/tng-input-otp.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tng-input-otp.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input-otp/tng-input-otp.component.ts"],"names":[],"mappings":"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"}

package/src/lib/form/input-otp/tng-input-otp.component.js

@@ -1,8 +1,8 @@
-import { __decorate } from "tslib";
 import { Component, computed, effect, ElementRef, forwardRef, inject, input, output, Renderer2, signal, } from '@angular/core';
 import { booleanAttribute } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { clampTngOtpValue, normalizeTngOtpLength, resolveTngOtpState, TngInputOtp as TngInputOtpPrimitive, } from '@tailng-ui/primitives';
+import * as i0 from "@angular/core";
 const tngOtpDigitPattern = /^\d$/;
 const tngOtpAlphanumericPattern = /^[a-zA-Z0-9]$/;
 let tngInputOtpInstanceCounter = 0;
@@ -101,7 +101,7 @@ function clampOtpIndex(index, length) {
     }
     return Math.trunc(index);
 }
-let TngInputOtpComponent = class TngInputOtpComponent {
+export class TngInputOtpComponent {
     hostRef = inject(ElementRef);
     renderer = inject(Renderer2);
     generatedId = `tng-input-otp-${++tngInputOtpInstanceCounter}`;
@@ -109,74 +109,58 @@ let TngInputOtpComponent = class TngInputOtpComponent {
     hasInitializedUncontrolled = false;
     onChangeCallback = () => undefined;
     onTouchedCallback = () => undefined;
-    uncontrolledValue = signal('');
-    formsDisabled = signal(false);
-    focusedState = signal(false);
-    focusVisibleState = signal(false);
-    keyboardInteraction = signal(false);
-    activeIndexState = signal(0);
-    length = input(6, {
-        transform: (value) => normalizeTngOtpLength(typeof value === 'number' ? value : Number(value)),
-    });
-    valueInput = input(undefined, { alias: 'value' });
-    defaultValue = input('');
-    type = input('numeric');
-    pattern = input(null);
-    mask = input(false, {
-        transform: booleanAttribute,
-    });
-    disabledInput = input(false, {
-        alias: 'disabled',
-        transform: booleanAttribute,
-    });
-    readonly = input(false, {
-        transform: booleanAttribute,
-    });
-    required = input(false, {
-        transform: booleanAttribute,
-    });
-    invalid = input(false, {
-        transform: booleanAttribute,
-    });
-    autoFocus = input(false, {
-        transform: booleanAttribute,
-    });
-    selectOnFocus = input(true, {
-        transform: booleanAttribute,
-    });
-    placeholderChar = input('');
-    name = input(null);
-    id = input(null);
-    form = input(null);
-    autocomplete = input('one-time-code');
-    inputMode = input(null);
-    ariaLabel = input(null);
-    ariaLabelledby = input(null);
-    ariaDescribedby = input(null);
+    uncontrolledValue = signal('', ...(ngDevMode ? [{ debugName: "uncontrolledValue" }] : []));
+    formsDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formsDisabled" }] : []));
+    focusedState = signal(false, ...(ngDevMode ? [{ debugName: "focusedState" }] : []));
+    focusVisibleState = signal(false, ...(ngDevMode ? [{ debugName: "focusVisibleState" }] : []));
+    keyboardInteraction = signal(false, ...(ngDevMode ? [{ debugName: "keyboardInteraction" }] : []));
+    activeIndexState = signal(0, ...(ngDevMode ? [{ debugName: "activeIndexState" }] : []));
+    length = input(6, { ...(ngDevMode ? { debugName: "length" } : {}), transform: (value) => normalizeTngOtpLength(typeof value === 'number' ? value : Number(value)) });
+    valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : {}), alias: 'value' });
+    defaultValue = input('', ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+    type = input('numeric', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    pattern = input(null, ...(ngDevMode ? [{ debugName: "pattern" }] : []));
+    mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : {}), transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled',
+        transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
+    autoFocus = input(false, { ...(ngDevMode ? { debugName: "autoFocus" } : {}), transform: booleanAttribute });
+    selectOnFocus = input(true, { ...(ngDevMode ? { debugName: "selectOnFocus" } : {}), transform: booleanAttribute });
+    placeholderChar = input('', ...(ngDevMode ? [{ debugName: "placeholderChar" }] : []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    autocomplete = input('one-time-code', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    inputMode = input(null, ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    ariaDescribedby = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : []));
     valueChange = output();
     complete = output();
-    disabled = computed(() => this.disabledInput() || this.formsDisabled());
-    focused = computed(() => this.focusedState());
-    focusVisible = computed(() => this.focusVisibleState());
-    activeIndex = computed(() => clampOtpIndex(this.activeIndexState(), this.length()));
-    rootId = computed(() => this.id() ?? this.generatedId);
+    disabled = computed(() => this.disabledInput() || this.formsDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    focused = computed(() => this.focusedState(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    focusVisible = computed(() => this.focusVisibleState(), ...(ngDevMode ? [{ debugName: "focusVisible" }] : []));
+    activeIndex = computed(() => clampOtpIndex(this.activeIndexState(), this.length()), ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    rootId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "rootId" }] : []));
     currentValue = computed(() => {
         const controlled = this.valueInput();
         if (controlled !== undefined) {
             return this.normalizeAndClamp(controlled ?? '');
         }
         return this.normalizeAndClamp(this.uncontrolledValue());
-    });
-    slots = computed(() => toTngOtpSlots(this.length(), this.currentValue()));
-    completionState = computed(() => resolveTngOtpState(this.length(), this.currentValue()));
+    }, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
+    slots = computed(() => toTngOtpSlots(this.length(), this.currentValue()), ...(ngDevMode ? [{ debugName: "slots" }] : []));
+    completionState = computed(() => resolveTngOtpState(this.length(), this.currentValue()), ...(ngDevMode ? [{ debugName: "completionState" }] : []));
     resolvedInputMode = computed(() => {
         const explicit = this.inputMode();
         if (explicit !== null) {
             return explicit;
         }
         return this.type() === 'numeric' ? 'numeric' : 'text';
-    });
-    slotInputType = computed(() => this.mask() ? 'password' : 'text');
+    }, ...(ngDevMode ? [{ debugName: "resolvedInputMode" }] : []));
+    slotInputType = computed(() => this.mask() ? 'password' : 'text', ...(ngDevMode ? [{ debugName: "slotInputType" }] : []));
     syncUncontrolledState = effect(() => {
         const controlled = this.valueInput();
         const length = this.length();
@@ -200,7 +184,7 @@ let TngInputOtpComponent = class TngInputOtpComponent {
             this.uncontrolledValue.set(normalizedCurrent);
         }
         this.activeIndexState.update((index) => clampOtpIndex(index, length));
-    });
+    }, ...(ngDevMode ? [{ debugName: "syncUncontrolledState" }] : []));
     ngAfterViewInit() {
         this.attachFormResetListener();
         if (!this.autoFocus() || this.disabled()) {
@@ -477,21 +461,23 @@ let TngInputOtpComponent = class TngInputOtpComponent {
             this.onChangeCallback(resetValue);
         });
     }
-};
-TngInputOtpComponent = __decorate([
-    Component({
-        selector: 'tng-input-otp',
-        imports: [TngInputOtpPrimitive],
-        templateUrl: './tng-input-otp.component.html',
-        styleUrl: './tng-input-otp.component.css',
-        providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TngInputOtpComponent, isStandalone: true, selector: "tng-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, placeholderChar: { classPropertyName: "placeholderChar", publicName: "placeholderChar", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TngInputOtpComponent),
                 multi: true,
             },
-        ],
-    })
-], TngInputOtpComponent);
-export { TngInputOtpComponent };
+        ], ngImport: i0, template: "<div\n  tngInputOtp\n  class=\"tng-input-otp-root\"\n  [id]=\"rootId()\"\n  [length]=\"length()\"\n  [value]=\"currentValue()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"required()\"\n  [invalid]=\"invalid()\"\n  [focused]=\"focused()\"\n  [focusVisible]=\"focusVisible()\"\n  [activeIndex]=\"activeIndex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n>\n  @for (slot of slots(); track $index) {\n    <input\n      class=\"tng-input-otp-slot\"\n      [attr.id]=\"rootId() + '-slot-' + $index\"\n      [attr.data-tng-otp-slot]=\"$index\"\n      [tabIndex]=\"isSlotTabbable($index) ? 0 : -1\"\n      [value]=\"slotValue($index)\"\n      [attr.placeholder]=\"slotPlaceholder($index)\"\n      [type]=\"slotInputType()\"\n      [inputMode]=\"resolvedInputMode()\"\n      [attr.autocomplete]=\"$index === 0 ? autocomplete() : 'off'\"\n      [attr.aria-label]=\"slotAriaLabel($index)\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      maxlength=\"1\"\n      (mousedown)=\"onSlotPointerDown()\"\n      (focus)=\"onSlotFocus($index, $event)\"\n      (blur)=\"onSlotBlur($event)\"\n      (keydown)=\"onSlotKeydown($index, $event)\"\n      (input)=\"onSlotInput($index, $event)\"\n      (paste)=\"onSlotPaste($index, $event)\"\n    />\n  }\n\n  <input\n    class=\"tng-input-otp-hidden-input\"\n    type=\"text\"\n    [value]=\"currentValue()\"\n    [attr.name]=\"name()\"\n    [attr.form]=\"form()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [attr.aria-hidden]=\"'true'\"\n    tabindex=\"-1\"\n  />\n</div>\n", styles: [":host {\n  display: inline-flex;\n  max-inline-size: 100%;\n}\n\n.tng-input-otp-root {\n  align-items: center;\n  column-gap: 0.5rem;\n  display: inline-flex;\n  inline-size: fit-content;\n  position: relative;\n}\n\n.tng-input-otp-slot {\n  appearance: none;\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-default);\n  border-radius: 0.56rem;\n  color: var(--tng-semantic-foreground-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n  inline-size: 2.45rem;\n  block-size: 2.6rem;\n  line-height: 1;\n  text-align: center;\n  transition:\n    border-color 0.15s ease,\n    box-shadow 0.15s ease,\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n.tng-input-otp-slot::placeholder {\n  color: var(--tng-semantic-foreground-muted);\n  font-weight: 500;\n}\n\n.tng-input-otp-slot:focus-visible {\n  border-color: var(--tng-semantic-accent-brand);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tng-semantic-accent-brand) 30%, transparent);\n  outline: none;\n}\n\n.tng-input-otp-slot[readonly] {\n  cursor: default;\n}\n\n.tng-input-otp-slot:disabled {\n  background: color-mix(in srgb, var(--tng-semantic-background-muted) 86%, transparent);\n  color: var(--tng-semantic-foreground-muted);\n  cursor: not-allowed;\n}\n\n.tng-input-otp-root[data-invalid] .tng-input-otp-slot {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-danger) 75%, var(--tng-semantic-border-default));\n}\n\n.tng-input-otp-root[data-focus-visible] .tng-input-otp-slot[data-tng-otp-slot] {\n  box-shadow: none;\n}\n\n.tng-input-otp-hidden-input {\n  block-size: 1px;\n  inline-size: 1px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n"], dependencies: [{ kind: "directive", type: TngInputOtpPrimitive, selector: "[tngInputOtp]", inputs: ["length", "value", "disabled", "readonly", "required", "invalid", "focused", "focusVisible", "activeIndex"], exportAs: ["tngInputOtp"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputOtpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-input-otp', imports: [TngInputOtpPrimitive], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngInputOtpComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  tngInputOtp\n  class=\"tng-input-otp-root\"\n  [id]=\"rootId()\"\n  [length]=\"length()\"\n  [value]=\"currentValue()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"required()\"\n  [invalid]=\"invalid()\"\n  [focused]=\"focused()\"\n  [focusVisible]=\"focusVisible()\"\n  [activeIndex]=\"activeIndex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n>\n  @for (slot of slots(); track $index) {\n    <input\n      class=\"tng-input-otp-slot\"\n      [attr.id]=\"rootId() + '-slot-' + $index\"\n      [attr.data-tng-otp-slot]=\"$index\"\n      [tabIndex]=\"isSlotTabbable($index) ? 0 : -1\"\n      [value]=\"slotValue($index)\"\n      [attr.placeholder]=\"slotPlaceholder($index)\"\n      [type]=\"slotInputType()\"\n      [inputMode]=\"resolvedInputMode()\"\n      [attr.autocomplete]=\"$index === 0 ? autocomplete() : 'off'\"\n      [attr.aria-label]=\"slotAriaLabel($index)\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      maxlength=\"1\"\n      (mousedown)=\"onSlotPointerDown()\"\n      (focus)=\"onSlotFocus($index, $event)\"\n      (blur)=\"onSlotBlur($event)\"\n      (keydown)=\"onSlotKeydown($index, $event)\"\n      (input)=\"onSlotInput($index, $event)\"\n      (paste)=\"onSlotPaste($index, $event)\"\n    />\n  }\n\n  <input\n    class=\"tng-input-otp-hidden-input\"\n    type=\"text\"\n    [value]=\"currentValue()\"\n    [attr.name]=\"name()\"\n    [attr.form]=\"form()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [attr.aria-hidden]=\"'true'\"\n    tabindex=\"-1\"\n  />\n</div>\n", styles: [":host {\n  display: inline-flex;\n  max-inline-size: 100%;\n}\n\n.tng-input-otp-root {\n  align-items: center;\n  column-gap: 0.5rem;\n  display: inline-flex;\n  inline-size: fit-content;\n  position: relative;\n}\n\n.tng-input-otp-slot {\n  appearance: none;\n  background: var(--tng-semantic-background-surface);\n  border: 1px solid var(--tng-semantic-border-default);\n  border-radius: 0.56rem;\n  color: var(--tng-semantic-foreground-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n  inline-size: 2.45rem;\n  block-size: 2.6rem;\n  line-height: 1;\n  text-align: center;\n  transition:\n    border-color 0.15s ease,\n    box-shadow 0.15s ease,\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n.tng-input-otp-slot::placeholder {\n  color: var(--tng-semantic-foreground-muted);\n  font-weight: 500;\n}\n\n.tng-input-otp-slot:focus-visible {\n  border-color: var(--tng-semantic-accent-brand);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tng-semantic-accent-brand) 30%, transparent);\n  outline: none;\n}\n\n.tng-input-otp-slot[readonly] {\n  cursor: default;\n}\n\n.tng-input-otp-slot:disabled {\n  background: color-mix(in srgb, var(--tng-semantic-background-muted) 86%, transparent);\n  color: var(--tng-semantic-foreground-muted);\n  cursor: not-allowed;\n}\n\n.tng-input-otp-root[data-invalid] .tng-input-otp-slot {\n  border-color: color-mix(in srgb, var(--tng-semantic-accent-danger) 75%, var(--tng-semantic-border-default));\n}\n\n.tng-input-otp-root[data-focus-visible] .tng-input-otp-slot[data-tng-otp-slot] {\n  box-shadow: none;\n}\n\n.tng-input-otp-hidden-input {\n  block-size: 1px;\n  inline-size: 1px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n"] }]
+        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], placeholderChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderChar", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
 //# sourceMappingURL=tng-input-otp.component.js.map