angular-tailwind-components 1.7.0 → 1.7.1

package/package.json

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

package/styles/tailwind.css

@@ -83,13 +83,13 @@
 
   --color-warning-50: var(--color-amber-50);
   --color-warning-100: var(--color-amber-100);
-  --color-warning-200: var(--color-amber-200);
-  --color-warning-300: var(--color-amber-300);
-  --color-warning-400: var(--color-amber-400);
-  --color-warning-500: var(--color-amber-500);
-  --color-warning-600: var(--color-amber-600);
-  --color-warning-700: var(--color-amber-700);
-  --color-warning-800: var(--color-amber-800);
+  --color-warning-200: var(--color-amber-300);
+  --color-warning-300: var(--color-amber-400);
+  --color-warning-400: var(--color-amber-500);
+  --color-warning-500: var(--color-amber-600);
+  --color-warning-600: var(--color-amber-700);
+  --color-warning-700: var(--color-amber-800);
+  --color-warning-800: var(--color-amber-900);
   --color-warning-900: var(--color-amber-900);
 
   --color-danger-50: var(--color-red-50);
@@ -159,7 +159,7 @@
   --color-on-warning-200: var(--color-neutral-900);
   --color-on-warning-300: var(--color-neutral-900);
   --color-on-warning-400: var(--color-neutral-900);
-  --color-on-warning-500: var(--color-neutral-900);
+  --color-on-warning-500: #ffffff;
   --color-on-warning-600: #ffffff;
   --color-on-warning-700: #ffffff;
   --color-on-warning-800: #ffffff;

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

@@ -9,10 +9,14 @@ type TailwindSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type TailwindColor = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';
 /** Button kinds */
 type TailwindButtonKind = 'solid' | 'flat' | 'outlined' | 'ghost' | 'text';
+/** ARIA role for `TailwindButton` */
+type TailwindButtonRole = 'button' | 'menuitem' | 'tab' | 'switch' | 'checkbox' | 'radio';
 /** Alert/feedback color variants */
 type TailwindSeverity = 'success' | 'warning' | 'danger' | 'info';
 /** Position variants for overlays */
 type TailwindPosition = 'top' | 'bottom' | 'left' | 'right';
+/** Icon placement relative to button label */
+type TailwindIconPosition = 'left' | 'right';
 /** Shape variants */
 type TailwindShape = 'rounded' | 'pill' | 'square';
 /** Semantic heading level for `TailwindTitle` */
@@ -49,20 +53,28 @@ declare const TAILWIND_HEROICON_NAMES: readonly ["academic-cap", "adjustments-ho
 type TailwindHeroicon = string;
 
 declare class TailwindTooltipDirective implements OnDestroy {
-    text: string;
-    tooltipPosition: TailwindPosition;
+    /** Tooltip text */
+    readonly tooltip: _angular_core.InputSignal<string>;
+    /** Position relative to the trigger */
+    readonly tooltipPosition: _angular_core.InputSignal<TailwindPosition>;
     private showTimeout;
     private hideTimeout;
     private componentRef;
     private viewContainerRef;
     private el;
+    private get host();
     show(): void;
-    hide(): void;
+    hideFromPointer(): void;
+    hideFromFocus(event: FocusEvent): void;
+    private hide;
+    private clearShowTimeout;
+    private clearHideTimeout;
     private createComponent;
+    private updateTooltipComponent;
     private destroyComponent;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindTooltipDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TailwindTooltipDirective, "[tooltip]", never, { "text": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TailwindTooltipDirective, "[tooltip]", never, { "tooltip": { "alias": "tooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -130,13 +142,20 @@ declare class TailwindButton extends TailwindComponent {
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** HTML button type attribute */
     readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
+    /** ARIA role attribute */
+    readonly role: _angular_core.InputSignal<TailwindButtonRole>;
+    /** Optional Heroicons outline icon inside the button */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Icon placement when both icon and label are shown */
+    readonly iconPosition: _angular_core.InputSignal<TailwindIconPosition>;
     /** Emitted when the button is clicked (not disabled). */
     readonly onClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly iconPixelSize: _angular_core.Signal<number>;
     /** Computed Tailwind classes based on color, kind, size, and state */
     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; }; }, { "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; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
 }
 
 declare class TailwindIcon extends TailwindComponent {
@@ -147,6 +166,11 @@ declare class TailwindIcon extends TailwindComponent {
     readonly size: _angular_core.InputSignal<number>;
     readonly src: _angular_core.Signal<string>;
     readonly pixelSize: _angular_core.Signal<number>;
+    /** Layout-only; custom `class` is applied to the inner glyph (color, spacing, etc.). */
+    readonly hostClasses: _angular_core.Signal<string>;
+    /** Tailwind classes from `class` input, merged with the masked glyph base. */
+    readonly glyphClasses: _angular_core.Signal<string>;
+    readonly maskImage: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindIcon, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindIcon, "tailwind-icon", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -232,7 +256,7 @@ declare class TailwindUpload extends TailwindComponent implements ControlValueAc
     private readonly fallbackFileId;
     readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     /** Visual layout: compact button or drop zone */
-    readonly variant: _angular_core.InputSignal<"area" | "button">;
+    readonly variant: _angular_core.InputSignal<"button" | "area">;
     /** Field label */
     readonly label: _angular_core.InputSignal<string>;
     /** Button label when `variant` is `button` */
@@ -769,23 +793,31 @@ interface Pagination {
     readonly currentPage: number;
     readonly ariaLabel: string;
     readonly summary: string;
+    readonly lengthOptions?: readonly number[];
 }
 
+declare const DEFAULT_PAGINATION_LENGTH_OPTIONS: readonly [5, 10, 25, 50];
 declare class TailwindPagination extends TailwindComponent {
     private readonly tailwindPaginationSummary;
     readonly totalItems: _angular_core.InputSignal<number>;
-    readonly pageSize: _angular_core.InputSignal<number>;
+    readonly pageSize: _angular_core.ModelSignal<number>;
+    readonly lengthOptions: _angular_core.InputSignal<readonly number[]>;
     readonly currentPage: _angular_core.ModelSignal<number>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Placeholders `{start}`, `{end}`, `{total}`; default from `TAILWIND_PAGINATION_SUMMARY` or English copy. */
     readonly summary: _angular_core.InputSignal<string>;
     readonly onPageChange: _angular_core.OutputEmitterRef<number>;
+    readonly onPageSizeChange: _angular_core.OutputEmitterRef<number>;
+    readonly pageSizeOptions: _angular_core.Signal<number[]>;
+    readonly pageSizeSelectOptions: _angular_core.Signal<TailwindOption<number>[]>;
     readonly totalPages: _angular_core.Signal<number>;
     readonly visiblePages: _angular_core.Signal<number[]>;
     readonly summaryText: _angular_core.Signal<string>;
     goToPage(page: number): void;
+    onPageSizeValueChange(value: number | number[] | null): void;
+    setPageSize(size: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindPagination, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindPagination, "tailwind-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "onPageChange": "onPageChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindPagination, "tailwind-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "lengthOptions": { "alias": "lengthOptions"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "currentPage": "currentPageChange"; "onPageChange": "onPageChange"; "onPageSizeChange": "onPageSizeChange"; }, never, never, true, never>;
 }
 
 declare class TailwindTag extends TailwindComponent {
@@ -814,6 +846,7 @@ declare class TailwindTable extends TailwindComponent implements TailwindTableSo
     readonly paginated: _angular_core.InputSignal<boolean>;
     readonly pagination: _angular_core.InputSignal<Pagination | undefined>;
     readonly paginationSummary: _angular_core.Signal<string>;
+    readonly paginationLengthOptions: _angular_core.Signal<readonly number[]>;
     readonly onSortChange: _angular_core.OutputEmitterRef<{
         key: string;
         direction: "asc" | "desc";
@@ -825,6 +858,7 @@ declare class TailwindTable extends TailwindComponent implements TailwindTableSo
     readonly sortDir: _angular_core.WritableSignal<"asc" | "desc">;
     readonly selectedRows: _angular_core.WritableSignal<Set<number>>;
     readonly currentPage: _angular_core.WritableSignal<number>;
+    readonly pageSize: _angular_core.WritableSignal<number>;
     constructor();
     readonly sortedData: _angular_core.Signal<any[]>;
     readonly displayedData: _angular_core.Signal<any[]>;
@@ -1127,7 +1161,7 @@ declare class TailwindToolbar extends TailwindComponent {
     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">;
     /** Foreground on semantic surface (`text-on-*`), aligned with solid toolbar shade per variant. */
     readonly variantContrastTextClass: _angular_core.Signal<string | null>;
-    /** Heroicons are `<img>`; on light-on-color variants tint SVG strokes to match `text-on-*`. */
+    /** On light-on-color variants, tint masked icons to match `text-on-*`. */
     readonly menuItemIconClasses: _angular_core.Signal<"" | "toolbar-menu-icon-on-light">;
     readonly menuItemToneClasses: _angular_core.Signal<string>;
     readonly menuItemButtonClasses: _angular_core.Signal<string>;
@@ -1374,5 +1408,5 @@ declare class TailwindModalRef<R = any> {
     _getResult(): R | undefined;
 }
 
-export { 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, TailwindColor, TailwindComponentsConfig, TailwindDefineThemeColors, TailwindDefineThemeConfig, TailwindHeroicon, 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, 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 };