@tailng-ui/components 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-chips.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/chips/tng-chips.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAQ/D,IAAM,iBAAiB,GAAvB,MAAM,iBAAiB;IACZ,SAAS,GAAG,KAAK,CAAS,OAAO,CAAC,CAAC;CACpD,CAAA;AAFY,iBAAiB;IAN7B,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,OAAO,EAAE,CAAC,iBAAiB,CAAC;QAC5B,WAAW,EAAE,4BAA4B;QACzC,QAAQ,EAAE,2BAA2B;KACtC,CAAC;GACW,iBAAiB,CAE7B","sourcesContent":["import { Component, input } from '@angular/core';\nimport { TngChips as TngChipsPrimitive } from '@tailng-ui/primitives';\n\n@Component({\n  selector: 'tng-chips',\n  imports: [TngChipsPrimitive],\n  templateUrl: './tng-chips.component.html',\n  styleUrl: './tng-chips.component.css',\n})\nexport class TngChipsComponent {\n  public readonly ariaLabel = input<string>('Chips');\n}\n"]}

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

@@ -0,0 +1,4 @@
+export declare class TngComboboxComponent {
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+}
+//# sourceMappingURL=tng-combobox.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-combobox.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/combobox/tng-combobox.component.ts"],"names":[],"mappings":"AAGA,qBAMa,oBAAoB;IAC/B,SAAgB,SAAS,8CAA6B;CACvD"}

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

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { Component, input } from '@angular/core';
+import { TngCombobox as TngComboboxPrimitive } from '@tailng-ui/primitives';
+let TngComboboxComponent = class TngComboboxComponent {
+    ariaLabel = input('Combobox');
+};
+TngComboboxComponent = __decorate([
+    Component({
+        selector: 'tng-combobox',
+        imports: [TngComboboxPrimitive],
+        templateUrl: './tng-combobox.component.html',
+        styleUrl: './tng-combobox.component.css',
+    })
+], TngComboboxComponent);
+export { TngComboboxComponent };
+//# sourceMappingURL=tng-combobox.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-combobox.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/combobox/tng-combobox.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAQrE,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IACf,SAAS,GAAG,KAAK,CAAS,UAAU,CAAC,CAAC;CACvD,CAAA;AAFY,oBAAoB;IANhC,SAAS,CAAC;QACT,QAAQ,EAAE,cAAc;QACxB,OAAO,EAAE,CAAC,oBAAoB,CAAC;QAC/B,WAAW,EAAE,+BAA+B;QAC5C,QAAQ,EAAE,8BAA8B;KACzC,CAAC;GACW,oBAAoB,CAEhC","sourcesContent":["import { Component, input } from '@angular/core';\nimport { TngCombobox as TngComboboxPrimitive } from '@tailng-ui/primitives';\n\n@Component({\n  selector: 'tng-combobox',\n  imports: [TngComboboxPrimitive],\n  templateUrl: './tng-combobox.component.html',\n  styleUrl: './tng-combobox.component.css',\n})\nexport class TngComboboxComponent {\n  public readonly ariaLabel = input<string>('Combobox');\n}\n"]}

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

@@ -0,0 +1,37 @@
+export * from './autocomplete/tng-autocomplete.component';
+export { TngAutocompleteComponent } from './autocomplete/tng-autocomplete.component';
+export * from './button-toggle/tng-button-toggle.component';
+export { TngButtonToggleComponent } from './button-toggle/tng-button-toggle.component';
+export * from './button-toggle/tng-button-toggle-group.component';
+export { TngButtonToggleGroupComponent } from './button-toggle/tng-button-toggle-group.component';
+export * from './checkbox/tng-checkbox.component';
+export { TngCheckboxComponent } from './checkbox/tng-checkbox.component';
+export * from './chips/tng-chips.component';
+export { TngChipsComponent } from './chips/tng-chips.component';
+export * from './combobox/tng-combobox.component';
+export { TngComboboxComponent } from './combobox/tng-combobox.component';
+export * from './input/tng-input.component';
+export { TngInputComponent } from './input/tng-input.component';
+export * from './input-otp/tng-input-otp.component';
+export { TngInputOtpComponent } from './input-otp/tng-input-otp.component';
+export * from './label/tng-label.component';
+export { TngLabelComponent } from './label/tng-label.component';
+export * from './multi-autocomplete/tng-multi-autocomplete.component';
+export { TngMultiAutocompleteComponent } from './multi-autocomplete/tng-multi-autocomplete.component';
+export * from './multiselect/tng-multiselect.component';
+export { TngMultiSelectComponent } from './multiselect/tng-multiselect.component';
+export * from './radio/tng-radio.component';
+export { TngRadioComponent } from './radio/tng-radio.component';
+export * from './select/tng-select.component';
+export { TngSelectComponent } from './select/tng-select.component';
+export * from './slider/tng-slider.component';
+export { TngSliderComponent } from './slider/tng-slider.component';
+export * from './switch/tng-switch.component';
+export { TngSwitchComponent } from './switch/tng-switch.component';
+export * from './textarea/tng-textarea.component';
+export { TngTextareaComponent } from './textarea/tng-textarea.component';
+export * from './toggle/tng-toggle.component';
+export { TngToggleComponent } from './toggle/tng-toggle.component';
+export * from './toggle-group/tng-toggle-group.component';
+export { TngToggleGroupComponent } from './toggle-group/tng-toggle-group.component';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AAC1E,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"}

package/src/lib/form/index.js

@@ -0,0 +1,37 @@
+export * from './autocomplete/tng-autocomplete.component';
+export { TngAutocompleteComponent } from './autocomplete/tng-autocomplete.component';
+export * from './button-toggle/tng-button-toggle.component';
+export { TngButtonToggleComponent } from './button-toggle/tng-button-toggle.component';
+export * from './button-toggle/tng-button-toggle-group.component';
+export { TngButtonToggleGroupComponent } from './button-toggle/tng-button-toggle-group.component';
+export * from './checkbox/tng-checkbox.component';
+export { TngCheckboxComponent } from './checkbox/tng-checkbox.component';
+export * from './chips/tng-chips.component';
+export { TngChipsComponent } from './chips/tng-chips.component';
+export * from './combobox/tng-combobox.component';
+export { TngComboboxComponent } from './combobox/tng-combobox.component';
+export * from './input/tng-input.component';
+export { TngInputComponent } from './input/tng-input.component';
+export * from './input-otp/tng-input-otp.component';
+export { TngInputOtpComponent } from './input-otp/tng-input-otp.component';
+export * from './label/tng-label.component';
+export { TngLabelComponent } from './label/tng-label.component';
+export * from './multi-autocomplete/tng-multi-autocomplete.component';
+export { TngMultiAutocompleteComponent } from './multi-autocomplete/tng-multi-autocomplete.component';
+export * from './multiselect/tng-multiselect.component';
+export { TngMultiSelectComponent } from './multiselect/tng-multiselect.component';
+export * from './radio/tng-radio.component';
+export { TngRadioComponent } from './radio/tng-radio.component';
+export * from './select/tng-select.component';
+export { TngSelectComponent } from './select/tng-select.component';
+export * from './slider/tng-slider.component';
+export { TngSliderComponent } from './slider/tng-slider.component';
+export * from './switch/tng-switch.component';
+export { TngSwitchComponent } from './switch/tng-switch.component';
+export * from './textarea/tng-textarea.component';
+export { TngTextareaComponent } from './textarea/tng-textarea.component';
+export * from './toggle/tng-toggle.component';
+export { TngToggleComponent } from './toggle/tng-toggle.component';
+export * from './toggle-group/tng-toggle-group.component';
+export { TngToggleGroupComponent } from './toggle-group/tng-toggle-group.component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AAC1E,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 './input/tng-input.component';\nexport { TngInputComponent} from './input/tng-input.component';\nexport * from './input-otp/tng-input-otp.component';\nexport { TngInputOtpComponent} from './input-otp/tng-input-otp.component';\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

@@ -0,0 +1,16 @@
+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 */
+    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;
+    protected get dataFullWidth(): '' | null;
+}
+//# sourceMappingURL=tng-input.component.d.ts.map

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

@@ -0,0 +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,qBAOa,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"}

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

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { Component, HostBinding, input } from '@angular/core';
+import { booleanAttribute } from '@angular/core';
+import { TngInputGroup, TngInputLeading, TngInputTrailing } from '@tailng-ui/primitives';
+let TngInputComponent = class TngInputComponent {
+    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';
+    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')
+], 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: [TngInputGroup, TngInputLeading, TngInputTrailing],
+        templateUrl: './tng-input.component.html',
+        styleUrl: './tng-input.component.css',
+    })
+], TngInputComponent);
+export { TngInputComponent };
+//# sourceMappingURL=tng-input.component.js.map

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

@@ -0,0 +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;AAalF,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;IAP7B,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,UAAU,EAAE,IAAI;QAChB,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  standalone: true,\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"]}

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

@@ -0,0 +1,13 @@
+export declare function sanitizeTngOtpValue(value: string): string;
+export declare function applyTngOtpSlotValue(slots: readonly string[], index: number, nextValue: string): readonly string[];
+export declare class TngInputOtpComponent {
+    readonly length: import("@angular/core").InputSignalWithTransform<number, string | number>;
+    readonly value: import("@angular/core").InputSignal<string>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+    readonly complete: import("@angular/core").OutputEmitterRef<string>;
+    protected readonly slots: import("@angular/core").Signal<readonly string[]>;
+    protected onSlotInput(index: number, event: unknown): void;
+    protected onSlotKeydown(index: number, event: unknown): void;
+    protected onSlotsPaste(event: unknown): void;
+}
+//# sourceMappingURL=tng-input-otp.component.d.ts.map

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

@@ -0,0 +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":"AAqBA,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAChB,SAAS,MAAM,EAAE,CAQnB;AA2DD,qBAMa,oBAAoB;IAC/B,SAAgB,MAAM,4EAGnB;IACH,SAAgB,KAAK,8CAAqB;IAE1C,SAAgB,WAAW,mDAAoB;IAC/C,SAAgB,QAAQ,mDAAoB;IAE5C,SAAS,CAAC,QAAQ,CAAC,KAAK,oDAEtB;IAEF,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAmB1D,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAoB5D,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;CAqB7C"}

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

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import { Component, computed, input, output } from '@angular/core';
+import { normalizeTngOtpLength, TngInputOtp as TngInputOtpPrimitive } from '@tailng-ui/primitives';
+function toOtpSlots(length, value) {
+    const slots = Array.from({ length }, () => '');
+    for (const [index, char] of Array.from(value).entries()) {
+        if (index >= length) {
+            break;
+        }
+        slots[index] = char;
+    }
+    return slots;
+}
+function joinOtpSlots(slots) {
+    return slots.join('');
+}
+export function sanitizeTngOtpValue(value) {
+    return value.replace(/[^a-zA-Z0-9]/g, '');
+}
+export function applyTngOtpSlotValue(slots, index, nextValue) {
+    if (index < 0 || index >= slots.length) {
+        return slots;
+    }
+    const nextSlots = [...slots];
+    nextSlots[index] = sanitizeTngOtpValue(nextValue).slice(0, 1);
+    return nextSlots;
+}
+function isFilledOtp(slots) {
+    return slots.every((slot) => slot.length === 1);
+}
+function focusOtpInput(index) {
+    const target = document.querySelector(`[data-tng-otp-slot='${index}']`);
+    target?.focus();
+    target?.select();
+}
+function readInputValue(event) {
+    if (!(event instanceof Event)) {
+        return null;
+    }
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement)) {
+        return null;
+    }
+    return target.value;
+}
+function readClipboardText(event) {
+    if (!(event instanceof ClipboardEvent)) {
+        return null;
+    }
+    return event.clipboardData?.getData('text') ?? null;
+}
+function handleOtpArrowNavigation(index, key, total) {
+    if (key === 'ArrowLeft' && index > 0) {
+        focusOtpInput(index - 1);
+        return true;
+    }
+    if (key === 'ArrowRight' && index < total - 1) {
+        focusOtpInput(index + 1);
+        return true;
+    }
+    return false;
+}
+function shouldMoveBackForDelete(slots, index, key) {
+    if (key !== 'Backspace') {
+        return false;
+    }
+    if (index === 0) {
+        return false;
+    }
+    return slots[index] === '';
+}
+let TngInputOtpComponent = class TngInputOtpComponent {
+    length = input(6, {
+        transform: (value) => normalizeTngOtpLength(typeof value === 'number' ? value : Number(value)),
+    });
+    value = input('');
+    valueChange = output();
+    complete = output();
+    slots = computed(() => toOtpSlots(this.length(), sanitizeTngOtpValue(this.value())));
+    onSlotInput(index, event) {
+        const value = readInputValue(event);
+        if (value === null) {
+            return;
+        }
+        const nextSlots = applyTngOtpSlotValue(this.slots(), index, value);
+        const nextValue = joinOtpSlots(nextSlots);
+        this.valueChange.emit(nextValue);
+        if (nextSlots[index] !== '' && index < nextSlots.length - 1) {
+            focusOtpInput(index + 1);
+        }
+        if (isFilledOtp(nextSlots)) {
+            this.complete.emit(nextValue);
+        }
+    }
+    onSlotKeydown(index, event) {
+        if (!(event instanceof KeyboardEvent)) {
+            return;
+        }
+        if (handleOtpArrowNavigation(index, event.key, this.slots().length)) {
+            event.preventDefault();
+            return;
+        }
+        if (!shouldMoveBackForDelete(this.slots(), index, event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const nextSlots = applyTngOtpSlotValue(this.slots(), index - 1, '');
+        this.valueChange.emit(joinOtpSlots(nextSlots));
+        focusOtpInput(index - 1);
+    }
+    onSlotsPaste(event) {
+        const clipboardValue = readClipboardText(event);
+        if (clipboardValue === null) {
+            return;
+        }
+        const cleanedValue = sanitizeTngOtpValue(clipboardValue).slice(0, this.length());
+        if (cleanedValue.length === 0) {
+            return;
+        }
+        if (event instanceof ClipboardEvent) {
+            event.preventDefault();
+        }
+        this.valueChange.emit(cleanedValue);
+        if (cleanedValue.length >= this.length()) {
+            this.complete.emit(cleanedValue);
+        }
+    }
+};
+TngInputOtpComponent = __decorate([
+    Component({
+        selector: 'tng-input-otp',
+        imports: [TngInputOtpPrimitive],
+        templateUrl: './tng-input-otp.component.html',
+        styleUrl: './tng-input-otp.component.css',
+    })
+], TngInputOtpComponent);
+export { TngInputOtpComponent };
+//# sourceMappingURL=tng-input-otp.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-input-otp.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input-otp/tng-input-otp.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { normalizeTngOtpLength, TngInputOtp as TngInputOtpPrimitive } from '@tailng-ui/primitives';\n\nfunction toOtpSlots(length: number, value: string): string[] {\n  const slots = Array.from({ length }, () => '');\n\n  for (const [index, char] of Array.from(value).entries()) {\n    if (index >= length) {\n      break;\n    }\n\n    slots[index] = char;\n  }\n\n  return slots;\n}\n\nfunction joinOtpSlots(slots: readonly string[]): string {\n  return slots.join('');\n}\n\nexport function sanitizeTngOtpValue(value: string): string {\n  return value.replace(/[^a-zA-Z0-9]/g, '');\n}\n\nexport function applyTngOtpSlotValue(\n  slots: readonly string[],\n  index: number,\n  nextValue: string,\n): readonly string[] {\n  if (index < 0 || index >= slots.length) {\n    return slots;\n  }\n\n  const nextSlots = [...slots];\n  nextSlots[index] = sanitizeTngOtpValue(nextValue).slice(0, 1);\n  return nextSlots;\n}\n\nfunction isFilledOtp(slots: readonly string[]): boolean {\n  return slots.every((slot) => slot.length === 1);\n}\n\nfunction focusOtpInput(index: number): void {\n  const target = document.querySelector<HTMLInputElement>(`[data-tng-otp-slot='${index}']`);\n  target?.focus();\n  target?.select();\n}\n\nfunction readInputValue(event: unknown): string | null {\n  if (!(event instanceof Event)) {\n    return null;\n  }\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement)) {\n    return null;\n  }\n\n  return target.value;\n}\n\nfunction readClipboardText(event: unknown): string | null {\n  if (!(event instanceof ClipboardEvent)) {\n    return null;\n  }\n\n  return event.clipboardData?.getData('text') ?? null;\n}\n\nfunction handleOtpArrowNavigation(index: number, key: string, total: number): boolean {\n  if (key === 'ArrowLeft' && index > 0) {\n    focusOtpInput(index - 1);\n    return true;\n  }\n\n  if (key === 'ArrowRight' && index < total - 1) {\n    focusOtpInput(index + 1);\n    return true;\n  }\n\n  return false;\n}\n\nfunction shouldMoveBackForDelete(slots: readonly string[], index: number, key: string): boolean {\n  if (key !== 'Backspace') {\n    return false;\n  }\n\n  if (index === 0) {\n    return false;\n  }\n\n  return slots[index] === '';\n}\n\n@Component({\n  selector: 'tng-input-otp',\n  imports: [TngInputOtpPrimitive],\n  templateUrl: './tng-input-otp.component.html',\n  styleUrl: './tng-input-otp.component.css',\n})\nexport class TngInputOtpComponent {\n  public readonly length = input<number, number | string>(6, {\n    transform: (value: number | string): number =>\n      normalizeTngOtpLength(typeof value === 'number' ? value : Number(value)),\n  });\n  public readonly value = input<string>('');\n\n  public readonly valueChange = output<string>();\n  public readonly complete = output<string>();\n\n  protected readonly slots = computed<readonly string[]>(() =>\n    toOtpSlots(this.length(), sanitizeTngOtpValue(this.value())),\n  );\n\n  protected onSlotInput(index: number, event: unknown): void {\n    const value = readInputValue(event);\n    if (value === null) {\n      return;\n    }\n\n    const nextSlots = applyTngOtpSlotValue(this.slots(), index, value);\n    const nextValue = joinOtpSlots(nextSlots);\n    this.valueChange.emit(nextValue);\n\n    if (nextSlots[index] !== '' && index < nextSlots.length - 1) {\n      focusOtpInput(index + 1);\n    }\n\n    if (isFilledOtp(nextSlots)) {\n      this.complete.emit(nextValue);\n    }\n  }\n\n  protected onSlotKeydown(index: number, event: unknown): void {\n    if (!(event instanceof KeyboardEvent)) {\n      return;\n    }\n\n    if (handleOtpArrowNavigation(index, event.key, this.slots().length)) {\n      event.preventDefault();\n      return;\n    }\n\n    if (!shouldMoveBackForDelete(this.slots(), index, event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n    const nextSlots = applyTngOtpSlotValue(this.slots(), index - 1, '');\n    this.valueChange.emit(joinOtpSlots(nextSlots));\n    focusOtpInput(index - 1);\n  }\n\n  protected onSlotsPaste(event: unknown): void {\n    const clipboardValue = readClipboardText(event);\n    if (clipboardValue === null) {\n      return;\n    }\n\n    const cleanedValue = sanitizeTngOtpValue(clipboardValue).slice(0, this.length());\n    if (cleanedValue.length === 0) {\n      return;\n    }\n\n    if (event instanceof ClipboardEvent) {\n      event.preventDefault();\n    }\n\n    this.valueChange.emit(cleanedValue);\n\n    if (cleanedValue.length >= this.length()) {\n      this.complete.emit(cleanedValue);\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+export declare function resolveTngLabelForAttr(forId: string): string | null;
+export declare class TngLabelComponent {
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    readonly forId: import("@angular/core").InputSignal<string>;
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    resolveForAttr(): string | null;
+}
+//# sourceMappingURL=tng-label.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-label.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/label/tng-label.component.ts"],"names":[],"mappings":"AAGA,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGnE;AAED,qBAMa,iBAAiB;IAC5B,SAAgB,QAAQ,8EAErB;IACH,SAAgB,KAAK,8CAAqB;IAC1C,SAAgB,QAAQ,8EAErB;IAEI,cAAc,IAAI,MAAM,GAAG,IAAI;CAGvC"}

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

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { booleanAttribute, Component, input } from '@angular/core';
+import { TngLabel as TngLabelPrimitive } from '@tailng-ui/primitives';
+export function resolveTngLabelForAttr(forId) {
+    const trimmedId = forId.trim();
+    return trimmedId.length > 0 ? trimmedId : null;
+}
+let TngLabelComponent = class TngLabelComponent {
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    forId = input('');
+    required = input(false, {
+        transform: booleanAttribute,
+    });
+    resolveForAttr() {
+        return resolveTngLabelForAttr(this.forId());
+    }
+};
+TngLabelComponent = __decorate([
+    Component({
+        selector: 'tng-label',
+        imports: [TngLabelPrimitive],
+        templateUrl: './tng-label.component.html',
+        styleUrl: './tng-label.component.css',
+    })
+], TngLabelComponent);
+export { TngLabelComponent };
+//# sourceMappingURL=tng-label.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-label.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/label/tng-label.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,MAAM,UAAU,sBAAsB,CAAC,KAAa;IAClD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC/B,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;AACjD,CAAC;AAQM,IAAM,iBAAiB,GAAvB,MAAM,iBAAiB;IACZ,QAAQ,GAAG,KAAK,CAA4B,KAAK,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IACa,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC,CAAC;IAC1B,QAAQ,GAAG,KAAK,CAA4B,KAAK,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IAEI,cAAc;QACnB,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC9C,CAAC;CACF,CAAA;AAZY,iBAAiB;IAN7B,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,OAAO,EAAE,CAAC,iBAAiB,CAAC;QAC5B,WAAW,EAAE,4BAA4B;QACzC,QAAQ,EAAE,2BAA2B;KACtC,CAAC;GACW,iBAAiB,CAY7B","sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\nimport { TngLabel as TngLabelPrimitive } from '@tailng-ui/primitives';\n\nexport function resolveTngLabelForAttr(forId: string): string | null {\n  const trimmedId = forId.trim();\n  return trimmedId.length > 0 ? trimmedId : null;\n}\n\n@Component({\n  selector: 'tng-label',\n  imports: [TngLabelPrimitive],\n  templateUrl: './tng-label.component.html',\n  styleUrl: './tng-label.component.css',\n})\nexport class TngLabelComponent {\n  public readonly disabled = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n  public readonly forId = input<string>('');\n  public readonly required = input<boolean, boolean | string>(false, {\n    transform: booleanAttribute,\n  });\n\n  public resolveForAttr(): string | null {\n    return resolveTngLabelForAttr(this.forId());\n  }\n}\n"]}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.component.d.ts

@@ -0,0 +1,55 @@
+import { TemplateRef } from '@angular/core';
+import { TngMultiAutocomplete } from '@tailng-ui/primitives';
+export type TngMultiAutocompleteGetValue<O, V> = (opt: O) => V;
+export type TngMultiAutocompleteGetLabel<O> = (opt: O) => string;
+export type TngMultiAutocompleteIsDisabled<O> = (opt: O) => boolean;
+export type TngMultiAutocompleteTrackBy<O> = (index: number, opt: O) => unknown;
+export type TngMultiAutocompleteChipContext<O, V> = {
+    $implicit: {
+        option: O | null;
+        value: V;
+        label: string;
+        removeItem: (item: V) => void;
+    };
+};
+export type TngMultiAutocompleteOptionContext<O, V> = {
+    $implicit: {
+        option: O;
+        value: V;
+        label: string;
+        disabled: boolean;
+        selected: boolean;
+        active: boolean;
+    };
+};
+type SelectedItem<O, V> = {
+    option: O | null;
+    value: V;
+    label: string;
+    trackId: unknown;
+};
+export declare class TngMultiAutocompleteComponent<O = unknown, V = unknown> {
+    protected readonly primitive: TngMultiAutocomplete<V>;
+    readonly options: import("@angular/core").InputSignal<readonly O[]>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly emptyText: import("@angular/core").InputSignal<string>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+    readonly getOptionValue: import("@angular/core").InputSignal<TngMultiAutocompleteGetValue<O, V>>;
+    readonly getOptionLabel: import("@angular/core").InputSignal<TngMultiAutocompleteGetLabel<O>>;
+    readonly isOptionDisabled: import("@angular/core").InputSignal<TngMultiAutocompleteIsDisabled<O>>;
+    readonly trackBy: import("@angular/core").InputSignal<TngMultiAutocompleteTrackBy<O>>;
+    chipTpl?: TemplateRef<TngMultiAutocompleteChipContext<O, V>>;
+    optionTpl?: TemplateRef<TngMultiAutocompleteOptionContext<O, V>>;
+    protected readonly selectedItems: import("@angular/core").Signal<readonly SelectedItem<O, V>[]>;
+    protected readonly filteredOptions: import("@angular/core").Signal<readonly O[]>;
+    protected chipContext(item: SelectedItem<O, V>): TngMultiAutocompleteChipContext<O, V>;
+    protected optionContext(opt: O): TngMultiAutocompleteOptionContext<O, V>;
+    addSelectedItem(item: V): void;
+    removeSelectedItem(item: V): void;
+    toggleSelectedItem(item: V): void;
+    clear(): void;
+    private findOption;
+    private hasSelectedValue;
+}
+export {};
+//# sourceMappingURL=tng-multi-autocomplete.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tng-multi-autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/multi-autocomplete/tng-multi-autocomplete.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,oBAAoB,EAOrB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,4BAA4B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/D,MAAM,MAAM,4BAA4B,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;AACjE,MAAM,MAAM,8BAA8B,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;AACpE,MAAM,MAAM,2BAA2B,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;AAEhF,MAAM,MAAM,+BAA+B,CAAC,CAAC,EAAE,CAAC,IAAI;IAClD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;QACjB,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;KAC/B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,iCAAiC,CAAC,CAAC,EAAE,CAAC,IAAI;IACpD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC,CAAC;QACV,KAAK,EAAE,CAAC,CAAC;QACT,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,OAAO,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI;IACxB,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,qBAsBa,6BAA6B,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO;IACjE,SAAS,CAAC,QAAQ,CAAC,SAAS,0BAAyD;IAErF,QAAQ,CAAC,OAAO,oDAA2B;IAC3C,QAAQ,CAAC,WAAW,8CAAoC;IACxD,QAAQ,CAAC,SAAS,8CAA+B;IACjD,QAAQ,CAAC,SAAS,8CAAuC;IAEzD,QAAQ,CAAC,cAAc,0EAErB;IACF,QAAQ,CAAC,cAAc,uEAOrB;IACF,QAAQ,CAAC,gBAAgB,yEAGvB;IACF,QAAQ,CAAC,OAAO,sEAGb;IAGH,OAAO,CAAC,EAAE,WAAW,CAAC,+BAA+B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAG7D,SAAS,CAAC,EAAE,WAAW,CAAC,iCAAiC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAEjE,SAAS,CAAC,QAAQ,CAAC,aAAa,gEAa7B;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,+CAmB/B;IAEH,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,EAAE,CAAC,CAAC;IAWtF,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC,GAAG,iCAAiC,CAAC,CAAC,EAAE,CAAC,CAAC;IAexE,eAAe,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI;IAI9B,kBAAkB,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI;IAIjC,kBAAkB,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI;IAIjC,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,gBAAgB;CAMzB"}

package/src/lib/form/multi-autocomplete/tng-multi-autocomplete.component.js

@@ -0,0 +1,126 @@
+import { __decorate } from "tslib";
+import { Component, ContentChild, TemplateRef, computed, inject, input, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { TngMultiAutocomplete, TngMultiAutocompleteChip, TngMultiAutocompleteContent, TngMultiAutocompleteListbox, TngMultiAutocompleteOption, TngMultiAutocompleteOverlay, TngMultiAutocompleteTrigger, } from '@tailng-ui/primitives';
+let TngMultiAutocompleteComponent = class TngMultiAutocompleteComponent {
+    primitive = inject(TngMultiAutocomplete);
+    options = input([]);
+    placeholder = input('Type to search…');
+    emptyText = input('No matches');
+    ariaLabel = input('Multi autocomplete');
+    getOptionValue = input(((opt) => opt?.value));
+    getOptionLabel = input(((opt) => String(opt?.label ??
+        opt?.value ??
+        opt)));
+    isOptionDisabled = input(((opt) => !!opt?.disabled));
+    trackBy = input((_, opt) => {
+        const o = opt;
+        return o?.['value'] ?? o?.['id'] ?? opt;
+    });
+    chipTpl;
+    optionTpl;
+    selectedItems = computed(() => {
+        const values = this.primitive.value();
+        const getLabel = this.getOptionLabel();
+        return values.map((value) => {
+            const option = this.findOption(value);
+            return {
+                option,
+                value,
+                label: option ? getLabel(option) : String(value),
+                trackId: value,
+            };
+        });
+    });
+    filteredOptions = computed(() => {
+        const q = this.primitive.query().toLowerCase().trim();
+        const list = this.options();
+        const getLabel = this.getOptionLabel();
+        const getValue = this.getOptionValue();
+        const selected = this.primitive.value();
+        const matches = q
+            ? list.filter((opt) => getLabel(opt).toLowerCase().includes(q))
+            : list;
+        const pinnedSelected = matches.filter((opt) => this.hasSelectedValue(getValue(opt), selected));
+        const remaining = matches.filter((opt) => !this.hasSelectedValue(getValue(opt), selected));
+        return [...pinnedSelected, ...remaining];
+    });
+    chipContext(item) {
+        return {
+            $implicit: {
+                option: item.option,
+                value: item.value,
+                label: item.label,
+                removeItem: (value) => this.removeSelectedItem(value),
+            },
+        };
+    }
+    optionContext(opt) {
+        const value = this.getOptionValue()(opt);
+        return {
+            $implicit: {
+                option: opt,
+                value,
+                label: this.getOptionLabel()(opt),
+                disabled: this.isOptionDisabled()(opt),
+                selected: this.hasSelectedValue(value),
+                active: false,
+            },
+        };
+    }
+    addSelectedItem(item) {
+        this.primitive.add(item);
+    }
+    removeSelectedItem(item) {
+        this.primitive.remove(item);
+    }
+    toggleSelectedItem(item) {
+        this.primitive.toggle(item);
+    }
+    clear() {
+        this.primitive.clear();
+    }
+    findOption(value) {
+        const getValue = this.getOptionValue();
+        for (const opt of this.options()) {
+            if (Object.is(getValue(opt), value))
+                return opt;
+        }
+        return null;
+    }
+    hasSelectedValue(value, selected = this.primitive.value()) {
+        return selected.some((entry) => Object.is(entry, value));
+    }
+};
+__decorate([
+    ContentChild('tngMultiAutocompleteChipTpl', { read: TemplateRef })
+], TngMultiAutocompleteComponent.prototype, "chipTpl", void 0);
+__decorate([
+    ContentChild('tngMultiAutocompleteOptionTpl', { read: TemplateRef })
+], TngMultiAutocompleteComponent.prototype, "optionTpl", void 0);
+TngMultiAutocompleteComponent = __decorate([
+    Component({
+        selector: 'tng-multi-autocomplete',
+        standalone: true,
+        imports: [
+            NgTemplateOutlet,
+            TngMultiAutocompleteChip,
+            TngMultiAutocompleteTrigger,
+            TngMultiAutocompleteContent,
+            TngMultiAutocompleteOverlay,
+            TngMultiAutocompleteListbox,
+            TngMultiAutocompleteOption,
+        ],
+        hostDirectives: [
+            {
+                directive: TngMultiAutocomplete,
+                inputs: ['open', 'value', 'disabled', 'loading', 'invalid'],
+                outputs: ['openChange', 'valueChange'],
+            },
+        ],
+        templateUrl: './tng-multi-autocomplete.component.html',
+        styleUrl: './tng-multi-autocomplete.component.css',
+    })
+], TngMultiAutocompleteComponent);
+export { TngMultiAutocompleteComponent };
+//# sourceMappingURL=tng-multi-autocomplete.component.js.map