@tailng-ui/components 0.15.0 → 0.17.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tailng-ui/components",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/tailng/tailng-ui"
   },
   "dependencies": {
-    "@tailng-ui/primitives": "^0.15.0"
+    "@tailng-ui/primitives": "^0.19.0"
   },
   "peerDependencies": {
     "@angular/core": "^21.1.0",

package/src/lib/form/form-field/tng-form-field.component.d.ts

@@ -0,0 +1,15 @@
+export type TngFormFieldAppearance = 'outline' | 'solid' | 'ghost';
+export type TngFormFieldSize = 'sm' | 'md' | 'lg';
+export type TngFormFieldTone = 'neutral' | 'primary' | 'success' | 'danger';
+export declare class TngFormFieldComponent {
+    readonly appearance: import("@angular/core").InputSignal<TngFormFieldAppearance>;
+    readonly size: import("@angular/core").InputSignal<TngFormFieldSize>;
+    readonly tone: import("@angular/core").InputSignal<TngFormFieldTone>;
+    readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    protected readonly dataSlot: "form-field-wrapper";
+    protected get dataAppearance(): TngFormFieldAppearance;
+    protected get dataSize(): TngFormFieldSize;
+    protected get dataTone(): TngFormFieldTone;
+    protected get dataFullWidth(): '' | null;
+}
+//# sourceMappingURL=tng-form-field.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-form-field.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5E,qBAMa,qBAAqB;IAChC,SAAgB,UAAU,8DAA4C;IACtE,SAAgB,IAAI,wDAAiC;IACrD,SAAgB,IAAI,wDAAsC;IAE1D,SAAgB,SAAS,8EAEtB;IAGH,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,oBAAoB,CAAU;IAG5D,SAAS,KAAK,cAAc,IAAI,sBAAsB,CAErD;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,aAAa,IAAI,EAAE,GAAG,IAAI,CAEvC;CACF"}

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

@@ -0,0 +1,50 @@
+import { __decorate } from "tslib";
+import { Component, HostBinding, input } from '@angular/core';
+import { booleanAttribute } from '@angular/core';
+import { TngInputGroup, TngPrefix, TngSuffix } from '@tailng-ui/primitives';
+let TngFormFieldComponent = class TngFormFieldComponent {
+    appearance = input('outline');
+    size = input('md');
+    tone = input('neutral');
+    fullWidth = input(true, {
+        transform: booleanAttribute,
+    });
+    dataSlot = 'form-field-wrapper';
+    get dataAppearance() {
+        return this.appearance();
+    }
+    get dataSize() {
+        return this.size();
+    }
+    get dataTone() {
+        return this.tone();
+    }
+    get dataFullWidth() {
+        return this.fullWidth() ? '' : null;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngFormFieldComponent.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.data-appearance')
+], TngFormFieldComponent.prototype, "dataAppearance", null);
+__decorate([
+    HostBinding('attr.data-size')
+], TngFormFieldComponent.prototype, "dataSize", null);
+__decorate([
+    HostBinding('attr.data-tone')
+], TngFormFieldComponent.prototype, "dataTone", null);
+__decorate([
+    HostBinding('attr.data-full-width')
+], TngFormFieldComponent.prototype, "dataFullWidth", null);
+TngFormFieldComponent = __decorate([
+    Component({
+        selector: 'tng-form-field',
+        imports: [TngInputGroup, TngPrefix, TngSuffix],
+        templateUrl: './tng-form-field.component.html',
+        styleUrl: './tng-form-field.component.css',
+    })
+], TngFormFieldComponent);
+export { TngFormFieldComponent };
+//# sourceMappingURL=tng-form-field.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-form-field.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAYrE,IAAM,qBAAqB,GAA3B,MAAM,qBAAqB;IAChB,UAAU,GAAG,KAAK,CAAyB,SAAS,CAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAmB,IAAI,CAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAAmB,SAAS,CAAC,CAAC;IAE1C,SAAS,GAAG,KAAK,CAA4B,IAAI,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IAGgB,QAAQ,GAAG,oBAA6B,CAAC;IAG5D,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;CACF,CAAA;AArBoB;IADlB,WAAW,CAAC,gBAAgB,CAAC;uDAC8B;AAG5D;IADC,WAAW,CAAC,sBAAsB,CAAC;2DAGnC;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;qDAG7B;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;qDAG7B;AAGD;IADC,WAAW,CAAC,sBAAsB,CAAC;0DAGnC;AA9BU,qBAAqB;IANjC,SAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,CAAC;QAC9C,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE,gCAAgC;KAC3C,CAAC;GACW,qBAAqB,CA+BjC","sourcesContent":["import { Component, HostBinding, input } from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\n\nimport { TngInputGroup, TngPrefix, TngSuffix } from '@tailng-ui/primitives';\n\nexport type TngFormFieldAppearance = 'outline' | 'solid' | 'ghost';\nexport type TngFormFieldSize = 'sm' | 'md' | 'lg';\nexport type TngFormFieldTone = 'neutral' | 'primary' | 'success' | 'danger';\n\n@Component({\n  selector: 'tng-form-field',\n  imports: [TngInputGroup, TngPrefix, TngSuffix],\n  templateUrl: './tng-form-field.component.html',\n  styleUrl: './tng-form-field.component.css',\n})\nexport class TngFormFieldComponent {\n  public readonly appearance = input<TngFormFieldAppearance>('outline');\n  public readonly size = input<TngFormFieldSize>('md');\n  public readonly tone = input<TngFormFieldTone>('neutral');\n\n  public readonly fullWidth = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'form-field-wrapper' 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"]}

package/src/lib/form/index.d.ts

@@ -12,6 +12,8 @@ export * from './combobox/tng-combobox.component';
 export { TngComboboxComponent } from './combobox/tng-combobox.component';
 export * from './datepicker/tng-datepicker.component';
 export { TngDatepickerComponent } from './datepicker/tng-datepicker.component';
+export * from './form-field/tng-form-field.component';
+export { TngFormFieldComponent } from './form-field/tng-form-field.component';
 export * from './input/tng-input.component';
 export { TngInputComponent } from './input/tng-input.component';
 export * from './input-otp';

package/src/lib/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAC,MAAM,mDAAmD,CAAC;AACjG,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACxE,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACxE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,uDAAuD,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uDAAuD,CAAC;AACtG,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACxE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAC,MAAM,2CAA2C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mDAAmD,CAAC;AAClG,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,uDAAuD,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uDAAuD,CAAC;AACtG,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC"}

package/src/lib/form/index.js

@@ -12,6 +12,8 @@ export * from './combobox/tng-combobox.component';
 export { TngComboboxComponent } from './combobox/tng-combobox.component';
 export * from './datepicker/tng-datepicker.component';
 export { TngDatepickerComponent } from './datepicker/tng-datepicker.component';
+export * from './form-field/tng-form-field.component';
+export { TngFormFieldComponent } from './form-field/tng-form-field.component';
 export * from './input/tng-input.component';
 export { TngInputComponent } from './input/tng-input.component';
 export * from './input-otp';

package/src/lib/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAC,MAAM,mDAAmD,CAAC;AACjG,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACxE,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACxE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,uDAAuD,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uDAAuD,CAAC;AACtG,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AACxE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAC,MAAM,2CAA2C,CAAC","sourcesContent":["export * from './autocomplete/tng-autocomplete.component';\nexport { TngAutocompleteComponent } from './autocomplete/tng-autocomplete.component';\nexport * from './button-toggle/tng-button-toggle.component';\nexport { TngButtonToggleComponent } from './button-toggle/tng-button-toggle.component';\nexport * from './button-toggle/tng-button-toggle-group.component';\nexport { TngButtonToggleGroupComponent} from './button-toggle/tng-button-toggle-group.component';\nexport * from './checkbox/tng-checkbox.component';\nexport { TngCheckboxComponent} from './checkbox/tng-checkbox.component';\nexport * from './chips/tng-chips.component';\nexport { TngChipsComponent} from './chips/tng-chips.component';\nexport * from './combobox/tng-combobox.component';\nexport { TngComboboxComponent} from './combobox/tng-combobox.component';\nexport * from './datepicker/tng-datepicker.component';\nexport { TngDatepickerComponent } from './datepicker/tng-datepicker.component';\nexport * from './input/tng-input.component';\nexport { TngInputComponent} from './input/tng-input.component';\nexport * from './input-otp';\nexport { TngInputOtpComponent } from './input-otp';\nexport * from './label/tng-label.component';\nexport { TngLabelComponent} from './label/tng-label.component';\nexport * from './multi-autocomplete/tng-multi-autocomplete.component';\nexport { TngMultiAutocompleteComponent } from './multi-autocomplete/tng-multi-autocomplete.component';\nexport * from './multiselect/tng-multiselect.component';\nexport { TngMultiSelectComponent } from './multiselect/tng-multiselect.component';\nexport * from './radio/tng-radio.component';\nexport { TngRadioComponent} from './radio/tng-radio.component';\nexport * from './select/tng-select.component';\nexport { TngSelectComponent} from './select/tng-select.component';\nexport * from './slider/tng-slider.component';\nexport { TngSliderComponent} from './slider/tng-slider.component';\nexport * from './switch/tng-switch.component';\nexport { TngSwitchComponent} from './switch/tng-switch.component';\nexport * from './textarea/tng-textarea.component';\nexport { TngTextareaComponent} from './textarea/tng-textarea.component';\nexport * from './toggle/tng-toggle.component';\nexport { TngToggleComponent} from './toggle/tng-toggle.component';\nexport * from './toggle-group/tng-toggle-group.component';\nexport { TngToggleGroupComponent} from './toggle-group/tng-toggle-group.component';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mDAAmD,CAAC;AAClG,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,uDAAuD,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uDAAuD,CAAC;AACtG,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC","sourcesContent":["export * from './autocomplete/tng-autocomplete.component';\nexport { TngAutocompleteComponent } from './autocomplete/tng-autocomplete.component';\nexport * from './button-toggle/tng-button-toggle.component';\nexport { TngButtonToggleComponent } from './button-toggle/tng-button-toggle.component';\nexport * from './button-toggle/tng-button-toggle-group.component';\nexport { TngButtonToggleGroupComponent } from './button-toggle/tng-button-toggle-group.component';\nexport * from './checkbox/tng-checkbox.component';\nexport { TngCheckboxComponent } from './checkbox/tng-checkbox.component';\nexport * from './chips/tng-chips.component';\nexport { TngChipsComponent } from './chips/tng-chips.component';\nexport * from './combobox/tng-combobox.component';\nexport { TngComboboxComponent } from './combobox/tng-combobox.component';\nexport * from './datepicker/tng-datepicker.component';\nexport { TngDatepickerComponent } from './datepicker/tng-datepicker.component';\nexport * from './form-field/tng-form-field.component';\nexport { TngFormFieldComponent } from './form-field/tng-form-field.component';\nexport * from './input/tng-input.component';\nexport { TngInputComponent } from './input/tng-input.component';\nexport * from './input-otp';\nexport { TngInputOtpComponent } from './input-otp';\nexport * from './label/tng-label.component';\nexport { TngLabelComponent } from './label/tng-label.component';\nexport * from './multi-autocomplete/tng-multi-autocomplete.component';\nexport { TngMultiAutocompleteComponent } from './multi-autocomplete/tng-multi-autocomplete.component';\nexport * from './multiselect/tng-multiselect.component';\nexport { TngMultiSelectComponent } from './multiselect/tng-multiselect.component';\nexport * from './radio/tng-radio.component';\nexport { TngRadioComponent } from './radio/tng-radio.component';\nexport * from './select/tng-select.component';\nexport { TngSelectComponent } from './select/tng-select.component';\nexport * from './slider/tng-slider.component';\nexport { TngSliderComponent } from './slider/tng-slider.component';\nexport * from './switch/tng-switch.component';\nexport { TngSwitchComponent } from './switch/tng-switch.component';\nexport * from './textarea/tng-textarea.component';\nexport { TngTextareaComponent } from './textarea/tng-textarea.component';\nexport * from './toggle/tng-toggle.component';\nexport { TngToggleComponent } from './toggle/tng-toggle.component';\nexport * from './toggle-group/tng-toggle-group.component';\nexport { TngToggleGroupComponent } from './toggle-group/tng-toggle-group.component';\n"]}

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

@@ -1,16 +1,52 @@
-export type TngInputAppearance = 'outline' | 'solid' | 'ghost';
-export type TngInputSize = 'sm' | 'md' | 'lg';
-export type TngInputTone = 'neutral' | 'primary' | 'success' | 'danger';
-export declare class TngInputComponent {
-    readonly appearance: import("@angular/core").InputSignal<TngInputAppearance>;
-    readonly size: import("@angular/core").InputSignal<TngInputSize>;
-    readonly tone: import("@angular/core").InputSignal<TngInputTone>;
-    /** Default true so forms look consistent out-of-the-box */
+import type { ControlValueAccessor } from '@angular/forms';
+import { type TngInputType } from '@tailng-ui/primitives';
+import { type TngFormFieldAppearance, type TngFormFieldSize, type TngFormFieldTone } from '../form-field/tng-form-field.component';
+type NullableBooleanInput = boolean | null | string | undefined;
+export declare class TngInputComponent implements ControlValueAccessor {
+    readonly appearance: import("@angular/core").InputSignal<TngFormFieldAppearance>;
+    readonly size: import("@angular/core").InputSignal<TngFormFieldSize>;
+    readonly tone: import("@angular/core").InputSignal<TngFormFieldTone>;
     readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
-    protected readonly dataSlot: "input-wrapper";
-    protected get dataAppearance(): TngInputAppearance;
-    protected get dataSize(): TngInputSize;
-    protected get dataTone(): TngInputTone;
+    readonly ariaDescribedBy: import("@angular/core").InputSignal<string | null>;
+    readonly ariaInvalid: import("@angular/core").InputSignalWithTransform<boolean | null, NullableBooleanInput>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
+    readonly ariaLabelledby: import("@angular/core").InputSignal<string | null>;
+    readonly ariaRequired: import("@angular/core").InputSignalWithTransform<boolean | null, NullableBooleanInput>;
+    readonly autocomplete: import("@angular/core").InputSignal<string | null>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly id: import("@angular/core").InputSignal<string | null>;
+    readonly name: import("@angular/core").InputSignal<string | null>;
+    readonly placeholder: import("@angular/core").InputSignal<string | null>;
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly type: import("@angular/core").InputSignal<TngInputType>;
+    /**
+     * Controlled value input (only used when NOT using CVA).
+     * If you bind [value], you should also listen to (valueChange) (or use signals).
+     */
+    readonly value: import("@angular/core").InputSignal<string | null>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+    readonly inputEvent: import("@angular/core").OutputEmitterRef<Event>;
+    readonly blurEvent: import("@angular/core").OutputEmitterRef<FocusEvent>;
+    private usingCva;
+    private cvaValue;
+    private cvaDisabled;
+    private onChange;
+    private onTouched;
+    protected readonly dataSlot: "input-component";
+    protected get dataAppearance(): TngFormFieldAppearance;
+    protected get dataSize(): TngFormFieldSize;
+    protected get dataTone(): TngFormFieldTone;
     protected get dataFullWidth(): '' | null;
+    protected get effectiveValue(): string;
+    protected get effectiveDisabled(): boolean;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInput(event: unknown): void;
+    onBlur(event: FocusEvent): void;
+    protected normalizeAttrValue(value: string | null | undefined): string | null;
 }
+export {};
 //# sourceMappingURL=tng-input.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tng-input.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,qBAMa,iBAAiB;IAC5B,SAAgB,UAAU,0DAAwC;IAClE,SAAgB,IAAI,oDAA6B;IACjD,SAAgB,IAAI,oDAAkC;IAEtD,2DAA2D;IAC3D,SAAgB,SAAS,8EAEtB;IAGH,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAU;IAGvD,SAAS,KAAK,cAAc,IAAI,kBAAkB,CAEjD;IAGD,SAAS,KAAK,QAAQ,IAAI,YAAY,CAErC;IAGD,SAAS,KAAK,QAAQ,IAAI,YAAY,CAErC;IAGD,SAAS,KAAK,aAAa,IAAI,EAAE,GAAG,IAAI,CAEvC;CACF"}
+{"version":3,"file":"tng-input.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,wCAAwC,CAAC;AAEhD,KAAK,oBAAoB,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAehE,qBAca,iBAAkB,YAAW,oBAAoB;IAE5D,SAAgB,UAAU,8DAA4C;IACtE,SAAgB,IAAI,wDAAiC;IACrD,SAAgB,IAAI,wDAAsC;IAC1D,SAAgB,SAAS,8EAEtB;IAGH,SAAgB,eAAe,qDAA8B;IAC7D,SAAgB,WAAW,yFAExB;IACH,SAAgB,SAAS,qDAA8B;IACvD,SAAgB,cAAc,qDAA8B;IAC5D,SAAgB,YAAY,yFAEzB;IAEH,SAAgB,YAAY,qDAA8B;IAC1D,SAAgB,QAAQ,8EAErB;IACH,SAAgB,EAAE,qDAA8B;IAChD,SAAgB,IAAI,qDAA8B;IAClD,SAAgB,WAAW,qDAA8B;IACzD,SAAgB,QAAQ,8EAErB;IACH,SAAgB,QAAQ,8EAErB;IACH,SAAgB,IAAI,oDAA+B;IAEnD;;;OAGG;IACH,SAAgB,KAAK,qDAA8B;IAGnD,SAAgB,WAAW,mDAAoB;IAC/C,SAAgB,UAAU,kDAAqC;IAC/D,SAAgB,SAAS,uDAAyC;IAGlE,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,QAAQ,CAA4C;IAC5D,OAAO,CAAC,SAAS,CAA+B;IAIhD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,iBAAiB,CAAU;IAGzD,SAAS,KAAK,cAAc,IAAI,sBAAsB,CAErD;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,aAAa,IAAI,EAAE,GAAG,IAAI,CAEvC;IAGD,SAAS,KAAK,cAAc,IAAI,MAAM,CAGrC;IAED,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;IAGM,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAUhC,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;IAInD,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAK3C,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IA0B7B,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKtC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI;CAG9E"}

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

@@ -1,16 +1,72 @@
 import { __decorate } from "tslib";
-import { Component, HostBinding, input } from '@angular/core';
+import { Component, forwardRef, HostBinding, input, output, } from '@angular/core';
 import { booleanAttribute } from '@angular/core';
-import { TngInputGroup, TngInputLeading, TngInputTrailing } from '@tailng-ui/primitives';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { coerceTngInputNullableBoolean, TngInput, } from '@tailng-ui/primitives';
+import { TngFormFieldComponent, } from '../form-field/tng-form-field.component';
+function normalizeAttr(value) {
+    if (value === undefined || value === null)
+        return null;
+    const v = value.trim();
+    return v.length > 0 ? v : null;
+}
+function readInputValue(event) {
+    if (!(event instanceof Event))
+        return null;
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement))
+        return null;
+    return target.value;
+}
 let TngInputComponent = class TngInputComponent {
+    // ---- Wrapper (form-field) appearance knobs ----
     appearance = input('outline');
     size = input('md');
     tone = input('neutral');
-    /** Default true so forms look consistent out-of-the-box */
     fullWidth = input(true, {
         transform: booleanAttribute,
     });
-    dataSlot = 'input-wrapper';
+    // ---- 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');
+    /**
+     * 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);
+    // ---- Outputs ----
+    valueChange = output();
+    inputEvent = output({ alias: 'input' });
+    blurEvent = output({ alias: 'blur' });
+    // ---- CVA state ----
+    usingCva = false;
+    cvaValue = null;
+    cvaDisabled = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    // ---- Host attrs (optional, useful for styling/debug) ----
+    dataSlot = 'input-component';
     get dataAppearance() {
         return this.appearance();
     }
@@ -23,6 +79,65 @@ let TngInputComponent = class TngInputComponent {
     get dataFullWidth() {
         return this.fullWidth() ? '' : null;
     }
+    // ---- Derived values for template ----
+    get effectiveValue() {
+        const v = this.usingCva ? this.cvaValue : this.value();
+        return v ?? '';
+    }
+    get effectiveDisabled() {
+        return this.cvaDisabled || this.disabled();
+    }
+    // ---- CVA ----
+    writeValue(value) {
+        this.usingCva = true;
+        this.cvaValue =
+            typeof value === 'string'
+                ? value
+                : value == null
+                    ? null
+                    : String(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled = isDisabled;
+    }
+    // ---- DOM handlers ----
+    onInput(event) {
+        const next = readInputValue(event);
+        if (next === null)
+            return;
+        // If disabled, ignore (optional safety)
+        if (this.effectiveDisabled)
+            return;
+        // Keep CVA in sync when used
+        if (this.usingCva) {
+            if (this.cvaValue === next) {
+                // Still forward the raw event output if you want:
+                if (event instanceof Event)
+                    this.inputEvent.emit(event);
+                return;
+            }
+            this.cvaValue = next;
+            this.onChange(next);
+        }
+        // For controlled-input usage, emit valueChange always
+        this.valueChange.emit(next);
+        if (event instanceof Event) {
+            this.inputEvent.emit(event);
+        }
+    }
+    onBlur(event) {
+        this.onTouched();
+        this.blurEvent.emit(event);
+    }
+    normalizeAttrValue(value) {
+        return normalizeAttr(value);
+    }
 };
 __decorate([
     HostBinding('attr.data-slot')
@@ -42,9 +157,17 @@ __decorate([
 TngInputComponent = __decorate([
     Component({
         selector: 'tng-input',
-        imports: [TngInputGroup, TngInputLeading, TngInputTrailing],
+        standalone: true,
+        imports: [TngFormFieldComponent, TngInput],
         templateUrl: './tng-input.component.html',
         styleUrl: './tng-input.component.css',
+        providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngInputComponent),
+                multi: true,
+            },
+        ],
     })
 ], TngInputComponent);
 export { TngInputComponent };

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":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAYlF,IAAM,iBAAiB,GAAvB,MAAM,iBAAiB;IACZ,UAAU,GAAG,KAAK,CAAqB,SAAS,CAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAe,IAAI,CAAC,CAAC;IACjC,IAAI,GAAG,KAAK,CAAe,SAAS,CAAC,CAAC;IAEtD,2DAA2D;IAC3C,SAAS,GAAG,KAAK,CAA4B,IAAI,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IAGgB,QAAQ,GAAG,eAAwB,CAAC;IAGvD,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;CACF,CAAA;AArBoB;IADlB,WAAW,CAAC,gBAAgB,CAAC;mDACyB;AAGvD;IADC,WAAW,CAAC,sBAAsB,CAAC;uDAGnC;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;iDAG7B;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;iDAG7B;AAGD;IADC,WAAW,CAAC,sBAAsB,CAAC;sDAGnC;AA/BU,iBAAiB;IAN7B,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,OAAO,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,gBAAgB,CAAC;QAC3D,WAAW,EAAE,4BAA4B;QACzC,QAAQ,EAAE,2BAA2B;KACtC,CAAC;GACW,iBAAiB,CAgC7B","sourcesContent":["import { Component, HostBinding, input } from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\n\nimport { TngInputGroup, TngInputLeading, TngInputTrailing } from '@tailng-ui/primitives';\n\nexport type TngInputAppearance = 'outline' | 'solid' | 'ghost';\nexport type TngInputSize = 'sm' | 'md' | 'lg';\nexport type TngInputTone = 'neutral' | 'primary' | 'success' | 'danger';\n\n@Component({\n  selector: 'tng-input',\n  imports: [TngInputGroup, TngInputLeading, TngInputTrailing],\n  templateUrl: './tng-input.component.html',\n  styleUrl: './tng-input.component.css',\n})\nexport class TngInputComponent {\n  public readonly appearance = input<TngInputAppearance>('outline');\n  public readonly size = input<TngInputSize>('md');\n  public readonly tone = input<TngInputTone>('neutral');\n\n  /** Default true so forms look consistent out-of-the-box */\n  public readonly fullWidth = input<boolean, boolean | string>(true, {\n    transform: booleanAttribute,\n  });\n\n  @HostBinding('attr.data-slot')\n  protected readonly dataSlot = 'input-wrapper' as const;\n\n  @HostBinding('attr.data-appearance')\n  protected get dataAppearance(): TngInputAppearance {\n    return this.appearance();\n  }\n\n  @HostBinding('attr.data-size')\n  protected get dataSize(): TngInputSize {\n    return this.size();\n  }\n\n  @HostBinding('attr.data-tone')\n  protected get dataTone(): TngInputTone {\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"]}
+{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EACL,6BAA6B,EAC7B,QAAQ,GAET,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,qBAAqB,GAItB,MAAM,wCAAwC,CAAC;AAIhD,SAAS,aAAa,CAAC,KAAgC;IACrD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACvD,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IACvB,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACjC,CAAC;AAED,SAAS,cAAc,CAAC,KAAc;IACpC,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAC3C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC;QAAE,OAAO,IAAI,CAAC;IACvD,OAAO,MAAM,CAAC,KAAK,CAAC;AACtB,CAAC;AAgBM,IAAM,iBAAiB,GAAvB,MAAM,iBAAiB;IAC5B,kDAAkD;IAClC,UAAU,GAAG,KAAK,CAAyB,SAAS,CAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAmB,IAAI,CAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAAmB,SAAS,CAAC,CAAC;IAC1C,SAAS,GAAG,KAAK,CAA4B,IAAI,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IAEH,kCAAkC;IAClB,eAAe,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IAC7C,WAAW,GAAG,KAAK,CAAuC,IAAI,EAAE;QAC9E,SAAS,EAAE,6BAA6B;KACzC,CAAC,CAAC;IACa,SAAS,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IACvC,cAAc,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IAC5C,YAAY,GAAG,KAAK,CAAuC,IAAI,EAAE;QAC/E,SAAS,EAAE,6BAA6B;KACzC,CAAC,CAAC;IAEa,YAAY,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IAC1C,QAAQ,GAAG,KAAK,CAA4B,KAAK,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IACa,EAAE,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IAChC,IAAI,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IAClC,WAAW,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IACzC,QAAQ,GAAG,KAAK,CAA4B,KAAK,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IACa,QAAQ,GAAG,KAAK,CAA4B,KAAK,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IACa,IAAI,GAAG,KAAK,CAAe,MAAM,CAAC,CAAC;IAEnD;;;OAGG;IACa,KAAK,GAAG,KAAK,CAAgB,IAAI,CAAC,CAAC;IAEnD,oBAAoB;IACJ,WAAW,GAAG,MAAM,EAAU,CAAC;IAC/B,UAAU,GAAG,MAAM,CAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/C,SAAS,GAAG,MAAM,CAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAElE,sBAAsB;IACd,QAAQ,GAAG,KAAK,CAAC;IACjB,QAAQ,GAAkB,IAAI,CAAC;IAC/B,WAAW,GAAG,KAAK,CAAC;IAEpB,QAAQ,GAA4B,GAAG,EAAE,CAAC,SAAS,CAAC;IACpD,SAAS,GAAe,GAAG,EAAE,CAAC,SAAS,CAAC;IAEhD,4DAA4D;IAEzC,QAAQ,GAAG,iBAA0B,CAAC;IAGzD,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;IAED,wCAAwC;IACxC,IAAc,cAAc;QAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACvD,OAAO,CAAC,IAAI,EAAE,CAAC;IACjB,CAAC;IAED,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC7C,CAAC;IAED,gBAAgB;IACT,UAAU,CAAC,KAAc;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,QAAQ;YACX,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,KAAK,IAAI,IAAI;oBACb,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAEM,gBAAgB,CAAC,EAA2B;QACjD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACrB,CAAC;IAEM,iBAAiB,CAAC,EAAc;QACrC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IAEM,gBAAgB,CAAC,UAAmB;QACzC,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAChC,CAAC;IAED,yBAAyB;IAClB,OAAO,CAAC,KAAc;QAC3B,MAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAE1B,wCAAwC;QACxC,IAAI,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAEnC,6BAA6B;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,kDAAkD;gBAClD,IAAI,KAAK,YAAY,KAAK;oBAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACxD,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,sDAAsD;QACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5B,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAEM,MAAM,CAAC,KAAiB;QAC7B,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAES,kBAAkB,CAAC,KAAgC;QAC3D,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;CACF,CAAA;AA1FoB;IADlB,WAAW,CAAC,gBAAgB,CAAC;mDAC2B;AAGzD;IADC,WAAW,CAAC,sBAAsB,CAAC;uDAGnC;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;iDAG7B;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;iDAG7B;AAGD;IADC,WAAW,CAAC,sBAAsB,CAAC;sDAGnC;AA5EU,iBAAiB;IAd7B,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC;QAC1C,WAAW,EAAE,4BAA4B;QACzC,QAAQ,EAAE,2BAA2B;QACrC,SAAS,EAAE;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC;gBAChD,KAAK,EAAE,IAAI;aACZ;SACF;KACF,CAAC;GACW,iBAAiB,CAkJ7B","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}"]}