@acorex/components 22.2.11 → 22.2.12

package/fesm2022/acorex-components-reaction.mjs

@@ -0,0 +1,144 @@
+import { AXComponent } from '@acorex/cdk/common';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { AXEmojiComponent } from '@acorex/components/emoji';
+import { AXEmojiPickerComponent } from '@acorex/components/emojipicker';
+import { AXPopoverComponent } from '@acorex/components/popover';
+
+/**
+ * Telegram-style reaction chips for chat messages.
+ * Renders emojis with {@link AXEmojiComponent} and opens {@link AXEmojiPickerComponent}
+ * inside {@link AXPopoverComponent} when editable.
+ *
+ * @category Components
+ */
+class AXReactionComponent {
+    constructor() {
+        /**
+         * Aggregated reactions to display.
+         *
+         * @defaultValue []
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * Rendered emoji size in pixels.
+         *
+         * @defaultValue 18
+         */
+        this.size = input(18, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, reactions are interactive and an add button opens the emoji picker popover.
+         *
+         * @defaultValue false
+         */
+        this.editable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, the emoji picker popover is opened.
+         *
+         * @defaultValue false
+         */
+        this.showPicker = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPicker" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the user selects a new reaction or an unselected existing one.
+         */
+        this.add = output();
+        /**
+         * Emits when the user removes their own reaction.
+         */
+        this.remove = output();
+        this.pickerPopover = viewChild('pickerPopover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerPopover" }] : /* istanbul ignore next */ []));
+        /** Whether the emoji picker popover is currently open. */
+        this.pickerOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []));
+        /** Whether the add button should appear pressed while the picker is open. */
+        this.isPickerVisible = computed(() => this.showPicker() || this.pickerOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPickerVisible" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const show = this.showPicker();
+            const popover = this.pickerPopover();
+            if (!popover) {
+                return;
+            }
+            if (show && !popover.isOpen) {
+                void popover.open();
+            }
+        });
+    }
+    /** Toggles a reaction without mutating counts; parent owns state. */
+    onItemClick(item) {
+        if (!this.editable()) {
+            return;
+        }
+        if (item.selected) {
+            this.remove.emit(item.emoji);
+            return;
+        }
+        this.add.emit(item.emoji);
+    }
+    /** Opens or closes the emoji picker popover. */
+    togglePicker(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        const popover = this.pickerPopover();
+        if (!popover) {
+            return;
+        }
+        if (popover.isOpen) {
+            popover.close();
+            return;
+        }
+        void popover.open();
+    }
+    /** Forwards a picker selection as `add` and closes the popover. */
+    onPickerSelected(emoji) {
+        this.add.emit(emoji);
+        this.pickerPopover()?.close();
+    }
+    /** Syncs the add-button pressed state when the popover opens. */
+    onPickerOpened() {
+        this.pickerOpen.set(true);
+    }
+    /** Syncs the add-button pressed state when the popover closes. */
+    onPickerClosed() {
+        this.pickerOpen.set(false);
+    }
+    /** Accessible name for an existing reaction chip. */
+    itemAriaLabel(item) {
+        const selected = item.selected ? ', selected' : '';
+        return `${item.emoji.name}, ${item.count}${selected}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXReactionComponent, isStandalone: true, selector: "ax-reaction", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showPicker: { classPropertyName: "showPicker", publicName: "showPicker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", remove: "remove" }, host: { properties: { "class.ax-reaction-editable": "editable()" }, classAttribute: "ax-reaction-host" }, providers: [{ provide: AXComponent, useExisting: AXReactionComponent }], viewQueries: [{ propertyName: "pickerPopover", first: true, predicate: ["pickerPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-reaction\">\n  @for (item of items(); track item.emoji.code) {\n    <button\n      type=\"button\"\n      class=\"ax-reaction-item\"\n      [class.ax-reaction-item-selected]=\"item.selected\"\n      [class.ax-reaction-item-interactive]=\"editable()\"\n      [attr.aria-label]=\"itemAriaLabel(item)\"\n      [attr.aria-pressed]=\"item.selected ? true : null\"\n      [title]=\"item.emoji.name\"\n      (click)=\"onItemClick(item)\"\n    >\n      <ax-emoji [emoji]=\"item.emoji\" [size]=\"size()\" />\n\n      <span class=\"ax-reaction-count\">\n        {{ item.count }}\n      </span>\n    </button>\n  }\n\n  @if (editable()) {\n    <button\n      #addButton\n      type=\"button\"\n      class=\"ax-reaction-item ax-reaction-add\"\n      [class.ax-reaction-item-selected]=\"isPickerVisible()\"\n      [attr.aria-label]=\"'Add reaction'\"\n      [attr.aria-expanded]=\"isPickerVisible()\"\n      [attr.aria-haspopup]=\"true\"\n      title=\"Add reaction\"\n      (click)=\"togglePicker($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <span class=\"ax-reaction-add-icon\" aria-hidden=\"true\"></span>\n    </button>\n\n    <ax-popover\n      #pickerPopover\n      [target]=\"addButton\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"'bottom-start'\"\n      panelClass=\"ax-reaction-picker-panel\"\n      (onOpened)=\"onPickerOpened()\"\n      (onClosed)=\"onPickerClosed()\"\n    >\n      <ax-emoji-picker (selected)=\"onPickerSelected($event)\" />\n    </ax-popover>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-reaction{--ax-comp-reaction-gap: .25rem;--ax-comp-reaction-item-gap: .25rem;--ax-comp-reaction-item-padding-x: .4rem;--ax-comp-reaction-item-padding-y: .125rem;--ax-comp-reaction-item-min-height: 1.5rem;--ax-comp-reaction-item-radius: 9999px;--ax-comp-reaction-item-font-size: .6875rem;--ax-comp-reaction-item-bg: var(--color-surface);--ax-comp-reaction-item-border: var(--color-border-lightest);--ax-comp-reaction-item-color: var(--color-on-surface);--ax-comp-reaction-item-hover-bg: var(--color-lightest);--ax-comp-reaction-item-selected-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-reaction-item-selected-border: var(--color-border-primary);position:relative;display:inline-flex;align-items:center}@supports (color: color-mix(in lab,red,red)){ax-reaction{--ax-comp-reaction-item-selected-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-reaction .ax-reaction{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ax-comp-reaction-gap)}ax-reaction .ax-reaction-item{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;gap:var(--ax-comp-reaction-item-gap);min-height:var(--ax-comp-reaction-item-min-height);padding:var(--ax-comp-reaction-item-padding-y) var(--ax-comp-reaction-item-padding-x);border-radius:var(--ax-comp-reaction-item-radius);border-color:var(--ax-comp-reaction-item-border);background-color:var(--ax-comp-reaction-item-bg);color:var(--ax-comp-reaction-item-color);font-size:var(--ax-comp-reaction-item-font-size);line-height:1;cursor:default}ax-reaction .ax-reaction-item ax-emoji{pointer-events:none}ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add{cursor:pointer}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):hover{background-color:var(--ax-comp-reaction-item-hover-bg);border-color:var(--color-border-light)}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-reaction .ax-reaction-item-selected{background-color:var(--ax-comp-reaction-item-selected-bg);border-color:var(--ax-comp-reaction-item-selected-border)}ax-reaction .ax-reaction-count{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--ax-comp-reaction-item-color);opacity:.7}ax-reaction .ax-reaction-item-selected .ax-reaction-count{color:var(--color-primary);opacity:.95}ax-reaction .ax-reaction-add{aspect-ratio:1 / 1;min-width:1.5rem;padding-inline:calc(var(--spacing, .25rem) * 0)}ax-reaction .ax-reaction-add-icon{position:relative;display:block;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5)}ax-reaction .ax-reaction-add-icon:before,ax-reaction .ax-reaction-add-icon:after{position:absolute;inset:calc(var(--spacing, .25rem) * 0);margin:auto;border-radius:calc(infinity * 1px);content:\"\";background-color:currentColor}ax-reaction .ax-reaction-add-icon:before{width:100%;height:1.5px}ax-reaction .ax-reaction-add-icon:after{width:1.5px;height:100%}ax-reaction ax-popover{display:contents}.ax-reaction-picker-panel ax-emoji-picker{width:min(22rem,92vw);border:none;box-shadow:none;border-radius:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@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-border-style: solid;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }, { kind: "component", type: AXEmojiPickerComponent, selector: "ax-emoji-picker", inputs: ["items", "size", "appearance", "showSearch", "showRecent", "columns", "searchPlaceholder", "excludeCategories", "excludeCodes", "excludeUnicode", "recentItems"], outputs: ["selected", "recentChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-reaction', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ax-reaction-host',
+                        '[class.ax-reaction-editable]': 'editable()',
+                    }, imports: [AXEmojiComponent, AXEmojiPickerComponent, AXPopoverComponent], providers: [{ provide: AXComponent, useExisting: AXReactionComponent }], template: "<div class=\"ax-reaction\">\n  @for (item of items(); track item.emoji.code) {\n    <button\n      type=\"button\"\n      class=\"ax-reaction-item\"\n      [class.ax-reaction-item-selected]=\"item.selected\"\n      [class.ax-reaction-item-interactive]=\"editable()\"\n      [attr.aria-label]=\"itemAriaLabel(item)\"\n      [attr.aria-pressed]=\"item.selected ? true : null\"\n      [title]=\"item.emoji.name\"\n      (click)=\"onItemClick(item)\"\n    >\n      <ax-emoji [emoji]=\"item.emoji\" [size]=\"size()\" />\n\n      <span class=\"ax-reaction-count\">\n        {{ item.count }}\n      </span>\n    </button>\n  }\n\n  @if (editable()) {\n    <button\n      #addButton\n      type=\"button\"\n      class=\"ax-reaction-item ax-reaction-add\"\n      [class.ax-reaction-item-selected]=\"isPickerVisible()\"\n      [attr.aria-label]=\"'Add reaction'\"\n      [attr.aria-expanded]=\"isPickerVisible()\"\n      [attr.aria-haspopup]=\"true\"\n      title=\"Add reaction\"\n      (click)=\"togglePicker($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <span class=\"ax-reaction-add-icon\" aria-hidden=\"true\"></span>\n    </button>\n\n    <ax-popover\n      #pickerPopover\n      [target]=\"addButton\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"'bottom-start'\"\n      panelClass=\"ax-reaction-picker-panel\"\n      (onOpened)=\"onPickerOpened()\"\n      (onClosed)=\"onPickerClosed()\"\n    >\n      <ax-emoji-picker (selected)=\"onPickerSelected($event)\" />\n    </ax-popover>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-reaction{--ax-comp-reaction-gap: .25rem;--ax-comp-reaction-item-gap: .25rem;--ax-comp-reaction-item-padding-x: .4rem;--ax-comp-reaction-item-padding-y: .125rem;--ax-comp-reaction-item-min-height: 1.5rem;--ax-comp-reaction-item-radius: 9999px;--ax-comp-reaction-item-font-size: .6875rem;--ax-comp-reaction-item-bg: var(--color-surface);--ax-comp-reaction-item-border: var(--color-border-lightest);--ax-comp-reaction-item-color: var(--color-on-surface);--ax-comp-reaction-item-hover-bg: var(--color-lightest);--ax-comp-reaction-item-selected-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-reaction-item-selected-border: var(--color-border-primary);position:relative;display:inline-flex;align-items:center}@supports (color: color-mix(in lab,red,red)){ax-reaction{--ax-comp-reaction-item-selected-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-reaction .ax-reaction{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ax-comp-reaction-gap)}ax-reaction .ax-reaction-item{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;gap:var(--ax-comp-reaction-item-gap);min-height:var(--ax-comp-reaction-item-min-height);padding:var(--ax-comp-reaction-item-padding-y) var(--ax-comp-reaction-item-padding-x);border-radius:var(--ax-comp-reaction-item-radius);border-color:var(--ax-comp-reaction-item-border);background-color:var(--ax-comp-reaction-item-bg);color:var(--ax-comp-reaction-item-color);font-size:var(--ax-comp-reaction-item-font-size);line-height:1;cursor:default}ax-reaction .ax-reaction-item ax-emoji{pointer-events:none}ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add{cursor:pointer}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):hover{background-color:var(--ax-comp-reaction-item-hover-bg);border-color:var(--color-border-light)}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-reaction .ax-reaction-item-selected{background-color:var(--ax-comp-reaction-item-selected-bg);border-color:var(--ax-comp-reaction-item-selected-border)}ax-reaction .ax-reaction-count{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--ax-comp-reaction-item-color);opacity:.7}ax-reaction .ax-reaction-item-selected .ax-reaction-count{color:var(--color-primary);opacity:.95}ax-reaction .ax-reaction-add{aspect-ratio:1 / 1;min-width:1.5rem;padding-inline:calc(var(--spacing, .25rem) * 0)}ax-reaction .ax-reaction-add-icon{position:relative;display:block;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5)}ax-reaction .ax-reaction-add-icon:before,ax-reaction .ax-reaction-add-icon:after{position:absolute;inset:calc(var(--spacing, .25rem) * 0);margin:auto;border-radius:calc(infinity * 1px);content:\"\";background-color:currentColor}ax-reaction .ax-reaction-add-icon:before{width:100%;height:1.5px}ax-reaction .ax-reaction-add-icon:after{width:1.5px;height:100%}ax-reaction ax-popover{display:contents}.ax-reaction-picker-panel ax-emoji-picker{width:min(22rem,92vw);border:none;box-shadow:none;border-radius:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@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-border-style: solid;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], showPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPicker", required: false }] }], add: [{ type: i0.Output, args: ["add"] }], remove: [{ type: i0.Output, args: ["remove"] }], pickerPopover: [{ type: i0.ViewChild, args: ['pickerPopover', { isSignal: true }] }] } });
+
+class AXReactionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, imports: [AXReactionComponent], exports: [AXReactionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, imports: [AXReactionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXReactionComponent],
+                    exports: [AXReactionComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXReactionComponent, AXReactionModule };
+//# sourceMappingURL=acorex-components-reaction.mjs.map

package/fesm2022/acorex-components-reaction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-reaction.mjs","sources":["../../../../packages/components/reaction/src/lib/reaction.component.ts","../../../../packages/components/reaction/src/lib/reaction.component.html","../../../../packages/components/reaction/src/lib/reaction.module.ts","../../../../packages/components/reaction/src/acorex-components-reaction.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXEmoji } from '@acorex/core/constants';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXEmojiComponent } from '@acorex/components/emoji';\nimport { AXEmojiPickerComponent } from '@acorex/components/emojipicker';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport { AXReactionItem } from './reaction.type';\n\n/**\n * Telegram-style reaction chips for chat messages.\n * Renders emojis with {@link AXEmojiComponent} and opens {@link AXEmojiPickerComponent}\n * inside {@link AXPopoverComponent} when editable.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-reaction',\n  templateUrl: './reaction.component.html',\n  styleUrls: ['./reaction.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ax-reaction-host',\n    '[class.ax-reaction-editable]': 'editable()',\n  },\n  imports: [AXEmojiComponent, AXEmojiPickerComponent, AXPopoverComponent],\n  providers: [{ provide: AXComponent, useExisting: AXReactionComponent }],\n})\nexport class AXReactionComponent {\n  /**\n   * Aggregated reactions to display.\n   *\n   * @defaultValue []\n   */\n  readonly items = input<readonly AXReactionItem[]>([]);\n\n  /**\n   * Rendered emoji size in pixels.\n   *\n   * @defaultValue 18\n   */\n  readonly size = input(18);\n\n  /**\n   * When true, reactions are interactive and an add button opens the emoji picker popover.\n   *\n   * @defaultValue false\n   */\n  readonly editable = input(false);\n\n  /**\n   * When true, the emoji picker popover is opened.\n   *\n   * @defaultValue false\n   */\n  readonly showPicker = input(false);\n\n  /**\n   * Emits when the user selects a new reaction or an unselected existing one.\n   */\n  readonly add = output<AXEmoji>();\n\n  /**\n   * Emits when the user removes their own reaction.\n   */\n  readonly remove = output<AXEmoji>();\n\n  private readonly pickerPopover = viewChild<AXPopoverComponent>('pickerPopover');\n\n  /** Whether the emoji picker popover is currently open. */\n  protected readonly pickerOpen = signal(false);\n\n  /** Whether the add button should appear pressed while the picker is open. */\n  protected readonly isPickerVisible = computed(() => this.showPicker() || this.pickerOpen());\n\n  constructor() {\n    effect(() => {\n      const show = this.showPicker();\n      const popover = this.pickerPopover();\n      if (!popover) {\n        return;\n      }\n\n      if (show && !popover.isOpen) {\n        void popover.open();\n      }\n    });\n  }\n\n  /** Toggles a reaction without mutating counts; parent owns state. */\n  protected onItemClick(item: AXReactionItem): void {\n    if (!this.editable()) {\n      return;\n    }\n\n    if (item.selected) {\n      this.remove.emit(item.emoji);\n      return;\n    }\n\n    this.add.emit(item.emoji);\n  }\n\n  /** Opens or closes the emoji picker popover. */\n  protected togglePicker(event?: Event): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    const popover = this.pickerPopover();\n    if (!popover) {\n      return;\n    }\n\n    if (popover.isOpen) {\n      popover.close();\n      return;\n    }\n\n    void popover.open();\n  }\n\n  /** Forwards a picker selection as `add` and closes the popover. */\n  protected onPickerSelected(emoji: AXEmoji): void {\n    this.add.emit(emoji);\n    this.pickerPopover()?.close();\n  }\n\n  /** Syncs the add-button pressed state when the popover opens. */\n  protected onPickerOpened(): void {\n    this.pickerOpen.set(true);\n  }\n\n  /** Syncs the add-button pressed state when the popover closes. */\n  protected onPickerClosed(): void {\n    this.pickerOpen.set(false);\n  }\n\n  /** Accessible name for an existing reaction chip. */\n  protected itemAriaLabel(item: AXReactionItem): string {\n    const selected = item.selected ? ', selected' : '';\n    return `${item.emoji.name}, ${item.count}${selected}`;\n  }\n}\n","<div class=\"ax-reaction\">\n  @for (item of items(); track item.emoji.code) {\n    <button\n      type=\"button\"\n      class=\"ax-reaction-item\"\n      [class.ax-reaction-item-selected]=\"item.selected\"\n      [class.ax-reaction-item-interactive]=\"editable()\"\n      [attr.aria-label]=\"itemAriaLabel(item)\"\n      [attr.aria-pressed]=\"item.selected ? true : null\"\n      [title]=\"item.emoji.name\"\n      (click)=\"onItemClick(item)\"\n    >\n      <ax-emoji [emoji]=\"item.emoji\" [size]=\"size()\" />\n\n      <span class=\"ax-reaction-count\">\n        {{ item.count }}\n      </span>\n    </button>\n  }\n\n  @if (editable()) {\n    <button\n      #addButton\n      type=\"button\"\n      class=\"ax-reaction-item ax-reaction-add\"\n      [class.ax-reaction-item-selected]=\"isPickerVisible()\"\n      [attr.aria-label]=\"'Add reaction'\"\n      [attr.aria-expanded]=\"isPickerVisible()\"\n      [attr.aria-haspopup]=\"true\"\n      title=\"Add reaction\"\n      (click)=\"togglePicker($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <span class=\"ax-reaction-add-icon\" aria-hidden=\"true\"></span>\n    </button>\n\n    <ax-popover\n      #pickerPopover\n      [target]=\"addButton\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"'bottom-start'\"\n      panelClass=\"ax-reaction-picker-panel\"\n      (onOpened)=\"onPickerOpened()\"\n      (onClosed)=\"onPickerClosed()\"\n    >\n      <ax-emoji-picker (selected)=\"onPickerSelected($event)\" />\n    </ax-popover>\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXReactionComponent } from './reaction.component';\n\n@NgModule({\n  imports: [AXReactionComponent],\n  exports: [AXReactionComponent],\n})\nexport class AXReactionModule {}\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

@@ -804,11 +804,11 @@ class AXTabsComponent extends MXBaseComponent {
         }
     }
     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 }, 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;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;min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;flex-wrap:nowrap;align-items:center;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{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-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 }); }
+    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 }, 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{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;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: [{
             type: Component,
-            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;min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;flex-wrap:nowrap;align-items:center;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{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-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"] }]
+            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{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;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]