@acorex/components 22.1.0-next.31 → 22.1.0-next.33

package/fesm2022/acorex-components-tabs.mjs

@@ -1,13 +1,20 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, Directive, EventEmitter, HostListener, Input, Output, ViewChild, ViewEncapsulation, Component, Renderer2, input, viewChild, NgZone, PLATFORM_ID, signal, effect, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { inject, ViewContainerRef, Renderer2, Directive, EventEmitter, HostListener, Input, Output, ViewChild, ContentChild, ViewEncapsulation, Component, DestroyRef, input, booleanAttribute, viewChild, NgZone, PLATFORM_ID, signal, effect, afterNextRender, HostBinding, ContentChildren, NgModule } from '@angular/core';
 import { MXInteractiveComponent, AXComponent, AXEvent, MXBaseComponent } from '@acorex/cdk/common';
+import * as i1 from '@acorex/cdk/drag-drop';
+import { AXDragDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
 import { NgTemplateOutlet, isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i2 from '@acorex/cdk/horizontal-scroll';
+import { AXHorizontalScrollDirective } from '@acorex/cdk/horizontal-scroll';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { PortalModule } from '@angular/cdk/portal';
 
 class AXTabContentDirective {
     constructor() {
-        this._viewContainerRef = inject(ViewContainerRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.panes = new Map();
+        this.defaultView = null;
     }
     get portal() {
         return this._portal;
@@ -15,14 +22,115 @@ class AXTabContentDirective {
     set portal(v) {
         if (v) {
             this._portal = v;
-            this._viewContainerRef.clear();
-            this._viewContainerRef.createEmbeddedView(v, null, 0);
+            this.activate(v, 'default');
+        }
+    }
+    /**
+     * Shows the given tab template using the specified render mode.
+     */
+    activate(template, mode) {
+        if (!template) {
+            return;
+        }
+        this._portal = template;
+        if (mode === 'default') {
+            this.destroyDefaultView();
+            this.resetKeepAlivePanes();
+            this.viewContainerRef.clear();
+            this.defaultView = this.viewContainerRef.createEmbeddedView(template, null, 0);
+            return;
+        }
+        this.destroyDefaultView();
+        this.ensurePane(template);
+        this.showPane(template);
+    }
+    /**
+     * Ensures embedded views exist for every tab template (all-tabs mode).
+     */
+    preload(templates) {
+        templates.forEach((template) => this.ensurePane(template));
+    }
+    /**
+     * Removes panes whose tab templates are no longer present.
+     */
+    sync(templates) {
+        const activeTemplates = new Set(templates);
+        for (const [template, pane] of this.panes) {
+            if (activeTemplates.has(template)) {
+                continue;
+            }
+            this.destroyPane(template, pane);
+        }
+    }
+    /**
+     * Destroys all cached panes and clears the view container.
+     */
+    reset() {
+        this.destroyDefaultView();
+        this.resetKeepAlivePanes();
+        this.viewContainerRef.clear();
+    }
+    ngOnDestroy() {
+        this.reset();
+    }
+    destroyDefaultView() {
+        if (!this.defaultView) {
+            return;
         }
+        this.defaultView.destroy();
+        this.defaultView = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXTabContentDirective, isStandalone: true, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 }); }
+    resetKeepAlivePanes() {
+        for (const [template, pane] of this.panes) {
+            this.destroyPane(template, pane);
+        }
+        this.panes.clear();
+    }
+    ensurePane(template) {
+        const existing = this.panes.get(template);
+        if (existing && !existing.view.destroyed) {
+            return existing;
+        }
+        if (existing) {
+            this.panes.delete(template);
+            this.renderer.removeChild(existing.host.parentElement, existing.host);
+        }
+        const view = this.viewContainerRef.createEmbeddedView(template, null, this.viewContainerRef.length);
+        const host = this.renderer.createElement('div');
+        this.renderer.addClass(host, 'ax-tab-content-pane');
+        this.renderer.setAttribute(host, 'hidden', '');
+        const anchor = this.viewContainerRef.element.nativeElement;
+        this.renderer.insertBefore(anchor.parentElement, host, anchor);
+        for (const node of view.rootNodes) {
+            this.renderer.appendChild(host, node);
+        }
+        const pane = { view, host };
+        this.panes.set(template, pane);
+        return pane;
+    }
+    showPane(template) {
+        for (const [paneTemplate, pane] of this.panes) {
+            if (paneTemplate === template) {
+                this.renderer.removeAttribute(pane.host, 'hidden');
+            }
+            else {
+                this.renderer.setAttribute(pane.host, 'hidden', '');
+            }
+        }
+    }
+    destroyPane(template, pane) {
+        if (!pane.view.destroyed) {
+            pane.view.destroy();
+        }
+        if (pane.host.parentElement) {
+            this.renderer.removeChild(pane.host.parentElement, pane.host);
+        }
+        this.panes.delete(template);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXTabContentDirective, isStandalone: true, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axTabContent]',
@@ -31,13 +139,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Marks an `ng-template` as tab panel content. Use this instead of projecting
+ * components directly into `ax-content` when you need `renderMode="default"`
+ * to destroy and recreate panel state on each tab switch.
+ *
+ * @example
+ * ```html
+ * <ax-tab-item text="Account">
+ *   <ng-template axTabPanel>
+ *     <my-panel />
+ *   </ng-template>
+ * </ax-tab-item>
+ * ```
+ */
+class AXTabPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXTabPanelDirective, isStandalone: true, selector: "ng-template[axTabPanel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[axTabPanel]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * @category
  *  Represents an individual tab item in a tab component.
  */
 class AXTabItemComponent extends MXInteractiveComponent {
     constructor() {
-        super(...arguments);
+        super();
+        this._drag = inject(AXDragDirective, { self: true });
+        this._reorderEnabled = false;
+        this._panTouchAction = 'none';
         /**
          * Emits an event when the `active` state of the component changes.
          * @event
@@ -50,6 +189,15 @@ class AXTabItemComponent extends MXInteractiveComponent {
         this.onClick = new EventEmitter();
         /** @ignore */
         this._active = false;
+        this._drag.isDragDisabled.set(true);
+        this._drag.dragCursorOverride.set('none');
+    }
+    /**
+     * Template rendered for this tab's content area.
+     * Prefer `ng-template[axTabPanel]` so `renderMode="default"` can recreate panel state.
+     */
+    get template() {
+        return this._panel?.template ?? this._contentTemplate;
     }
     /**
      * Gets or sets the component's active state, controlling its behavior and appearance.
@@ -67,6 +215,33 @@ class AXTabItemComponent extends MXInteractiveComponent {
             },
         });
     }
+    /** @ignore */
+    setReorderEnabled(enabled, delay = 0, touchAction = 'none') {
+        this._reorderEnabled = enabled;
+        this._panTouchAction = touchAction;
+        this._drag.startDelay.set(enabled ? delay : 0);
+        this._drag.dragTouchAction.set(touchAction);
+        this._drag.dragCursorOverride.set(enabled ? 'grab-on-drag' : 'none');
+        this.updateDragState();
+    }
+    /** @ignore */
+    updateDragState() {
+        this._drag.isDragDisabled.set(!this._reorderEnabled || this.disabled);
+        this.applyScrollTouchAction();
+    }
+    /** @ignore */
+    applyScrollTouchAction() {
+        const handle = this.getHostElement();
+        if (this._reorderEnabled) {
+            return;
+        }
+        if (this._panTouchAction !== 'none') {
+            handle.style.touchAction = this._panTouchAction;
+        }
+        else {
+            handle.style.removeProperty('touch-action');
+        }
+    }
     /**
      * @ignore
      */
@@ -88,6 +263,7 @@ class AXTabItemComponent extends MXInteractiveComponent {
         const classListRef = this.getHostElement().classList;
         if (option.name == 'disabled') {
             option.value ? classListRef.add('ax-state-disabled') : classListRef.remove('ax-state-disabled');
+            this.updateDragState();
         }
         if (option.name == 'active') {
             option.value ? classListRef.add('ax-state-active') : classListRef.remove('ax-state-active');
@@ -100,14 +276,14 @@ class AXTabItemComponent extends MXInteractiveComponent {
      */
     getStats() {
         return {
-            width: this.getHostElement().clientWidth,
-            height: this.getHostElement().clientHeight,
+            width: this.getHostElement().offsetWidth,
+            height: this.getHostElement().offsetHeight,
             left: this.getHostElement().offsetLeft,
             top: this.getHostElement().offsetTop,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXTabItemComponent, isStandalone: true, selector: "ax-tab-item", inputs: { disabled: "disabled", text: "text", key: "key", headerTemplate: "headerTemplate", active: "active" }, outputs: { disabledChange: "disabledChange", onClick: "onClick", onBlur: "onBlur", onFocus: "onFocus", activeChange: "activeChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXTabItemComponent, isStandalone: true, selector: "ax-tab-item", inputs: { disabled: "disabled", text: "text", key: "key", headerTemplate: "headerTemplate", active: "active" }, outputs: { disabledChange: "disabledChange", onClick: "onClick", onBlur: "onBlur", onFocus: "onFocus", activeChange: "activeChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }], queries: [{ propertyName: "_panel", first: true, predicate: AXTabPanelDirective, descendants: true }], viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDragDirective, inputs: ["dragStartDelay", "dragStartDelay", "dragClonedTemplate", "dragClonedTemplate"] }], ngImport: i0, template: `
     @if (headerTemplate) {
       <ng-container
         [ngTemplateOutlet]="headerTemplate"
@@ -121,8 +297,8 @@ class AXTabItemComponent extends MXInteractiveComponent {
         }"
       ></ng-container>
     } @else {
-      <div>
-        <ng-content select="ax-prefix"></ng-content>
+      <ng-content select="ax-prefix"></ng-content>
+      <div class="ax-tab-item-header">
         <div class="ax-tab-item-text">{{ text }}</div>
       </div>
       <ng-content select="ax-suffix"></ng-content>
@@ -132,10 +308,16 @@ class AXTabItemComponent extends MXInteractiveComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
+                    hostDirectives: [
+                        {
+                            directive: AXDragDirective,
+                            inputs: ['dragStartDelay', 'dragClonedTemplate'],
+                        },
+                    ],
                     template: `
     @if (headerTemplate) {
       <ng-container
@@ -150,8 +332,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }"
       ></ng-container>
     } @else {
-      <div>
-        <ng-content select="ax-prefix"></ng-content>
+      <ng-content select="ax-prefix"></ng-content>
+      <div class="ax-tab-item-header">
         <div class="ax-tab-item-text">{{ text }}</div>
       </div>
       <ng-content select="ax-suffix"></ng-content>
@@ -167,11 +349,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     imports: [NgTemplateOutlet],
                     providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }],
                 }]
-        }], propDecorators: { text: [{
+        }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
             }], key: [{
                 type: Input
-            }], template: [{
+            }], _panel: [{
+                type: ContentChild,
+                args: [AXTabPanelDirective]
+            }], _contentTemplate: [{
                 type: ViewChild,
                 args: ['content']
             }], headerTemplate: [{
@@ -189,15 +374,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class AXTabStripChangedEvent extends AXEvent {
 }
+/** Event emitted when tab items are reordered via drag and drop. */
+class AXTabsReorderedEvent extends AXEvent {
+}
 
 /**
  * @category
  * A component that serves as a container for tab items.
  */
 class AXTabsComponent extends MXBaseComponent {
+    /**
+     * The `AXTabContentDirective` associated with the tab.
+     */
+    set content(value) {
+        this._content = value;
+        if (value && this._selectedItem) {
+            this._renderContent(this._selectedItem);
+        }
+    }
+    get content() {
+        return this._content;
+    }
+    get items() {
+        const tabs = this._contentTabs?.toArray() ?? [];
+        if (!isPlatformBrowser(this.platformId) || tabs.length < 2) {
+            return tabs;
+        }
+        return [...tabs].sort((a, b) => a.getHostElement().compareDocumentPosition(b.getHostElement()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+    }
+    /** @ignore */
+    get selectedIndex() {
+        return this.items.indexOf(this._selectedItem);
+    }
+    /** @ignore */
+    get selectedItem() {
+        return this._selectedItem;
+    }
+    #reorderableEffect;
+    #orientationEffect;
+    #tabChange;
+    #renderModeEffect;
+    /** @ignore */
+    get __hostClass() {
+        const cssClasses = [];
+        cssClasses.push(`ax-${this.look()}`);
+        cssClasses.push(`ax-${this.location()}`);
+        if (this.fitParent)
+            cssClasses.push(`ax-tabs-fit`);
+        if (this.reorderable())
+            cssClasses.push(`ax-tabs-reorderable`);
+        if (this.stacked())
+            cssClasses.push(`ax-tabs-stacked`);
+        return cssClasses;
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+        this._dropList = inject(AXDropListDirective, { self: true });
+        this._scroll = inject(AXHorizontalScrollDirective, { self: true });
         /**
          * Sets the appearance style of the tab component.
          *  @defaultValue 'default'
@@ -210,6 +445,38 @@ class AXTabsComponent extends MXBaseComponent {
          */
         this.location = input('bottom', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "location" }] : /* istanbul ignore next */ []));
+        /**
+         * Enables drag-and-drop reordering of tab items. Reordering starts only after the user
+         * presses and holds a tab for {@link reorderDelay} milliseconds; a quick swipe without
+         * holding scrolls the strip instead.
+         * @defaultValue false
+         */
+        this.reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Press-and-hold duration in milliseconds before a tab can be dragged to reorder.
+         * After this delay the cursor changes to grab while the pointer is still held. Moving before
+         * the delay ends cancels reorder and allows swipe or pan scrolling instead.
+         * @defaultValue 250
+         */
+        this.reorderDelay = input(250, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reorderDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls how tab content is rendered in the DOM.
+         *
+         * - `default` — Only the active tab's content is in the DOM. Switching tabs replaces content and does not preserve state.
+         * - `all-tabs` — All tab contents are rendered and kept in the DOM. State is preserved; higher memory use.
+         * - `on-demand` — Only the active tab is rendered initially. Other tabs are rendered on first visit and then kept; state is preserved.
+         *
+         * @defaultValue 'default'
+         */
+        this.renderMode = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderMode" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, stacks prefix, title, and suffix vertically inside each tab header
+         * instead of arranging them in a horizontal row.
+         * @defaultValue false
+         */
+        this.stacked = input(false, { ...(ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @defaultValue 'false'
          * Specifies whether the component should resize to fit its parent container.
@@ -226,43 +493,78 @@ class AXTabsComponent extends MXBaseComponent {
         this.platformId = inject(PLATFORM_ID);
         /** @ignore */
         this._isUserInteraction = false;
+        /** @ignore */
+        this._clickSubscriptions = new WeakSet();
+        /** @ignore */
+        this._activeSubscriptions = new WeakSet();
         this.activeTab = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        this.viewReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewReady" }] : /* istanbul ignore next */ []));
+        this.lastRenderMode = null;
+        this.#reorderableEffect = effect(() => {
+            this._dropList.isSortingDisabled.set(!this.reorderable());
+            this._syncDragState();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#reorderableEffect" }] : /* istanbul ignore next */ []));
+        this.#orientationEffect = effect(() => {
+            const loc = this.location();
+            const vertical = loc === 'start' || loc === 'end';
+            const orientation = vertical ? 'vertical' : 'horizontal';
+            this._dropList.orientation.set(orientation);
+            this._scroll.scrollOrientation.set(orientation);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#orientationEffect" }] : /* istanbul ignore next */ []));
         this.#tabChange = effect(() => {
-            if (this.activeTab() && this.location()) {
-                if (this.look() === 'with-line-color' || this.look() === 'with-line') {
-                    setTimeout(() => {
-                        this.setIndicatorPosition(this.activeTab());
-                    });
-                }
+            const look = this.look();
+            const location = this.location();
+            const activeTab = this.activeTab();
+            if (!location || !activeTab || !this.viewReady()) {
+                return;
+            }
+            if (look !== 'with-line-color' && look !== 'with-line') {
+                return;
             }
+            this.scheduleIndicatorUpdate(activeTab);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#tabChange" }] : /* istanbul ignore next */ []));
+        this.#renderModeEffect = effect(() => {
+            const mode = this.renderMode();
+            const selected = this._selectedItem;
+            if (!selected || !this.content) {
+                return;
+            }
+            if (this.lastRenderMode !== null && this.lastRenderMode !== mode) {
+                this._renderContent(selected);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#renderModeEffect" }] : /* istanbul ignore next */ []));
         /**
          * @event
          */
         this.onActiveTabChanged = new EventEmitter();
-    }
-    get items() {
-        return this._contentTabs.toArray();
-    }
-    /** @ignore */
-    get selectedIndex() {
-        return this.items.indexOf(this._selectedItem);
-    }
-    /** @ignore */
-    get selectedItem() {
-        return this._selectedItem;
-    }
-    #tabChange;
-    /** @ignore */
-    get __hostClass() {
-        const cssClasses = [];
-        cssClasses.push(`ax-${this.look()}`);
-        cssClasses.push(`ax-${this.location()}`);
-        if (this.fitParent)
-            cssClasses.push(`ax-tabs-fit`);
-        return cssClasses;
+        /**
+         * Emitted when tab items are reordered via drag and drop after the press-and-hold
+         * delay has elapsed and the user drags a tab to a new position.
+         * @event
+         */
+        this.onTabsReordered = new EventEmitter();
+        afterNextRender(() => {
+            this.viewReady.set(true);
+            this.scheduleIndicatorUpdate(this.activeTab());
+        });
+        const dropSub = this._dropList.dropListDropped.subscribe((event) => {
+            if (this.reorderable()) {
+                this._applyReorder(event);
+            }
+        });
+        const previewSub = this._dropList.sortPreviewChanged.subscribe(() => {
+            this.scheduleIndicatorUpdate(this.activeTab());
+        });
+        this.destroyRef.onDestroy(() => {
+            dropSub.unsubscribe();
+            previewSub.unsubscribe();
+        });
     }
     /** @ignore */
     ngAfterContentInit() {
@@ -278,15 +580,16 @@ class AXTabsComponent extends MXBaseComponent {
                 this.changes = new ResizeObserver((entries) => {
                     const activeTab = this.activeTab();
                     if (entries[0].contentRect.width && activeTab) {
-                        this.renderer.setStyle(this.indicator().nativeElement, 'transition', 'none');
+                        const indicatorEl = this.indicator()?.nativeElement;
+                        if (!indicatorEl) {
+                            return;
+                        }
+                        this.renderer.setStyle(indicatorEl, 'transition', 'none');
                         this.setIndicatorPosition(activeTab);
-                        this.renderer.removeStyle(this.indicator().nativeElement, 'transition');
+                        this.renderer.removeStyle(indicatorEl, 'transition');
                     }
                 });
-                const activeTab = this.activeTab();
-                if (activeTab)
-                    this.changes.observe(activeTab.getHostElement());
-                this.changes.observe(this.getHostElement());
+                this._observeActiveTabForResize(this.activeTab());
             });
         }
     }
@@ -298,12 +601,109 @@ class AXTabsComponent extends MXBaseComponent {
         const selected = this.items.find((c) => c.active) || this.items[0];
         this.select(selected);
         this.items.forEach((c) => {
-            if (!c.onClick.length) {
+            if (!this._clickSubscriptions.has(c)) {
+                this._clickSubscriptions.add(c);
                 c.onClick.subscribe((t) => {
                     this._isUserInteraction = t.nativeEvent?.isTrusted;
                     this.select(c);
                 });
             }
+            if (!this._activeSubscriptions.has(c)) {
+                this._activeSubscriptions.add(c);
+                c.activeChange.subscribe((isActive) => {
+                    if (!isActive) {
+                        return;
+                    }
+                    if (this._selectedItem !== c) {
+                        this.select(c);
+                        return;
+                    }
+                    this.activeTab.set(c);
+                    this.scheduleIndicatorUpdate(c);
+                });
+            }
+        });
+        this._syncDragState();
+    }
+    /** @ignore */
+    _syncDragState() {
+        const reorderEnabled = this.reorderable();
+        const vertical = this.location() === 'start' || this.location() === 'end';
+        const touchAction = vertical ? 'pan-x' : 'pan-y';
+        this.items.forEach((tab) => {
+            tab.setReorderEnabled(reorderEnabled, this.reorderDelay(), touchAction);
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            if (reorderEnabled) {
+                this.renderer.setStyle(tab.getHostElement(), 'transition-property', 'transform, opacity, translate, background-color, color');
+            }
+            else {
+                this.renderer.removeStyle(tab.getHostElement(), 'transition-property');
+            }
+        });
+    }
+    /** @ignore */
+    _applyReorder(event) {
+        const { previousIndex, currentIndex, item } = event;
+        if (previousIndex === currentIndex || previousIndex < 0 || currentIndex < 0) {
+            return;
+        }
+        const movedEl = item.element();
+        const parent = movedEl.parentElement;
+        if (!parent) {
+            return;
+        }
+        const tabsBeforeMove = this.items.map((t) => t.getHostElement());
+        const tabItem = this.items[previousIndex];
+        const indicator = this.indicator()?.nativeElement;
+        let refNode = null;
+        if (currentIndex >= tabsBeforeMove.length - 1) {
+            refNode = indicator?.parentElement === parent ? indicator : null;
+        }
+        else {
+            const refIndex = currentIndex > previousIndex ? currentIndex + 1 : currentIndex;
+            refNode = tabsBeforeMove[refIndex] ?? (indicator?.parentElement === parent ? indicator : null);
+        }
+        if (refNode) {
+            this.renderer.insertBefore(parent, movedEl, refNode);
+        }
+        else {
+            this.renderer.appendChild(parent, movedEl);
+        }
+        this.zone.run(() => {
+            this.onTabsReordered.emit({
+                component: this,
+                tab: tabItem,
+                previousIndex,
+                currentIndex,
+            });
+        });
+        this.scheduleIndicatorUpdate(this.activeTab());
+        setTimeout(() => this.scheduleIndicatorUpdate(this.activeTab()), 200);
+    }
+    /** @ignore */
+    _observeActiveTabForResize(tab) {
+        if (!this.changes || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.changes.disconnect();
+        if (tab) {
+            this.changes.observe(tab.getHostElement());
+        }
+        this.changes.observe(this.getHostElement());
+    }
+    /** @ignore */
+    scheduleIndicatorUpdate(tab) {
+        if (!tab || !this.viewReady()) {
+            return;
+        }
+        const look = this.look();
+        if (look !== 'with-line' && look !== 'with-line-color') {
+            return;
+        }
+        queueMicrotask(() => {
+            this.setIndicatorPosition(tab);
         });
     }
     /**
@@ -313,17 +713,18 @@ class AXTabsComponent extends MXBaseComponent {
      */
     select(tab) {
         const tabItem = typeof tab == 'number' ? this.items[tab] : tab;
+        if (!tabItem) {
+            return;
+        }
+        const isSameTab = this._selectedItem === tabItem;
         this.activeTab.set(tabItem);
-        //
-        if (!tabItem || this.selectedItem == tabItem)
+        this._renderContent(tabItem);
+        if (isSameTab) {
             return;
+        }
         this._selectedItem = tabItem;
-        //
         this.items.forEach((c) => (c.active = false));
         tabItem.active = true;
-        if (this.content) {
-            this.content.portal = tabItem.template;
-        }
         this.cdr.markForCheck();
         this.onActiveTabChanged.emit({
             component: this,
@@ -332,10 +733,60 @@ class AXTabsComponent extends MXBaseComponent {
             index: this.selectedIndex,
         });
         this._isUserInteraction = false;
+        this._observeActiveTabForResize(tabItem);
+        this.scheduleIndicatorUpdate(tabItem);
+    }
+    /** @ignore */
+    _renderContent(tabItem) {
+        if (!this.content || !tabItem?.template) {
+            return;
+        }
+        const mode = this.renderMode();
+        const templates = this.items.map((item) => item.template).filter(Boolean);
+        if (this.lastRenderMode !== null && this.lastRenderMode !== mode) {
+            this.content.reset();
+        }
+        this.lastRenderMode = mode;
+        if (mode === 'default') {
+            this.content.activate(tabItem.template, mode);
+            return;
+        }
+        this.content.sync(templates);
+        if (mode === 'all-tabs') {
+            this.content.preload(templates);
+        }
+        this.content.activate(tabItem.template, mode);
+    }
+    /** @ignore */
+    getTabIndicatorStats(tabItem) {
+        const tabEl = tabItem.getHostElement();
+        const stats = tabItem.getStats();
+        if (!isPlatformBrowser(this.platformId)) {
+            return stats;
+        }
+        const transform = tabEl.style.transform || getComputedStyle(tabEl).transform;
+        if (!transform || transform === 'none') {
+            return stats;
+        }
+        try {
+            const matrix = new DOMMatrixReadOnly(transform);
+            return {
+                ...stats,
+                left: stats.left + matrix.m41,
+                top: stats.top + matrix.m42,
+            };
+        }
+        catch {
+            return stats;
+        }
     }
     setIndicatorPosition(tabItem) {
-        const indicatorStyle = this.indicator().nativeElement.style;
-        const itemStats = tabItem.getStats();
+        const indicatorEl = this.indicator()?.nativeElement;
+        if (!indicatorEl) {
+            return;
+        }
+        const itemStats = this.getTabIndicatorStats(tabItem);
+        const indicatorStyle = indicatorEl.style;
         if (this.location() === 'top' || this.location() === 'bottom') {
             indicatorStyle.width = `${itemStats.width}px`;
             indicatorStyle.height = `var(--ax-comp-tabs-indicator-size)`;
@@ -355,6 +806,8 @@ class AXTabsComponent extends MXBaseComponent {
             indicatorStyle.height = `${itemStats.height}px`;
             indicatorStyle.top = `${itemStats.top}px`;
             indicatorStyle.bottom = `unset`;
+            indicatorStyle.left = `unset`;
+            indicatorStyle.right = `unset`;
             if (this.location() === 'start') {
                 indicatorStyle.insetInlineStart = `0px`;
                 indicatorStyle.insetInlineEnd = `unset`;
@@ -365,20 +818,16 @@ class AXTabsComponent extends MXBaseComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXTabsComponent, isStandalone: true, selector: "ax-tabs", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTabChanged: "onActiveTabChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<div class="ax-tabs-scroll-area">
-    <ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>
-  </div>`, isInline: true, styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:flex;width:100%;gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px}ax-tabs .ax-tabs-scroll-area{position:relative;display:inline-flex;min-width:100%;flex:none;gap:calc(var(--spacing, .25rem) * 2)}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;cursor:pointer;justify-content:space-between;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-text{display:inline-flex;flex-wrap:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-tabs ax-tab-item .ax-tab-item-text{white-space:nowrap}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) .ax-tabs-scroll-area{flex-direction:row}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) .ax-tabs-scroll-area{flex-direction:column}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tabs-scroll-area{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tabs-scroll-area{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{inset-inline-start:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tabs-scroll-area{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{inset-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tabs-scroll-area{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXTabsComponent, isStandalone: true, selector: "ax-tabs", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, reorderDelay: { classPropertyName: "reorderDelay", publicName: "reorderDelay", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTabChanged: "onActiveTabChanged", onTabsReordered: "onTabsReordered" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.AXDropListDirective }, { directive: i2.AXHorizontalScrollDirective }], ngImport: i0, template: `<ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>`, isInline: true, styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:inline-flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:none;gap:calc(var(--spacing, .25rem) * 2);overscroll-behavior:contain;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px;-ms-overflow-style:none;scrollbar-width:none}ax-tabs::-webkit-scrollbar{display:none}ax-tabs.ax-tabs-reorderable ax-tab-item.ax-dragging{cursor:grabbing}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:flex-start;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item.ax-dragging{background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));color:rgba(var(--ax-comp-tabs-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:nowrap;align-items:center}ax-tabs ax-tab-item ax-prefix,ax-tabs ax-tab-item ax-suffix{display:flex;flex-shrink:0;align-items:center}ax-tabs ax-tab-item ax-suffix{margin-inline-start:auto}ax-tabs ax-tab-item .ax-tab-item-text{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 2);white-space:nowrap}ax-tabs.ax-tabs-fit{width:100%;min-width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{flex-shrink:0;align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{inset-inline-start:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{inset-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item{flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-header{flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 0)}ax-tab-item.ax-drag-preview{border-radius:var(--ax-sys-border-radius);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-tab-content-pane{display:contents}.ax-tab-content-pane[hidden]{display:none}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tabs', template: `<div class="ax-tabs-scroll-area">
-    <ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>
-  </div>`, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:flex;width:100%;gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px}ax-tabs .ax-tabs-scroll-area{position:relative;display:inline-flex;min-width:100%;flex:none;gap:calc(var(--spacing, .25rem) * 2)}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;cursor:pointer;justify-content:space-between;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-text{display:inline-flex;flex-wrap:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2)}ax-tabs ax-tab-item .ax-tab-item-text{white-space:nowrap}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) .ax-tabs-scroll-area{flex-direction:row}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) .ax-tabs-scroll-area{flex-direction:column}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tabs-scroll-area{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tabs-scroll-area{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{inset-inline-start:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tabs-scroll-area{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{inset-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tabs-scroll-area{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { _contentTabs: [{
+            args: [{ selector: 'ax-tabs', hostDirectives: [AXDropListDirective, AXHorizontalScrollDirective], template: `<ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>`, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["@layer properties;@layer components{ax-tabs{position:relative;display:inline-flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:none;gap:calc(var(--spacing, .25rem) * 2);overscroll-behavior:contain;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--ax-comp-tabs-indicator-size: 2px;-ms-overflow-style:none;scrollbar-width:none}ax-tabs::-webkit-scrollbar{display:none}ax-tabs.ax-tabs-reorderable ax-tab-item.ax-dragging{cursor:grabbing}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:flex-start;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));-webkit-user-select:none;user-select:none}ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit))}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color,inherit))}ax-tabs ax-tab-item.ax-state-active{background-color:rgba(var(--ax-comp-tabs-active-bg-color,inherit));color:rgba(var(--ax-comp-tabs-active-text-color,inherit))}ax-tabs ax-tab-item.ax-dragging{background-color:rgba(var(--ax-comp-tabs-bg-color,inherit));color:rgba(var(--ax-comp-tabs-text-color,inherit))}ax-tabs ax-tab-item .ax-tab-item-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:nowrap;align-items:center}ax-tabs ax-tab-item ax-prefix,ax-tabs ax-tab-item ax-suffix{display:flex;flex-shrink:0;align-items:center}ax-tabs ax-tab-item ax-suffix{margin-inline-start:auto}ax-tabs ax-tab-item .ax-tab-item-text{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 2);white-space:nowrap}ax-tabs.ax-tabs-fit{width:100%;min-width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}:is(ax-tabs.ax-top,ax-tabs.ax-bottom) ax-tab-item{flex-shrink:0;align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-x:hidden;overflow-y:auto}:is(ax-tabs.ax-start,ax-tabs.ax-end) ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-classic.ax-top{border-top-style:var(--tw-border-style);border-top-width:1px}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}ax-tabs.ax-classic.ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}ax-tabs.ax-classic.ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);border-radius:var(--radius-xl, .75rem);background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-tab-item.ax-state-active ax-icon{opacity:100%!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{position:absolute;z-index:1;display:block;background-color:rgba(var(--ax-comp-tabs-indicator-color))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom) .ax-tab-indicator{height:3px;width:calc(var(--spacing, .25rem) * 0);transition-property:width,left;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) .ax-tab-indicator{height:calc(var(--spacing, .25rem) * 0);transition-property:height,top;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}:is(:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start,:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end) ax-tab-item{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top .ax-tab-indicator{top:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom .ax-tab-indicator{bottom:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-bottom ax-tab-item{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start .ax-tab-indicator{inset-inline-start:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-start ax-tab-item{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end .ax-tab-indicator{inset-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color).ax-end ax-tab-item{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:transparent}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:60%}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item{flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-header{flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-tabs.ax-tabs-stacked ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-suffix{padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-tabs.ax-tabs-stacked.ax-with-line,ax-tabs.ax-tabs-stacked.ax-with-line-color) ax-tab-item ax-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 0)}ax-tab-item.ax-drag-preview{border-radius:var(--ax-sys-border-radius);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-tab-content-pane{display:contents}.ax-tab-content-pane[hidden]{display:none}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _contentTabs: [{
                 type: ContentChildren,
                 args: [AXTabItemComponent]
-            }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], fitParent: [{
+            }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], reorderDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderDelay", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], fitParent: [{
                 type: Input
             }], minWidth: [{
                 type: Input
@@ -386,19 +835,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], indicator: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }], onActiveTabChanged: [{
                 type: Output
+            }], onTabsReordered: [{
+                type: Output
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
+const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective, AXTabPanelDirective];
 const MODULES = [CommonModule, PortalModule, AXDecoratorModule];
 class AXTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, imports: [CommonModule, PortalModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent, AXTabContentDirective], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, imports: [CommonModule, PortalModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent, AXTabContentDirective, AXTabPanelDirective], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective, AXTabPanelDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],
@@ -411,5 +862,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule };
+export { AXTabContentDirective, AXTabItemComponent, AXTabPanelDirective, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTabsReorderedEvent };
 //# sourceMappingURL=acorex-components-tabs.mjs.map