angular-tailwind-components 1.2.2 → 1.3.0

package/package.json

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

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, ElementRef, AfterViewInit, OnInit, Type, InjectionToken } from '@angular/core';
+import { OnDestroy, TemplateRef, ElementRef, AfterViewInit, OnInit, Signal, Type, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /** Common types used across all components */
@@ -65,6 +65,39 @@ declare class TailwindTooltipDirective implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TailwindTooltipDirective, "[tooltip]", never, { "text": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Row definition for `TailwindTable`. Prefer structural syntax on `<tbody>`:
+ * `<tbody *tailwindTableRow="let row">...</tbody>` — each rendered fragment is one `<tbody>` per data row.
+ *
+ * Legacy: `<ng-template tailwindTableRow let-row>` with only `<td>` cells still works.
+ */
+declare class TailwindTableRowDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindTableRowDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TailwindTableRowDirective, "[tailwindTableRow]", never, {}, {}, never, never, true, never>;
+}
+
+/** Host attributes on `<tailwind-table>`; kept in sync for sort-header observers. */
+declare const TW_TABLE_SORT_KEY_ATTR = "data-tw-sort-key";
+declare const TW_TABLE_SORT_DIR_ATTR = "data-tw-sort-dir";
+/**
+ * Sortable column header: put on `<th>` (plain header text + directive). Not sortable columns omit this directive.
+ * Sorting is handled by the nearest `tailwind-table` host (event delegation); do not pass a table reference.
+ */
+declare class TailwindSortHeaderDirective {
+    /** Property key on each row used for sorting. */
+    readonly sortKey: _angular_core.InputSignal<string>;
+    private readonly host;
+    private readonly renderer;
+    private svg?;
+    constructor();
+    private createSvg;
+    private updateSvg;
+    private setPathHidden;
+    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>;
+}
+
 declare abstract class TailwindComponent {
     /** Optional ID for the component */
     readonly id: _angular_core.InputSignal<string | undefined>;
@@ -153,7 +186,7 @@ declare class TailwindTextarea extends TailwindComponent implements ControlValue
     /** Maximum character length (HTML maxlength) */
     readonly maxlength: _angular_core.InputSignal<number | undefined>;
     /** Resize behavior */
-    readonly resize: _angular_core.InputSignal<"vertical" | "none" | "both" | "horizontal">;
+    readonly resize: _angular_core.InputSignal<"horizontal" | "vertical" | "none" | "both">;
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Whether the textarea is readonly */
@@ -342,7 +375,7 @@ declare class TailwindRadioGroup<T = unknown> extends TailwindComponent implemen
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Layout orientation */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Currently selected value */
     readonly value: _angular_core.ModelSignal<T | null>;
     /** Internal disabled state */
@@ -456,7 +489,7 @@ declare class TailwindToggle extends TailwindComponent implements ControlValueAc
 
 declare class TailwindBadge extends TailwindComponent {
     /** Color variant */
-    readonly variant: _angular_core.InputSignal<"primary" | TailwindSeverity | "neutral">;
+    readonly variant: _angular_core.InputSignal<TailwindSeverity | "primary" | "neutral">;
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Show a dot indicator */
@@ -503,8 +536,6 @@ declare class TailwindAlert extends TailwindComponent {
     readonly severity: _angular_core.InputSignal<TailwindSeverity>;
     /** Alert title */
     readonly title: _angular_core.InputSignal<string>;
-    /** Alert message */
-    readonly message: _angular_core.InputSignal<string>;
     /** Whether the alert can be dismissed */
     readonly dismissible: _angular_core.InputSignal<boolean>;
     /** Whether to show a border on the left */
@@ -516,7 +547,7 @@ declare class TailwindAlert extends TailwindComponent {
     readonly computedClasses: _angular_core.Signal<string>;
     dismiss(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindAlert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindAlert, "tailwind-alert", never, { "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, { "onDismiss": "onDismiss"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindAlert, "tailwind-alert", never, { "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, { "onDismiss": "onDismiss"; }, never, ["*"], true, never>;
 }
 
 declare class TailwindSpinner extends TailwindComponent {
@@ -529,7 +560,7 @@ declare class TailwindSpinner extends TailwindComponent {
     /** Aria label for accessibility */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Layout orientation */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     readonly containerClasses: _angular_core.Signal<string>;
     readonly spinnerClasses: _angular_core.Signal<string>;
     readonly labelClasses: _angular_core.Signal<string>;
@@ -628,7 +659,7 @@ declare class TailwindProgressBar extends TailwindComponent {
     /** Show percentage value */
     readonly showValue: _angular_core.InputSignal<boolean>;
     /** Color variant */
-    readonly variant: _angular_core.InputSignal<"primary" | TailwindSeverity>;
+    readonly variant: _angular_core.InputSignal<TailwindSeverity | "primary">;
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Indeterminate mode (animated) */
@@ -714,9 +745,10 @@ interface TailwindBreadcrumbItem {
 
 declare class TailwindBreadcrumb extends TailwindComponent {
     readonly items: _angular_core.InputSignal<TailwindBreadcrumbItem[]>;
+    readonly separator: _angular_core.InputSignal<string>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindBreadcrumb, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindBreadcrumb, "tailwind-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindBreadcrumb, "tailwind-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface Pagination {
@@ -743,27 +775,27 @@ declare class TailwindPagination extends TailwindComponent {
 }
 
 declare class TailwindTag extends TailwindComponent {
-    readonly variant: _angular_core.InputSignal<"primary" | TailwindSeverity | "neutral">;
+    readonly variant: _angular_core.InputSignal<TailwindSeverity | "primary" | "neutral">;
     readonly computedClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindTag, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindTag, "tailwind-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-interface TailwindTableColumn<T = any> {
-    key: string;
-    label: string;
-    sortable?: boolean;
-    width?: string;
-    align?: 'left' | 'center' | 'right';
+/** Implemented by `TailwindTable`; used for typing when calling `sort()` from TypeScript. */
+interface TailwindTableSortHost {
+    sort(key: string): void;
+    readonly sortKey: Signal<string>;
+    readonly sortDir: Signal<'asc' | 'desc'>;
 }
 
-declare class TailwindTable extends TailwindComponent {
-    readonly columns: _angular_core.InputSignal<TailwindTableColumn<any>[]>;
-    readonly data: _angular_core.InputSignal<Record<string, any>[]>;
+declare class TailwindTable extends TailwindComponent implements TailwindTableSortHost {
+    readonly data: _angular_core.InputSignal<Record<string, unknown>[]>;
     readonly selectable: _angular_core.InputSignal<boolean>;
     readonly striped: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Match your column count so the empty state spans the full table width. */
+    readonly emptyColspan: _angular_core.InputSignal<number>;
     readonly paginated: _angular_core.InputSignal<boolean>;
     readonly pagination: _angular_core.InputSignal<Pagination | undefined>;
     readonly onSortChange: _angular_core.OutputEmitterRef<{
@@ -771,17 +803,22 @@ declare class TailwindTable extends TailwindComponent {
         direction: "asc" | "desc";
     }>;
     readonly onSelectionChange: _angular_core.OutputEmitterRef<Set<number>>;
+    readonly rowTemplate: _angular_core.Signal<TailwindTableRowDirective>;
+    rowContext(row: Record<string, unknown>, index: number): Record<string, unknown>;
     readonly sortKey: _angular_core.WritableSignal<string>;
-    readonly sortDir: _angular_core.WritableSignal<"asc" | "desc">;
+    readonly sortDir: _angular_core.WritableSignal<"desc" | "asc">;
     readonly selectedRows: _angular_core.WritableSignal<Set<number>>;
     readonly currentPage: _angular_core.WritableSignal<number>;
     constructor();
-    readonly sortedData: _angular_core.Signal<Record<string, any>[]>;
-    readonly displayedData: _angular_core.Signal<Record<string, any>[]>;
+    readonly sortedData: _angular_core.Signal<Record<string, unknown>[]>;
+    readonly displayedData: _angular_core.Signal<Record<string, unknown>[]>;
     sort(key: string): void;
     toggleSelection(index: number): void;
+    protected onSortZoneClick(ev: Event): void;
+    protected onSortZoneKeydown(ev: KeyboardEvent): void;
+    private delegateSortFromEvent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindTable, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindTable, "tailwind-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "onSortChange": "onSortChange"; "onSelectionChange": "onSelectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindTable, "tailwind-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyColspan": { "alias": "emptyColspan"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "onSortChange": "onSortChange"; "onSelectionChange": "onSelectionChange"; }, ["rowTemplate"], ["thead"], true, never>;
 }
 
 declare class TailwindDatePicker extends TailwindComponent implements ControlValueAccessor {
@@ -1061,15 +1098,19 @@ declare class TailwindToolbar extends TailwindComponent {
     /** Applies a stronger drop shadow. */
     readonly elevated: _angular_core.InputSignal<boolean>;
     /** `horizontal` for a top app bar; `vertical` for a side rail (logo → menu → end). */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Navigation / actions rendered between logo and end slots. */
     readonly menu: _angular_core.InputSignal<TailwindMenuItem[]>;
     /** Emitted when a non-disabled, non-divider menu entry is activated. */
     readonly onMenuSelect: _angular_core.OutputEmitterRef<TailwindMenuItem>;
-    readonly menuContainerClasses: _angular_core.Signal<"min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1" | "min-w-0 flex-1 flex flex-col gap-1 overflow-y-auto min-h-0">;
-    readonly menuItemButtonClasses: _angular_core.Signal<"shrink-0 rounded-md px-3 py-1.5 text-sm font-medium text-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent" | "w-full text-left rounded-md px-2 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent">;
+    readonly menuContainerClasses: _angular_core.Signal<"min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1" | "min-w-0 flex-1 flex flex-col gap-1.5 overflow-y-auto min-h-0">;
+    readonly menuItemButtonClasses: _angular_core.Signal<"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent" | "inline-flex w-full items-center gap-2 rounded-md px-3 py-3 text-left text-sm font-medium text-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent">;
     readonly rootClasses: _angular_core.Signal<string>;
     selectMenuItem(item: TailwindMenuItem): void;
+    /** True when `label` is a non-empty string after trim (icon-only entries omit or blank `label`). */
+    menuItemHasVisibleLabel(item: TailwindMenuItem): boolean;
+    /** Accessible name when there is no visible label (`value`, trimmed). */
+    menuItemAriaLabel(item: TailwindMenuItem): string | null;
     menuTrackKey(index: number, item: TailwindMenuItem): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindToolbar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindToolbar, "tailwind-toolbar", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, { "onMenuSelect": "onMenuSelect"; }, never, ["[tailwind-toolbar-logo]", "[tailwind-toolbar-end]"], true, never>;
@@ -1077,7 +1118,7 @@ declare class TailwindToolbar extends TailwindComponent {
 
 declare class TailwindDivider extends TailwindComponent {
     /** Rule direction */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Adds horizontal margin to the rule (horizontal orientation only). */
     readonly inset: _angular_core.InputSignal<boolean>;
     /** Border style for the rule */
@@ -1144,13 +1185,13 @@ declare class TailwindSlider extends TailwindComponent implements ControlValueAc
     /** Two-thumb range mode */
     readonly range: _angular_core.InputSignal<boolean>;
     /** Layout */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Tick marks at each step */
     readonly showTicks: _angular_core.InputSignal<boolean>;
     /** Control size */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Track fill / thumb color */
-    readonly variant: _angular_core.InputSignal<"primary" | TailwindSeverity>;
+    readonly variant: _angular_core.InputSignal<TailwindSeverity | "primary">;
     readonly trackRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     /** Single-thumb value */
     readonly singleValue: _angular_core.WritableSignal<number>;
@@ -1216,5 +1257,5 @@ declare class TailwindModalRef<R = any> {
     _getResult(): R | undefined;
 }
 
-export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, 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, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload };
-export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindSolarIcon, TailwindTableColumn, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };
+export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, 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 };
+export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindSolarIcon, TailwindTableSortHost, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };