angular-tailwind-components 1.8.0 → 1.8.1

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()'
                     }