angular-tailwind-components 1.8.0 → 1.8.2

package/README.md

@@ -2,6 +2,8 @@
 
 A comprehensive Angular component library built entirely with **Tailwind CSS v4** — zero additional UI dependencies.
 
+**Live Storybook:** [angular-tailwind-components.vercel.app](https://angular-tailwind-components.vercel.app/)
+
 ## Features
 
 - 🎨 **36 components** — Buttons, Inputs, Modals, Tables, DatePickers, and more
@@ -10,7 +12,7 @@ A comprehensive Angular component library built entirely with **Tailwind CSS v4*
 - 📝 **ControlValueAccessor** — Full reactive forms integration for all form components
 - ♿ **Accessible** — WCAG-compliant with proper ARIA roles and keyboard support
 - 🧪 **Tested** — Unit tests with Vitest
-- 📖 **Storybook** — Visual documentation for all components
+- 📖 **Storybook** — [Visual documentation](https://angular-tailwind-components.vercel.app/) for all components
 - 🎭 **Customizable** — **`defineTheme()`** for injection-token defaults and runtime semantic colors; optional CSS overrides via `@theme`
 
 ## Installation
@@ -272,12 +274,17 @@ You can still override any token in your own CSS, for example:
 
 ## Development
 
+Browse components in the hosted Storybook: [angular-tailwind-components.vercel.app](https://angular-tailwind-components.vercel.app/)
+
 ```bash
 # Build the library
 ng build angular-tailwind-components
 
-# Start Storybook
+# Start Storybook locally
 npm run storybook
+
+# Build static Storybook (output: storybook-static/)
+npm run build:storybook
 ```
 
 ### Component Conventions

package/fesm2022/angular-tailwind-components.mjs

@@ -668,6 +668,7 @@ class TailwindSortHeaderDirective {
     sortKey = input.required(...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
     host = inject((ElementRef));
     renderer = inject(Renderer2);
+    labelWrapper;
     appRef = inject(ApplicationRef);
     environmentInjector = inject(EnvironmentInjector);
     injector = inject(Injector);
@@ -718,11 +719,12 @@ class TailwindSortHeaderDirective {
             this.iconRef.changeDetectorRef.detectChanges();
         };
         if (!this.iconRef) {
+            const labelHost = this.ensureLabelWrapper();
             this.iconRef = createComponent(TailwindIcon, {
                 environmentInjector: this.environmentInjector,
                 elementInjector: this.injector
             });
-            this.renderer.appendChild(this.host.nativeElement, this.iconRef.location.nativeElement);
+            this.renderer.appendChild(labelHost, this.iconRef.location.nativeElement);
             this.appRef.attachView(this.iconRef.hostView);
         }
         sync();
@@ -732,8 +734,31 @@ class TailwindSortHeaderDirective {
             attributeFilter: [TW_TABLE_SORT_KEY_ATTR, TW_TABLE_SORT_DIR_ATTR]
         });
     }
+    /** Keep `th` as `display: table-cell`; flex only on an inner wrapper (label + icon). */
+    ensureLabelWrapper() {
+        if (this.labelWrapper)
+            return this.labelWrapper;
+        const th = this.host.nativeElement;
+        const existing = th.querySelector('[data-tw-sort-header-label]');
+        if (existing instanceof HTMLElement) {
+            this.labelWrapper = existing;
+            return existing;
+        }
+        const wrapper = this.renderer.createElement('span');
+        this.renderer.setAttribute(wrapper, 'data-tw-sort-header-label', '');
+        this.renderer.addClass(wrapper, 'inline-flex');
+        this.renderer.addClass(wrapper, 'items-center');
+        this.renderer.addClass(wrapper, 'gap-1.5');
+        this.renderer.addClass(wrapper, 'justify-start');
+        for (const child of Array.from(th.childNodes)) {
+            this.renderer.appendChild(wrapper, child);
+        }
+        this.renderer.appendChild(th, wrapper);
+        this.labelWrapper = wrapper;
+        return wrapper;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSortHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSortHeaderDirective, isStandalone: true, selector: "[tailwindSortHeader]", inputs: { sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.tabindex": "0", "attr.data-sort-key": "sortKey()" }, classAttribute: "flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-neutral-900" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSortHeaderDirective, isStandalone: true, selector: "[tailwindSortHeader]", inputs: { sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.tabindex": "0", "attr.data-sort-key": "sortKey()" }, classAttribute: "cursor-pointer whitespace-nowrap text-left select-none hover:text-neutral-900" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSortHeaderDirective, decorators: [{
             type: Directive,
@@ -741,7 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     selector: '[tailwindSortHeader]',
                     standalone: true,
                     host: {
-                        class: 'flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-neutral-900',
+                        class: 'cursor-pointer whitespace-nowrap text-left select-none hover:text-neutral-900',
                         '[attr.tabindex]': '0',
                         '[attr.data-sort-key]': 'sortKey()'
                     }