angular-tailwind-components 1.7.1 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-tailwind-components",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "files": [
     "fesm2022",
     "types",

package/types/angular-tailwind-components.d.ts

@@ -6,7 +6,7 @@ import { ControlValueAccessor } from '@angular/forms';
 /** Size variants for components */
 type TailwindSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Color variants for buttons and interactive elements */
-type TailwindColor = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';
+type TailwindColor = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'transparent';
 /** Button kinds */
 type TailwindButtonKind = 'solid' | 'flat' | 'outlined' | 'ghost' | 'text';
 /** ARIA role for `TailwindButton` */
@@ -101,6 +101,7 @@ declare class TailwindSortHeaderDirective {
     readonly sortKey: _angular_core.InputSignal<string>;
     private readonly host;
     private readonly renderer;
+    private labelWrapper?;
     private readonly appRef;
     private readonly environmentInjector;
     private readonly injector;
@@ -113,6 +114,8 @@ declare class TailwindSortHeaderDirective {
      * for one frame; retry with `requestAnimationFrame` until `closest` succeeds.
      */
     private resolveTableAndAttach;
+    /** Keep `th` as `display: table-cell`; flex only on an inner wrapper (label + icon). */
+    private ensureLabelWrapper;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindSortHeaderDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TailwindSortHeaderDirective, "[tailwindSortHeader]", never, { "sortKey": { "alias": "sortKey"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -131,7 +134,7 @@ declare class TailwindButton extends TailwindComponent {
     /** Visual color */
     readonly color: _angular_core.InputSignal<TailwindColor>;
     /**
-     * Visual kind: `flat` = filled like `solid` without border or shadow;
+     * Visual kind: `flat` = filled like `solid` without border, shadow, or hover/active background change;
      * `ghost` = transparent with hover tint; `text` = text color only, no hover background.
      * Default from {@link TAILWIND_BUTTON_KIND} or `'solid'`.
      */
@@ -148,6 +151,8 @@ declare class TailwindButton extends TailwindComponent {
     readonly icon: _angular_core.InputSignal<string | undefined>;
     /** Icon placement when both icon and label are shown */
     readonly iconPosition: _angular_core.InputSignal<TailwindIconPosition>;
+    /** Accessible name for icon-only buttons */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Emitted when the button is clicked (not disabled). */
     readonly onClick: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly iconPixelSize: _angular_core.Signal<number>;
@@ -155,7 +160,7 @@ declare class TailwindButton extends TailwindComponent {
     readonly computedClasses: _angular_core.Signal<string>;
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindButton, "tailwind-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindButton, "tailwind-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
 }
 
 declare class TailwindIcon extends TailwindComponent {
@@ -388,6 +393,7 @@ declare class TailwindCheckbox extends TailwindComponent implements ControlValue
     readonly isDisabled: _angular_core.WritableSignal<boolean>;
     /** Box size class based on size input */
     readonly boxSizeClass: _angular_core.Signal<string>;
+    readonly checkIconSize: _angular_core.Signal<number>;
     private onChange;
     private onTouched;
     writeValue(value: boolean): void;
@@ -489,6 +495,88 @@ declare class TailwindSelect<T = unknown> extends TailwindComponent implements C
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindSelect<any>, "tailwind-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+/** Context passed to the `#item` ng-template. */
+interface TailwindAutocompleteItemContext<T = unknown> {
+    $implicit: TailwindOption<T>;
+    option: TailwindOption<T>;
+    index: number;
+    selected: boolean;
+    active: boolean;
+}
+declare class TailwindAutocomplete<T = unknown> extends TailwindComponent implements ControlValueAccessor, OnDestroy {
+    private static nextId;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly elRef;
+    private readonly cdr;
+    private readonly ngZone;
+    private readonly panelTemplate;
+    constructor();
+    private overlayRef;
+    private outsideSub;
+    private searchDebounceTimer;
+    private readonly instanceListboxId;
+    /** Label text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder text */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Available options */
+    readonly options: _angular_core.InputSignal<TailwindOption<T>[]>;
+    /** Size variant */
+    readonly size: _angular_core.InputSignal<TailwindSize>;
+    /** Helper text */
+    readonly helperText: _angular_core.InputSignal<string>;
+    /** Error text */
+    readonly errorText: _angular_core.InputSignal<string>;
+    /** Whether in error state */
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    /** Filter options locally by label when typing */
+    readonly filterLocally: _angular_core.InputSignal<boolean>;
+    /** Minimum query length before opening panel and emitting onSearch */
+    readonly minSearchLength: _angular_core.InputSignal<number>;
+    /** Debounce delay (ms) for onSearch emission only */
+    readonly debounceMs: _angular_core.InputSignal<number>;
+    /** On blur, reset input to selected option label or clear invalid text */
+    readonly forceSelection: _angular_core.InputSignal<boolean>;
+    /** Selected value (form control) — set only when an option is chosen */
+    readonly value: _angular_core.ModelSignal<T | null>;
+    /** Emits the current search query (after debounce / minSearchLength) */
+    readonly onSearch: _angular_core.OutputEmitterRef<string>;
+    /** Custom option row template (`ng-template` with `#item`) */
+    readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Text shown in the input */
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    readonly listboxId: _angular_core.Signal<string>;
+    readonly selectedOption: _angular_core.Signal<TailwindOption<T> | null>;
+    readonly filteredOptions: _angular_core.Signal<TailwindOption<T>[]>;
+    readonly inputClasses: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    writeValue(value: T | null | undefined): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    ngOnDestroy(): void;
+    isOptionSelected(option: TailwindOption<T>): boolean;
+    optionClasses(index: number, option: TailwindOption<T>): string;
+    itemContext(option: TailwindOption<T>, index: number): TailwindAutocompleteItemContext<T>;
+    onInputChange(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    private applyForceSelectionOnBlur;
+    selectOption(option: TailwindOption<T>): void;
+    onKeydown(event: KeyboardEvent): void;
+    private optionValueEquals;
+    private emitSearch;
+    private openPanel;
+    private closePanel;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindAutocomplete<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindAutocomplete<any>, "tailwind-autocomplete", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "filterLocally": { "alias": "filterLocally"; "required": false; "isSignal": true; }; "minSearchLength": { "alias": "minSearchLength"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "forceSelection": { "alias": "forceSelection"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onSearch": "onSearch"; }, ["itemTemplate"], ["*"], true, never>;
+}
+
 declare class TailwindToggle extends TailwindComponent implements ControlValueAccessor {
     /** Label text */
     readonly label: _angular_core.InputSignal<string>;
@@ -598,7 +686,8 @@ declare class TailwindSpinner extends TailwindComponent {
     /** Layout orientation */
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly containerClasses: _angular_core.Signal<string>;
-    readonly spinnerClasses: _angular_core.Signal<string>;
+    readonly iconPixelSize: _angular_core.Signal<number>;
+    readonly iconClasses: _angular_core.Signal<string>;
     readonly labelClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindSpinner, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindSpinner, "tailwind-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1408,5 +1497,5 @@ declare class TailwindModalRef<R = any> {
     _getResult(): R | undefined;
 }
 
-export { DEFAULT_PAGINATION_LENGTH_OPTIONS, TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
-export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindButtonRole, TailwindColor, TailwindComponentsConfig, TailwindDefineThemeColors, TailwindDefineThemeConfig, TailwindHeroicon, TailwindIconPosition, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindTableSortHost, TailwindThemeColorShade, TailwindThemeSemantic, TailwindThemeSemanticPaletteObject, TailwindThemeSemanticShades, TailwindThemeSeverityColor, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };
+export { DEFAULT_PAGINATION_LENGTH_OPTIONS, TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindAutocomplete, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
+export type { Pagination, TailwindAutocompleteItemContext, TailwindBreadcrumbItem, TailwindButtonKind, TailwindButtonRole, TailwindColor, TailwindComponentsConfig, TailwindDefineThemeColors, TailwindDefineThemeConfig, TailwindHeroicon, TailwindIconPosition, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindTableSortHost, TailwindThemeColorShade, TailwindThemeSemantic, TailwindThemeSemanticPaletteObject, TailwindThemeSemanticShades, TailwindThemeSeverityColor, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };