@acorex/components 22.1.6 → 22.1.8

package/fesm2022/acorex-components-selection-list.mjs

@@ -125,7 +125,7 @@ class AXSelectionListComponent extends MXSelectionValueComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXSelectionListComponent, isStandalone: true, selector: "ax-selection-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, showControl: { classPropertyName: "showControl", publicName: "showControl", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXSelectionListComponent, isStandalone: true, selector: "ax-selection-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, showControl: { classPropertyName: "showControl", publicName: "showControl", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXSelectionListComponent },
             { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },
             { provide: AXValuableComponent, useExisting: AXSelectionListComponent },
@@ -148,7 +148,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         'disabled',
                         'readonly',
                         'tabIndex',
-                        'size',
                         'value',
                         'valueField',
                         'textField',

package/fesm2022/acorex-components-selection-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-selection-list.mjs","sources":["../../../../packages/components/selection-list/src/lib/selection-list.component.ts","../../../../packages/components/selection-list/src/lib/selection-list.component.html","../../../../packages/components/selection-list/src/lib/selection-list.module.ts","../../../../packages/components/selection-list/src/acorex-components-selection-list.ts"],"sourcesContent":["import {\n  AXComponent,\n  AXDirection,\n  AXFocusableComponent,\n  AXValuableComponent,\n  AX_SELECTION_DATA_TOKEN,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n} from '@acorex/cdk/common';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Component, HostBinding, Input, TemplateRef, ViewEncapsulation, forwardRef, input } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type AXSelectionListLook = 'solid' | 'divided' | 'card';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-selection-list',\n  templateUrl: './selection-list.component.html',\n  styleUrls: ['./selection-list.component.css'],\n  inputs: [\n    'id',\n    'name',\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'size',\n    'value',\n    'valueField',\n    'textField',\n    'disabledField',\n    'readonlyField',\n    'multiple',\n  ],\n  outputs: ['onValueChanged', 'onBlur', 'onFocus'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: AXComponent, useExisting: AXSelectionListComponent },\n    { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },\n    { provide: AXValuableComponent, useExisting: AXSelectionListComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSelectionListComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useClass: MXSelectionBridgeService,\n    },\n  ],\n  imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule],\n})\n\n//TODO: on parent click (card style) -> checkbox or radio change value\nexport class AXSelectionListComponent extends MXSelectionValueComponent {\n  /**\n   * sets the direction of the component.\n   * @param {AXDirection} value\n   */\n  direction = input<AXDirection>('horizontal');\n\n  /**\n   * The custom template used for rendering content.\n   *\n   * @param {TemplateRef<unknown>} customTemplate\n   */\n  customTemplate = input<TemplateRef<unknown>>();\n\n  /** @ignore */\n  private _showControl = true;\n\n  /**\n   * @param {void}\n   * Gets the current state of the control visibility.\n   */\n  @Input()\n  public get showControl(): boolean {\n    return this._showControl;\n  }\n\n  /**\n   * @param {boolean} v\n   * Sets the visibility state of the control.\n   */\n  public set showControl(v: boolean) {\n    this.setOption({\n      name: 'showControl',\n      value: v,\n    });\n  }\n\n  /** @ignore */\n  private _items: any[] = [];\n\n  /**\n   * Gets the list of items.\n   * @param {void}\n   */\n  @Input()\n  public get items(): any[] {\n    return this._items;\n  }\n\n  /**\n   * Sets the list of items.\n   *\n   * @param {any[]} v\n   */\n  public set items(v: any[]) {\n    this.softClearSelectionCache();\n    this.setOption({\n      name: 'items',\n      value: v,\n    });\n  }\n\n  /** @ignore */\n  private _hintField = 'hint';\n\n  /**\n   * Gets the field used for displaying hints.\n   */\n  public get hintField(): string {\n    return this._hintField;\n  }\n\n  /**\n   * Sets the field used for displaying hints.\n   *\n   * @param {string} v\n   */\n  public set hintField(v: string) {\n    this.setOption({\n      name: 'hintField',\n      value: v,\n    });\n  }\n\n  /**\n   * Retrieves an item from the list by its key.\n   *\n   * @param {unknown} key - The key to search for.\n   */\n  getItemByKey(key: unknown): unknown {\n    return this.items.find((c) => c == this.value || c[this.valueField] == key);\n  }\n\n  /**\n   * Defines the visual appearance of the selection list.\n   *\n   * @defaultValue 'solid'\n   */\n  @Input() look: AXSelectionListLook = 'solid';\n\n  /** @ignore */\n  protected _handleOnItemValueChange(item: any, e: Event) {\n    if (this.readonly || this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    } else {\n      (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);\n    }\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return [\n      `ax-look-${this.look}`,\n      `${this.disabled ? 'ax-state-disabled' : ''}`,\n      `${this.readonly ? 'ax-state-readonly' : ''}`,\n    ];\n  }\n}\n","<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSelectionListComponent } from './selection-list.component';\n\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXRadioModule } from '@acorex/components/radio';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    AXCheckBoxModule,\n    AXRadioModule,\n    AXLabelModule,\n    AXFormModule,\n    AXSelectionListComponent,\n  ],\n  exports: [AXSelectionListComponent],\n  providers: [],\n})\nexport class AXSelectionListModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-selection-list.mjs","sources":["../../../../packages/components/selection-list/src/lib/selection-list.component.ts","../../../../packages/components/selection-list/src/lib/selection-list.component.html","../../../../packages/components/selection-list/src/lib/selection-list.module.ts","../../../../packages/components/selection-list/src/acorex-components-selection-list.ts"],"sourcesContent":["import {\n  AXComponent,\n  AXDirection,\n  AXFocusableComponent,\n  AXValuableComponent,\n  AX_SELECTION_DATA_TOKEN,\n  MXSelectionBridgeService,\n  MXSelectionValueComponent,\n} from '@acorex/cdk/common';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { Component, HostBinding, Input, TemplateRef, ViewEncapsulation, forwardRef, input } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type AXSelectionListLook = 'solid' | 'divided' | 'card';\n\n/**\n * The Button is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-selection-list',\n  templateUrl: './selection-list.component.html',\n  styleUrls: ['./selection-list.component.css'],\n  inputs: [\n    'id',\n    'name',\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'value',\n    'valueField',\n    'textField',\n    'disabledField',\n    'readonlyField',\n    'multiple',\n  ],\n  outputs: ['onValueChanged', 'onBlur', 'onFocus'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: AXComponent, useExisting: AXSelectionListComponent },\n    { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },\n    { provide: AXValuableComponent, useExisting: AXSelectionListComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSelectionListComponent),\n      multi: true,\n    },\n    {\n      provide: AX_SELECTION_DATA_TOKEN,\n      useClass: MXSelectionBridgeService,\n    },\n  ],\n  imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule],\n})\n\n//TODO: on parent click (card style) -> checkbox or radio change value\nexport class AXSelectionListComponent extends MXSelectionValueComponent {\n  /**\n   * sets the direction of the component.\n   * @param {AXDirection} value\n   */\n  direction = input<AXDirection>('horizontal');\n\n  /**\n   * The custom template used for rendering content.\n   *\n   * @param {TemplateRef<unknown>} customTemplate\n   */\n  customTemplate = input<TemplateRef<unknown>>();\n\n  /** @ignore */\n  private _showControl = true;\n\n  /**\n   * @param {void}\n   * Gets the current state of the control visibility.\n   */\n  @Input()\n  public get showControl(): boolean {\n    return this._showControl;\n  }\n\n  /**\n   * @param {boolean} v\n   * Sets the visibility state of the control.\n   */\n  public set showControl(v: boolean) {\n    this.setOption({\n      name: 'showControl',\n      value: v,\n    });\n  }\n\n  /** @ignore */\n  private _items: any[] = [];\n\n  /**\n   * Gets the list of items.\n   * @param {void}\n   */\n  @Input()\n  public get items(): any[] {\n    return this._items;\n  }\n\n  /**\n   * Sets the list of items.\n   *\n   * @param {any[]} v\n   */\n  public set items(v: any[]) {\n    this.softClearSelectionCache();\n    this.setOption({\n      name: 'items',\n      value: v,\n    });\n  }\n\n  /** @ignore */\n  private _hintField = 'hint';\n\n  /**\n   * Gets the field used for displaying hints.\n   */\n  public get hintField(): string {\n    return this._hintField;\n  }\n\n  /**\n   * Sets the field used for displaying hints.\n   *\n   * @param {string} v\n   */\n  public set hintField(v: string) {\n    this.setOption({\n      name: 'hintField',\n      value: v,\n    });\n  }\n\n  /**\n   * Retrieves an item from the list by its key.\n   *\n   * @param {unknown} key - The key to search for.\n   */\n  getItemByKey(key: unknown): unknown {\n    return this.items.find((c) => c == this.value || c[this.valueField] == key);\n  }\n\n  /**\n   * Defines the visual appearance of the selection list.\n   *\n   * @defaultValue 'solid'\n   */\n  @Input() look: AXSelectionListLook = 'solid';\n\n  /** @ignore */\n  protected _handleOnItemValueChange(item: any, e: Event) {\n    if (this.readonly || this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    } else {\n      (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);\n    }\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return [\n      `ax-look-${this.look}`,\n      `${this.disabled ? 'ax-state-disabled' : ''}`,\n      `${this.readonly ? 'ax-state-readonly' : ''}`,\n    ];\n  }\n}\n","<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSelectionListComponent } from './selection-list.component';\n\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXRadioModule } from '@acorex/components/radio';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    AXCheckBoxModule,\n    AXRadioModule,\n    AXLabelModule,\n    AXFormModule,\n    AXSelectionListComponent,\n  ],\n  exports: [AXSelectionListComponent],\n  providers: [],\n})\nexport class AXSelectionListModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-tabs.mjs

@@ -1,7 +1,11 @@
 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, Directive, EventEmitter, HostListener, Input, Output, ViewChild, ViewEncapsulation, Component, Renderer2, input, booleanAttribute, viewChild, NgZone, PLATFORM_ID, signal, effect, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import * as i1 from '@acorex/cdk/drag-drop';
+import { AXDragDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
 import { MXInteractiveComponent, AXComponent, AXEvent, MXBaseComponent } from '@acorex/cdk/common';
 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';
 
@@ -38,6 +42,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXTabItemComponent extends MXInteractiveComponent {
     constructor() {
         super(...arguments);
+        this._drag = inject(AXDragDirective, { self: true });
+        this._reorderEnabled = false;
+        this._panTouchAction = 'none';
         /**
          * Emits an event when the `active` state of the component changes.
          * @event
@@ -67,6 +74,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' : '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 +122,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');
@@ -107,7 +142,7 @@ class AXTabItemComponent extends MXInteractiveComponent {
         };
     }
     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.ɵ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, hostDirectives: [{ directive: i1.AXDragDirective, inputs: ["dragCursor", "dragCursor", "dragStartDelay", "dragStartDelay", "dragClonedTemplate", "dragClonedTemplate"] }], ngImport: i0, template: `
     @if (headerTemplate) {
       <ng-container
         [ngTemplateOutlet]="headerTemplate"
@@ -136,6 +171,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
+                    hostDirectives: [
+                        {
+                            directive: AXDragDirective,
+                            inputs: ['dragCursor', 'dragStartDelay', 'dragClonedTemplate'],
+                        },
+                    ],
                     template: `
     @if (headerTemplate) {
       <ng-container
@@ -189,15 +230,49 @@ 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 {
+    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;
+    /** @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`);
+        return cssClasses;
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.renderer = inject(Renderer2);
+        this._dropList = inject(AXDropListDirective, { self: true });
+        this._scroll = inject(AXHorizontalScrollDirective, { self: true });
         /**
          * Sets the appearance style of the tab component.
          *  @defaultValue 'default'
@@ -210,6 +285,21 @@ 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 indicate reorder mode. 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 */ []));
         /**
          * @defaultValue 'false'
          * Specifies whether the component should resize to fit its parent container.
@@ -228,6 +318,19 @@ class AXTabsComponent extends MXBaseComponent {
         this._isUserInteraction = false;
         this.activeTab = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        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') {
@@ -242,27 +345,17 @@ class AXTabsComponent extends MXBaseComponent {
          * @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();
+        this._dropList.dropListDropped.subscribe((event) => {
+            if (this.reorderable()) {
+                this._applyReorder(event);
+            }
+        });
     }
     /** @ignore */
     ngAfterContentInit() {
@@ -305,6 +398,66 @@ class AXTabsComponent extends MXBaseComponent {
                 });
             }
         });
+        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.onTabsReordered.emit({
+            component: this,
+            tab: tabItem,
+            previousIndex,
+            currentIndex,
+        });
+        requestAnimationFrame(() => {
+            const active = this.activeTab();
+            if (active) {
+                this.setIndicatorPosition(active);
+            }
+        });
     }
     /**
      * Activates the specified tab and updates the content.
@@ -365,20 +518,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.0.8", ngImport: i0, type: AXTabsComponent, deps: [], 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 }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, reorderDelay: { classPropertyName: "reorderDelay", publicName: "reorderDelay", 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;width:fit-content;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{cursor:grab}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;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-dragging{cursor:grabbing;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-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{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{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;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-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)}}@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: [{
             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;width:fit-content;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{cursor:grab}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;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-dragging{cursor:grabbing;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-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{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{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;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-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)}}@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 }] }], fitParent: [{
                 type: Input
             }], minWidth: [{
                 type: Input
@@ -386,6 +535,8 @@ 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']
@@ -411,5 +562,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, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTabsReorderedEvent };
 //# sourceMappingURL=acorex-components-tabs.mjs.map