@acorex/components 21.0.1-next.82 → 21.0.1-next.84

package/fesm2022/acorex-components-slider.mjs

@@ -135,7 +135,7 @@ class AXSliderComponent extends classes((MXValueComponent), MXColorComponent) {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXSliderComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  (click)=\"clickHandler($event)\"\n  type=\"range\"\n  [min]=\"minValue\"\n  [max]=\"maxValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [step]=\"step\"\n  [disabled]=\"disabled || readonly\"\n  [readonly]=\"readonly\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  (click)=\"clickHandler($event)\"\n  type=\"range\"\n  [min]=\"minValue\"\n  [max]=\"maxValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [step]=\"step\"\n  [disabled]=\"disabled || readonly\"\n  [readonly]=\"readonly\"\n/>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSliderComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-slider.mjs","sources":["../../../../packages/components/slider/src/lib/slider.component.ts","../../../../packages/components/slider/src/lib/slider.component.html","../../../../packages/components/slider/src/lib/slider.module.ts","../../../../packages/components/slider/src/acorex-components-slider.ts"],"sourcesContent":["import {\n  AXClickEvent,\n  AXComponent,\n  AXDirection,\n  AXValuableComponent,\n  MXColorComponent,\n  MXComponentOptionChanged,\n  MXValueComponent,\n} from '@acorex/cdk/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  NgZone,\n  ViewEncapsulation,\n  forwardRef,\n  inject,\n  output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * @deprecated Use `range slider` instead.\n * This component deprecated and no longer support.\n */\n@Component({\n  selector: 'ax-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  inputs: ['readonly', 'disabled', 'value', 'name', 'color'],\n  outputs: ['valueChange', 'onValueChanged', 'readonlyChange', 'disabledChange', 'onChange'],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXValuableComponent, useExisting: AXSliderComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSliderComponent),\n      multi: true,\n    },\n    { provide: AXComponent, useExisting: AXSliderComponent },\n  ],\n  imports: [FormsModule],\n})\nexport class AXSliderComponent extends classes(MXValueComponent<number>, MXColorComponent) {\n  private _zone = inject(NgZone);\n\n  /**\n   * @event\n   */\n  onClick = output<AXClickEvent>();\n\n  /** @ignore */\n  private _minValue = 0;\n\n  /**\n   *  Specifies the smallest value that is valid\n   */\n  @Input()\n  public get minValue(): number {\n    return this._minValue ?? 0;\n  }\n\n  /**\n   * Sets the minimum value of the slider.\n   *\n   * @param {number} v\n   */\n  public set minValue(v: number) {\n    this.setOption({\n      name: 'minValue',\n      value: v != null ? Number(v) : 0,\n    });\n  }\n\n  /** @ignore */\n  private _maxValue = 100;\n\n  /**\n   *  Specifies the greatest value that is valid\n   */\n  @Input()\n  public get maxValue(): number {\n    return this._maxValue ?? 100;\n  }\n\n  /**\n   * Sets the maximum value of the slider.\n   *\n   * @param {number} v\n   */\n  public set maxValue(v: number) {\n    this.setOption({\n      name: 'maxValue',\n      value: v != null ? Number(v) : 100,\n    });\n  }\n\n  /** @ignore */\n  private _step = 1;\n\n  /**\n   *  Specifies the greatest value that is valid\n   */\n  @Input()\n  public get step(): number {\n    return this._step ?? 100;\n  }\n\n  /**\n   * Sets the step increment for the slider.\n   *\n   * @param {number} v\n   */\n  public set step(v: number) {\n    this.setOption({\n      name: 'step',\n      value: v != null ? Number(v) : 1,\n    });\n  }\n\n  //TODO: vertical dont work properly\n  /**\n   * The direction of the slider.\n   *\n   * @defaultValue 'horizontal'\n   */\n  @Input()\n  direction: AXDirection = 'horizontal';\n\n  /**\n   * Handles changes to internal component options.\n   *\n   * @param {MXComponentOptionChanged} e\n   */\n  override internalOptionChanged(e: MXComponentOptionChanged) {\n    this._calcVars();\n  }\n\n  /**\n   * Handles changes to the component's value.\n   *\n   * @param {number} value\n   */\n  override internalValueChanged(value: number): void {\n    this._calcVars();\n  }\n\n  /** @ignore */\n  protected _handleModelChange(value: number) {\n    this.commitValue(value, true);\n  }\n\n  /** @ignore */\n  private _calcVars() {\n    this._zone.runOutsideAngular(() => {\n      const per = (((this.value ?? 0) - this.minValue) / (this.maxValue - this.minValue)) * 100 - 0.1;\n      this.getHostElement().style.setProperty('--ax-current-value', `${per}%`);\n    });\n  }\n\n  /**\n   * @event\n   *\n   * Emits the value of the clicked input element when the click event occurs.\n   */\n  clickHandler(e: Event) {\n    this.onClick.emit((e.target as HTMLInputElement).value as any);\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return `${this.color} ax-${this.direction}`;\n  }\n\n  /** @ignore */\n  @HostBinding('class.ax-state-disabled')\n  private get __hostClassDisabled(): boolean {\n    return this.disabled;\n  }\n}\n","<input\n  (click)=\"clickHandler($event)\"\n  type=\"range\"\n  [min]=\"minValue\"\n  [max]=\"maxValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [step]=\"step\"\n  [disabled]=\"disabled || readonly\"\n  [readonly]=\"readonly\"\n/>\n","import { AXCommonModule } from '@acorex/cdk/common';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSliderComponent } from './slider.component';\n\nconst COMPONENT = [AXSliderComponent];\nconst MODULES = [CommonModule, AXCommonModule, FormsModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXSliderModule {}\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-slider.mjs","sources":["../../../../packages/components/slider/src/lib/slider.component.ts","../../../../packages/components/slider/src/lib/slider.component.html","../../../../packages/components/slider/src/lib/slider.module.ts","../../../../packages/components/slider/src/acorex-components-slider.ts"],"sourcesContent":["import {\n  AXClickEvent,\n  AXComponent,\n  AXDirection,\n  AXValuableComponent,\n  MXColorComponent,\n  MXComponentOptionChanged,\n  MXValueComponent,\n} from '@acorex/cdk/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  NgZone,\n  ViewEncapsulation,\n  forwardRef,\n  inject,\n  output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * @deprecated Use `range slider` instead.\n * This component deprecated and no longer support.\n */\n@Component({\n  selector: 'ax-slider',\n  templateUrl: './slider.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  inputs: ['readonly', 'disabled', 'value', 'name', 'color'],\n  outputs: ['valueChange', 'onValueChanged', 'readonlyChange', 'disabledChange', 'onChange'],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXValuableComponent, useExisting: AXSliderComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXSliderComponent),\n      multi: true,\n    },\n    { provide: AXComponent, useExisting: AXSliderComponent },\n  ],\n  imports: [FormsModule],\n})\nexport class AXSliderComponent extends classes(MXValueComponent<number>, MXColorComponent) {\n  private _zone = inject(NgZone);\n\n  /**\n   * @event\n   */\n  onClick = output<AXClickEvent>();\n\n  /** @ignore */\n  private _minValue = 0;\n\n  /**\n   *  Specifies the smallest value that is valid\n   */\n  @Input()\n  public get minValue(): number {\n    return this._minValue ?? 0;\n  }\n\n  /**\n   * Sets the minimum value of the slider.\n   *\n   * @param {number} v\n   */\n  public set minValue(v: number) {\n    this.setOption({\n      name: 'minValue',\n      value: v != null ? Number(v) : 0,\n    });\n  }\n\n  /** @ignore */\n  private _maxValue = 100;\n\n  /**\n   *  Specifies the greatest value that is valid\n   */\n  @Input()\n  public get maxValue(): number {\n    return this._maxValue ?? 100;\n  }\n\n  /**\n   * Sets the maximum value of the slider.\n   *\n   * @param {number} v\n   */\n  public set maxValue(v: number) {\n    this.setOption({\n      name: 'maxValue',\n      value: v != null ? Number(v) : 100,\n    });\n  }\n\n  /** @ignore */\n  private _step = 1;\n\n  /**\n   *  Specifies the greatest value that is valid\n   */\n  @Input()\n  public get step(): number {\n    return this._step ?? 100;\n  }\n\n  /**\n   * Sets the step increment for the slider.\n   *\n   * @param {number} v\n   */\n  public set step(v: number) {\n    this.setOption({\n      name: 'step',\n      value: v != null ? Number(v) : 1,\n    });\n  }\n\n  //TODO: vertical dont work properly\n  /**\n   * The direction of the slider.\n   *\n   * @defaultValue 'horizontal'\n   */\n  @Input()\n  direction: AXDirection = 'horizontal';\n\n  /**\n   * Handles changes to internal component options.\n   *\n   * @param {MXComponentOptionChanged} e\n   */\n  override internalOptionChanged(e: MXComponentOptionChanged) {\n    this._calcVars();\n  }\n\n  /**\n   * Handles changes to the component's value.\n   *\n   * @param {number} value\n   */\n  override internalValueChanged(value: number): void {\n    this._calcVars();\n  }\n\n  /** @ignore */\n  protected _handleModelChange(value: number) {\n    this.commitValue(value, true);\n  }\n\n  /** @ignore */\n  private _calcVars() {\n    this._zone.runOutsideAngular(() => {\n      const per = (((this.value ?? 0) - this.minValue) / (this.maxValue - this.minValue)) * 100 - 0.1;\n      this.getHostElement().style.setProperty('--ax-current-value', `${per}%`);\n    });\n  }\n\n  /**\n   * @event\n   *\n   * Emits the value of the clicked input element when the click event occurs.\n   */\n  clickHandler(e: Event) {\n    this.onClick.emit((e.target as HTMLInputElement).value as any);\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return `${this.color} ax-${this.direction}`;\n  }\n\n  /** @ignore */\n  @HostBinding('class.ax-state-disabled')\n  private get __hostClassDisabled(): boolean {\n    return this.disabled;\n  }\n}\n","<input\n  (click)=\"clickHandler($event)\"\n  type=\"range\"\n  [min]=\"minValue\"\n  [max]=\"maxValue\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [step]=\"step\"\n  [disabled]=\"disabled || readonly\"\n  [readonly]=\"readonly\"\n/>\n","import { AXCommonModule } from '@acorex/cdk/common';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXSliderComponent } from './slider.component';\n\nconst COMPONENT = [AXSliderComponent];\nconst MODULES = [CommonModule, AXCommonModule, FormsModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXSliderModule {}\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

@@ -364,13 +364,13 @@ class AXTabsComponent extends MXBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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{@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}}}@layer components{ax-tabs{gap:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-medium,500);width:100%;font-weight:var(--font-weight-medium,500);--ax-comp-tabs-indicator-size:2px;display:flex;position:relative}ax-tabs .ax-tabs-scroll-area{gap:calc(var(--spacing,.25rem) * 2);flex:none;min-width:100%;display:inline-flex;position:relative}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{cursor:pointer;border-radius:var(--radius-lg,.5rem);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;justify-content:space-between;display:flex;position:relative}@media(hover:hover){ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit));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-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing,.25rem) * 2);white-space:nowrap;flex-wrap:nowrap;display:inline-flex}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow:auto 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{justify-content:center;align-items:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow:hidden 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-color:#0000;border-top-left-radius:0;border-top-right-radius:0}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-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}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-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}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-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}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)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *){--ax-comp-tabs-active-bg-color:var(--ax-sys-color-darkest-surface);--ax-comp-tabs-active-text-color:var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default{border-radius:var(--radius-xl,.75rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding:calc(var(--spacing,.25rem) * 1)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);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:1!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{z-index:1;background-color:rgba(var(--ax-comp-tabs-indicator-color));display:block;position:absolute}: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-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:#0000;border-top-left-radius:0;border-top-right-radius:0}: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-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}: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-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}: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-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:.6}: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:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </div>`, isInline: true, styles: ["@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}}}@layer components{ax-tabs{gap:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-medium,500);width:100%;font-weight:var(--font-weight-medium,500);--ax-comp-tabs-indicator-size:2px;display:flex;position:relative}ax-tabs .ax-tabs-scroll-area{gap:calc(var(--spacing,.25rem) * 2);flex:none;min-width:100%;display:inline-flex;position:relative}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{cursor:pointer;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;justify-content:space-between;display:flex;position:relative}@media(hover:hover){ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit));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-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing,.25rem) * 2);white-space:nowrap;flex-wrap:nowrap;display:inline-flex}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow:auto 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{justify-content:center;align-items:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow:hidden 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-color:#0000;border-top-left-radius:0;border-top-right-radius:0}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-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}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-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}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-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}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)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *){--ax-comp-tabs-active-bg-color:var(--ax-sys-color-darkest-surface);--ax-comp-tabs-active-text-color:var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default{border-radius:var(--radius-xl,.75rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding:calc(var(--spacing,.25rem) * 1)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);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:1!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{z-index:1;background-color:rgba(var(--ax-comp-tabs-indicator-color));display:block;position:absolute}: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-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:#0000;border-top-left-radius:0;border-top-right-radius:0}: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-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}: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-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}: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-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:.6}: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:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["@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}}}@layer components{ax-tabs{gap:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-medium,500);width:100%;font-weight:var(--font-weight-medium,500);--ax-comp-tabs-indicator-size:2px;display:flex;position:relative}ax-tabs .ax-tabs-scroll-area{gap:calc(var(--spacing,.25rem) * 2);flex:none;min-width:100%;display:inline-flex;position:relative}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{cursor:pointer;border-radius:var(--radius-lg,.5rem);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;justify-content:space-between;display:flex;position:relative}@media(hover:hover){ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit));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-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing,.25rem) * 2);white-space:nowrap;flex-wrap:nowrap;display:inline-flex}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow:auto 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{justify-content:center;align-items:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow:hidden 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-color:#0000;border-top-left-radius:0;border-top-right-radius:0}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-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}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-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}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-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}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)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *){--ax-comp-tabs-active-bg-color:var(--ax-sys-color-darkest-surface);--ax-comp-tabs-active-text-color:var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default{border-radius:var(--radius-xl,.75rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding:calc(var(--spacing,.25rem) * 1)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);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:1!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{z-index:1;background-color:rgba(var(--ax-comp-tabs-indicator-color));display:block;position:absolute}: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-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:#0000;border-top-left-radius:0;border-top-right-radius:0}: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-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}: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-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}: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-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:.6}: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:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+  </div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["@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}}}@layer components{ax-tabs{gap:calc(var(--spacing,.25rem) * 2);--tw-font-weight:var(--font-weight-medium,500);width:100%;font-weight:var(--font-weight-medium,500);--ax-comp-tabs-indicator-size:2px;display:flex;position:relative}ax-tabs .ax-tabs-scroll-area{gap:calc(var(--spacing,.25rem) * 2);flex:none;min-width:100%;display:inline-flex;position:relative}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{cursor:pointer;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;justify-content:space-between;display:flex;position:relative}@media(hover:hover){ax-tabs ax-tab-item:hover{background-color:rgba(var(--ax-comp-tabs-hover-bg-color,inherit));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-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs ax-tab-item .ax-tab-item-text{padding-inline:calc(var(--spacing,.25rem) * 2);white-space:nowrap;flex-wrap:nowrap;display:inline-flex}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow:auto 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{justify-content:center;align-items:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow:hidden 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-color:#0000;border-top-left-radius:0;border-top-right-radius:0}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-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}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-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}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-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}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)}ax-tabs.ax-default:where(.ax-dark,.ax-dark *){--ax-comp-tabs-active-bg-color:var(--ax-sys-color-darkest-surface);--ax-comp-tabs-active-text-color:var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-default{border-radius:var(--radius-xl,.75rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding:calc(var(--spacing,.25rem) * 1)}ax-tabs.ax-default ax-tab-item.ax-state-active{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);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:1!important}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) .ax-tab-indicator{z-index:1;background-color:rgba(var(--ax-comp-tabs-indicator-color));display:block;position:absolute}: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-style:var(--tw-border-style);border-top-width:var(--ax-comp-tabs-indicator-size);border-top-color:#0000;border-top-left-radius:0;border-top-right-radius:0}: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-style:var(--tw-border-style);border-bottom-width:var(--ax-comp-tabs-indicator-size);border-bottom-color:#0000;border-bottom-right-radius:0;border-bottom-left-radius:0}: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-inline-start-style:var(--tw-border-style);border-inline-start-width:var(--ax-comp-tabs-indicator-size);border-inline-start-color:#0000;border-start-start-radius:0;border-end-start-radius:0}: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-inline-end-style:var(--tw-border-style);border-inline-end-width:var(--ax-comp-tabs-indicator-size);border-inline-end-color:#0000;border-start-end-radius:0;border-end-end-radius:0}:is(ax-tabs.ax-with-line,ax-tabs.ax-with-line-color) ax-icon{opacity:.6}: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:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _contentTabs: [{
                 type: ContentChildren,
                 args: [AXTabItemComponent]

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-tabs.mjs","sources":["../../../../packages/components/tabs/src/lib/tab-content.directive.ts","../../../../packages/components/tabs/src/lib/tab-item.component.ts","../../../../packages/components/tabs/src/lib/tabs.class.ts","../../../../packages/components/tabs/src/lib/tabs.component.ts","../../../../packages/components/tabs/src/lib/tabs.module.ts","../../../../packages/components/tabs/src/acorex-components-tabs.ts"],"sourcesContent":["import { Directive, TemplateRef, ViewContainerRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[axTabContent]',\n  exportAs: 'axTabContent',\n  inputs: ['portal: axTabContent'],\n})\nexport class AXTabContentDirective {\n  private _viewContainerRef = inject(ViewContainerRef);\n\n  private _portal: TemplateRef<any> | undefined;\n  public get portal(): TemplateRef<any> | undefined {\n    return this._portal;\n  }\n  public set portal(v: TemplateRef<any> | undefined) {\n    if (v) {\n      this._portal = v;\n      this._viewContainerRef.clear();\n      this._viewContainerRef.createEmbeddedView(v, null, 0);\n    }\n  }\n}\n","import { AXClickEvent, AXComponent, MXComponentOptionChanged, MXInteractiveComponent } from '@acorex/cdk/common';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostListener,\n  Input,\n  Output,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * @category\n *  Represents an individual tab item in a tab component.\n */\n@Component({\n  selector: 'ax-tab-item',\n  template: `\n    @if (headerTemplate) {\n      <ng-container\n        [ngTemplateOutlet]=\"headerTemplate\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: {\n            text: this.text,\n            key: this.key,\n            active: this.active,\n            disabled: this.disabled,\n          },\n        }\"\n      ></ng-container>\n    } @else {\n      <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <div class=\"ax-tab-item-text\">{{ text }}</div>\n      </div>\n      <ng-content select=\"ax-suffix\"></ng-content>\n    }\n    <ng-template #content>\n      <ng-content select=\"ax-content\"> </ng-content>\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['disabled'],\n  outputs: ['disabledChange', 'onClick', 'onBlur', 'onFocus'],\n  host: { ngSkipHydration: 'true' },\n  imports: [NgTemplateOutlet],\n  providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }],\n})\nexport class AXTabItemComponent extends MXInteractiveComponent {\n  /**\n   * Defines the text content to be displayed within the component.\n   */\n  @Input()\n  text: string;\n\n  /**\n   * Defines a unique identifier for the component instance.\n   */\n  @Input()\n  key: string;\n\n  @ViewChild('content')\n  template: TemplateRef<unknown>;\n\n  /**\n   * Defines a custom template for the component's header.\n   */\n  @Input()\n  headerTemplate: TemplateRef<unknown>;\n\n  /**\n   * Emits an event when the `active` state of the component changes.\n   * @event\n   */\n  @Output()\n  activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  /**\n   * Emits an event when the component is clicked.\n   * @event\n   */\n  @Output()\n  onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n  /** @ignore */\n  private _active = false;\n\n  /**\n   * Gets or sets the component's active state, controlling its behavior and appearance.\n   * @param value {boolean}\n   */\n  @Input()\n  public get active(): boolean {\n    return this._active;\n  }\n  public set active(value: boolean) {\n    this.setOption({\n      name: 'active',\n      value,\n      afterCallback: () => {\n        this.cdr.markForCheck();\n      },\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  @HostListener('click', ['$event'])\n  __hostClick(e: MouseEvent) {\n    if (!this.disabled) {\n      this.getHostElement().scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n      this.onClick.emit({\n        component: this,\n        htmlElement: this.getHostElement(),\n        nativeEvent: e,\n      });\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected override internalOptionChanged(option: MXComponentOptionChanged<any>): void {\n    //TODO: change to hostbind\n    const classListRef = this.getHostElement().classList;\n    if (option.name == 'disabled') {\n      option.value ? classListRef.add('ax-state-disabled') : classListRef.remove('ax-state-disabled');\n    }\n    if (option.name == 'active') {\n      option.value ? classListRef.add('ax-state-active') : classListRef.remove('ax-state-active');\n    }\n  }\n\n  /**\n   * Gets the component's position and size statistics.\n   *\n   * @returns object with width, height, left, and top properties\n   */\n  getStats() {\n    return {\n      width: this.getHostElement().clientWidth,\n      height: this.getHostElement().clientHeight,\n      left: this.getHostElement().offsetLeft,\n      top: this.getHostElement().offsetTop,\n    };\n  }\n}\n","import { AXEvent } from '@acorex/cdk/common';\nimport { AXTabItemComponent } from './tab-item.component';\n\nexport class AXTabStripChangedEvent extends AXEvent {\n  tab: AXTabItemComponent;\n  index: number;\n}\n\nexport type AXTabLook = 'default' | 'pills' | 'pills-color' | 'with-line' | 'with-line-color' | 'classic' | 'custom';\n\nexport type AXTabLocation = 'top' | 'bottom' | 'start' | 'end';\n","import { AXComponent, MXBaseComponent } from '@acorex/cdk/common';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  effect,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  inject,\n  input,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  PLATFORM_ID,\n  QueryList,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXTabContentDirective } from './tab-content.directive';\nimport { AXTabItemComponent } from './tab-item.component';\nimport { AXTabLocation, AXTabLook, AXTabStripChangedEvent } from './tabs.class';\n\n/**\n * @category\n * A component that serves as a container for tab items.\n */\n@Component({\n  selector: 'ax-tabs',\n  template: `<div class=\"ax-tabs-scroll-area\">\n    <ng-content select=\"ax-tab-item\"></ng-content><span class=\"ax-tab-indicator\" #indicator></span>\n  </div>`,\n  styleUrl: './tabs.component.compiled.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: AXComponent, useExisting: AXTabsComponent }],\n})\nexport class AXTabsComponent extends MXBaseComponent implements AfterViewInit, AfterContentInit, OnDestroy {\n  private readonly renderer = inject(Renderer2);\n  /**\n   * @ignore\n   */\n  @ContentChildren(AXTabItemComponent)\n  private _contentTabs!: QueryList<AXTabItemComponent>;\n\n  /**\n   * Sets the appearance style of the tab component.\n   *  @defaultValue 'default'\n   */\n  look = input<AXTabLook>('default');\n\n  /**\n   * Specifies the position of the tab component.\n   * @defaultValue 'bottom'\n   */\n  location = input<AXTabLocation>('bottom');\n\n  /**\n   * @defaultValue 'false'\n   * Specifies whether the component should resize to fit its parent container.\n   */\n  @Input()\n  fitParent = false;\n\n  /**\n   * @defaultValue 'false'\n   * Applies a minimum width constraint to the component.\n   */\n  @Input()\n  minWidth = false;\n\n  /**\n   * The `AXTabContentDirective` associated with the tab.\n   */\n  @Input()\n  content!: AXTabContentDirective;\n\n  private indicator = viewChild<ElementRef<HTMLSpanElement>>('indicator');\n\n  private zone = inject(NgZone);\n  private platformId = inject(PLATFORM_ID);\n\n  /** @ignore */\n  private _isUserInteraction = false;\n\n  get items(): AXTabItemComponent[] {\n    return this._contentTabs.toArray();\n  }\n\n  /** @ignore */\n  private _selectedItem!: AXTabItemComponent;\n\n  /** @ignore */\n  get selectedIndex(): number {\n    return this.items.indexOf(this._selectedItem);\n  }\n\n  /** @ignore */\n  get selectedItem(): AXTabItemComponent {\n    return this._selectedItem;\n  }\n\n  private changes: ResizeObserver;\n  private activeTab = signal<AXTabItemComponent>(null);\n\n  #tabChange = effect(() => {\n    if (this.activeTab() && this.location()) {\n      if (this.look() === 'with-line-color' || this.look() === 'with-line') {\n        setTimeout(() => {\n          this.setIndicatorPosition(this.activeTab());\n        });\n      }\n    }\n  });\n\n  /**\n   * @event\n   */\n  @Output()\n  onActiveTabChanged: EventEmitter<AXTabStripChangedEvent> = new EventEmitter<AXTabStripChangedEvent>();\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    const cssClasses: string[] = [];\n    cssClasses.push(`ax-${this.look()}`);\n    cssClasses.push(`ax-${this.location()}`);\n    if (this.fitParent) cssClasses.push(`ax-tabs-fit`);\n    return cssClasses;\n  }\n\n  /** @ignore */\n  ngAfterContentInit() {\n    this._contentTabs.changes.subscribe(() => {\n      this._bindOnClickEvent();\n    });\n  }\n\n  /** @ignore */\n  ngAfterViewInit() {\n    this._bindOnClickEvent();\n    if (isPlatformBrowser(this.platformId)) {\n      this.zone.runOutsideAngular(() => {\n        this.changes = new ResizeObserver((entries) => {\n          const activeTab = this.activeTab();\n          if (entries[0].contentRect.width && activeTab) {\n            this.renderer.setStyle(this.indicator().nativeElement, 'transition', 'none');\n            this.setIndicatorPosition(activeTab);\n            this.renderer.removeStyle(this.indicator().nativeElement, 'transition');\n          }\n        });\n        const activeTab = this.activeTab();\n        if (activeTab) this.changes.observe(activeTab.getHostElement());\n        this.changes.observe(this.getHostElement());\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.changes?.disconnect();\n  }\n\n  /** @ignore */\n  private _bindOnClickEvent() {\n    const selected = this.items.find((c) => c.active) || this.items[0];\n    this.select(selected);\n    this.items.forEach((c) => {\n      if (!c.onClick.length) {\n        c.onClick.subscribe((t) => {\n          this._isUserInteraction = t.nativeEvent?.isTrusted;\n          this.select(c);\n        });\n      }\n    });\n  }\n\n  /**\n   * Activates the specified tab and updates the content.\n   *\n   * @param tab - The tab to select, either by index (number) or by component instance\n   */\n  select(tab: number | AXTabItemComponent) {\n    const tabItem: AXTabItemComponent = typeof tab == 'number' ? this.items[tab] : tab;\n    this.activeTab.set(tabItem);\n    //\n    if (!tabItem || this.selectedItem == tabItem) return;\n    this._selectedItem = tabItem;\n    //\n    this.items.forEach((c) => (c.active = false));\n    tabItem.active = true;\n    if (this.content) {\n      this.content.portal = tabItem.template;\n    }\n    this.cdr.markForCheck();\n    this.onActiveTabChanged.emit({\n      component: this,\n      isUserInteraction: this._isUserInteraction,\n      tab: tabItem,\n      index: this.selectedIndex,\n    });\n    this._isUserInteraction = false;\n  }\n\n  private setIndicatorPosition(tabItem: AXTabItemComponent) {\n    const indicatorStyle = this.indicator().nativeElement.style;\n    const itemStats = tabItem.getStats();\n    if (this.location() === 'top' || this.location() === 'bottom') {\n      indicatorStyle.width = `${itemStats.width}px`;\n      indicatorStyle.height = `var(--ax-comp-tabs-indicator-size)`;\n      indicatorStyle.left = `${itemStats.left}px`;\n      indicatorStyle.right = `unset`;\n      if (this.location() === 'top') {\n        indicatorStyle.top = `0px`;\n        indicatorStyle.bottom = `unset`;\n      }\n      if (this.location() === 'bottom') {\n        indicatorStyle.top = `unset`;\n        indicatorStyle.bottom = `0px`;\n      }\n    }\n    if (this.location() === 'start' || this.location() === 'end') {\n      indicatorStyle.width = ` var(--ax-comp-tabs-indicator-size)`;\n      indicatorStyle.height = `${itemStats.height}px`;\n      indicatorStyle.top = `${itemStats.top}px`;\n      indicatorStyle.bottom = `unset`;\n      if (this.location() === 'start') {\n        indicatorStyle.insetInlineStart = `0px`;\n        indicatorStyle.insetInlineEnd = `unset`;\n      }\n      if (this.location() === 'end') {\n        indicatorStyle.insetInlineStart = `unset`;\n        indicatorStyle.insetInlineEnd = `0px`;\n      }\n    }\n  }\n}\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTabContentDirective } from './tab-content.directive';\nimport { AXTabItemComponent } from './tab-item.component';\nimport { AXTabsComponent } from './tabs.component';\n\nconst COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];\nconst MODULES = [CommonModule, PortalModule, AXDecoratorModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXTabsModule {}\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-tabs.mjs","sources":["../../../../packages/components/tabs/src/lib/tab-content.directive.ts","../../../../packages/components/tabs/src/lib/tab-item.component.ts","../../../../packages/components/tabs/src/lib/tabs.class.ts","../../../../packages/components/tabs/src/lib/tabs.component.ts","../../../../packages/components/tabs/src/lib/tabs.module.ts","../../../../packages/components/tabs/src/acorex-components-tabs.ts"],"sourcesContent":["import { Directive, TemplateRef, ViewContainerRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[axTabContent]',\n  exportAs: 'axTabContent',\n  inputs: ['portal: axTabContent'],\n})\nexport class AXTabContentDirective {\n  private _viewContainerRef = inject(ViewContainerRef);\n\n  private _portal: TemplateRef<any> | undefined;\n  public get portal(): TemplateRef<any> | undefined {\n    return this._portal;\n  }\n  public set portal(v: TemplateRef<any> | undefined) {\n    if (v) {\n      this._portal = v;\n      this._viewContainerRef.clear();\n      this._viewContainerRef.createEmbeddedView(v, null, 0);\n    }\n  }\n}\n","import { AXClickEvent, AXComponent, MXComponentOptionChanged, MXInteractiveComponent } from '@acorex/cdk/common';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostListener,\n  Input,\n  Output,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * @category\n *  Represents an individual tab item in a tab component.\n */\n@Component({\n  selector: 'ax-tab-item',\n  template: `\n    @if (headerTemplate) {\n      <ng-container\n        [ngTemplateOutlet]=\"headerTemplate\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: {\n            text: this.text,\n            key: this.key,\n            active: this.active,\n            disabled: this.disabled,\n          },\n        }\"\n      ></ng-container>\n    } @else {\n      <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <div class=\"ax-tab-item-text\">{{ text }}</div>\n      </div>\n      <ng-content select=\"ax-suffix\"></ng-content>\n    }\n    <ng-template #content>\n      <ng-content select=\"ax-content\"> </ng-content>\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['disabled'],\n  outputs: ['disabledChange', 'onClick', 'onBlur', 'onFocus'],\n  host: { ngSkipHydration: 'true' },\n  imports: [NgTemplateOutlet],\n  providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }],\n})\nexport class AXTabItemComponent extends MXInteractiveComponent {\n  /**\n   * Defines the text content to be displayed within the component.\n   */\n  @Input()\n  text: string;\n\n  /**\n   * Defines a unique identifier for the component instance.\n   */\n  @Input()\n  key: string;\n\n  @ViewChild('content')\n  template: TemplateRef<unknown>;\n\n  /**\n   * Defines a custom template for the component's header.\n   */\n  @Input()\n  headerTemplate: TemplateRef<unknown>;\n\n  /**\n   * Emits an event when the `active` state of the component changes.\n   * @event\n   */\n  @Output()\n  activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  /**\n   * Emits an event when the component is clicked.\n   * @event\n   */\n  @Output()\n  onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n  /** @ignore */\n  private _active = false;\n\n  /**\n   * Gets or sets the component's active state, controlling its behavior and appearance.\n   * @param value {boolean}\n   */\n  @Input()\n  public get active(): boolean {\n    return this._active;\n  }\n  public set active(value: boolean) {\n    this.setOption({\n      name: 'active',\n      value,\n      afterCallback: () => {\n        this.cdr.markForCheck();\n      },\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  @HostListener('click', ['$event'])\n  __hostClick(e: MouseEvent) {\n    if (!this.disabled) {\n      this.getHostElement().scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n      this.onClick.emit({\n        component: this,\n        htmlElement: this.getHostElement(),\n        nativeEvent: e,\n      });\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  protected override internalOptionChanged(option: MXComponentOptionChanged<any>): void {\n    //TODO: change to hostbind\n    const classListRef = this.getHostElement().classList;\n    if (option.name == 'disabled') {\n      option.value ? classListRef.add('ax-state-disabled') : classListRef.remove('ax-state-disabled');\n    }\n    if (option.name == 'active') {\n      option.value ? classListRef.add('ax-state-active') : classListRef.remove('ax-state-active');\n    }\n  }\n\n  /**\n   * Gets the component's position and size statistics.\n   *\n   * @returns object with width, height, left, and top properties\n   */\n  getStats() {\n    return {\n      width: this.getHostElement().clientWidth,\n      height: this.getHostElement().clientHeight,\n      left: this.getHostElement().offsetLeft,\n      top: this.getHostElement().offsetTop,\n    };\n  }\n}\n","import { AXEvent } from '@acorex/cdk/common';\nimport { AXTabItemComponent } from './tab-item.component';\n\nexport class AXTabStripChangedEvent extends AXEvent {\n  tab: AXTabItemComponent;\n  index: number;\n}\n\nexport type AXTabLook = 'default' | 'pills' | 'pills-color' | 'with-line' | 'with-line-color' | 'classic' | 'custom';\n\nexport type AXTabLocation = 'top' | 'bottom' | 'start' | 'end';\n","import { AXComponent, MXBaseComponent } from '@acorex/cdk/common';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  effect,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  inject,\n  input,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  PLATFORM_ID,\n  QueryList,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXTabContentDirective } from './tab-content.directive';\nimport { AXTabItemComponent } from './tab-item.component';\nimport { AXTabLocation, AXTabLook, AXTabStripChangedEvent } from './tabs.class';\n\n/**\n * @category\n * A component that serves as a container for tab items.\n */\n@Component({\n  selector: 'ax-tabs',\n  template: `<div class=\"ax-tabs-scroll-area\">\n    <ng-content select=\"ax-tab-item\"></ng-content><span class=\"ax-tab-indicator\" #indicator></span>\n  </div>`,\n  styleUrl: './tabs.component.compiled.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: AXComponent, useExisting: AXTabsComponent }],\n})\nexport class AXTabsComponent extends MXBaseComponent implements AfterViewInit, AfterContentInit, OnDestroy {\n  private readonly renderer = inject(Renderer2);\n  /**\n   * @ignore\n   */\n  @ContentChildren(AXTabItemComponent)\n  private _contentTabs!: QueryList<AXTabItemComponent>;\n\n  /**\n   * Sets the appearance style of the tab component.\n   *  @defaultValue 'default'\n   */\n  look = input<AXTabLook>('default');\n\n  /**\n   * Specifies the position of the tab component.\n   * @defaultValue 'bottom'\n   */\n  location = input<AXTabLocation>('bottom');\n\n  /**\n   * @defaultValue 'false'\n   * Specifies whether the component should resize to fit its parent container.\n   */\n  @Input()\n  fitParent = false;\n\n  /**\n   * @defaultValue 'false'\n   * Applies a minimum width constraint to the component.\n   */\n  @Input()\n  minWidth = false;\n\n  /**\n   * The `AXTabContentDirective` associated with the tab.\n   */\n  @Input()\n  content!: AXTabContentDirective;\n\n  private indicator = viewChild<ElementRef<HTMLSpanElement>>('indicator');\n\n  private zone = inject(NgZone);\n  private platformId = inject(PLATFORM_ID);\n\n  /** @ignore */\n  private _isUserInteraction = false;\n\n  get items(): AXTabItemComponent[] {\n    return this._contentTabs.toArray();\n  }\n\n  /** @ignore */\n  private _selectedItem!: AXTabItemComponent;\n\n  /** @ignore */\n  get selectedIndex(): number {\n    return this.items.indexOf(this._selectedItem);\n  }\n\n  /** @ignore */\n  get selectedItem(): AXTabItemComponent {\n    return this._selectedItem;\n  }\n\n  private changes: ResizeObserver;\n  private activeTab = signal<AXTabItemComponent>(null);\n\n  #tabChange = effect(() => {\n    if (this.activeTab() && this.location()) {\n      if (this.look() === 'with-line-color' || this.look() === 'with-line') {\n        setTimeout(() => {\n          this.setIndicatorPosition(this.activeTab());\n        });\n      }\n    }\n  });\n\n  /**\n   * @event\n   */\n  @Output()\n  onActiveTabChanged: EventEmitter<AXTabStripChangedEvent> = new EventEmitter<AXTabStripChangedEvent>();\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    const cssClasses: string[] = [];\n    cssClasses.push(`ax-${this.look()}`);\n    cssClasses.push(`ax-${this.location()}`);\n    if (this.fitParent) cssClasses.push(`ax-tabs-fit`);\n    return cssClasses;\n  }\n\n  /** @ignore */\n  ngAfterContentInit() {\n    this._contentTabs.changes.subscribe(() => {\n      this._bindOnClickEvent();\n    });\n  }\n\n  /** @ignore */\n  ngAfterViewInit() {\n    this._bindOnClickEvent();\n    if (isPlatformBrowser(this.platformId)) {\n      this.zone.runOutsideAngular(() => {\n        this.changes = new ResizeObserver((entries) => {\n          const activeTab = this.activeTab();\n          if (entries[0].contentRect.width && activeTab) {\n            this.renderer.setStyle(this.indicator().nativeElement, 'transition', 'none');\n            this.setIndicatorPosition(activeTab);\n            this.renderer.removeStyle(this.indicator().nativeElement, 'transition');\n          }\n        });\n        const activeTab = this.activeTab();\n        if (activeTab) this.changes.observe(activeTab.getHostElement());\n        this.changes.observe(this.getHostElement());\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.changes?.disconnect();\n  }\n\n  /** @ignore */\n  private _bindOnClickEvent() {\n    const selected = this.items.find((c) => c.active) || this.items[0];\n    this.select(selected);\n    this.items.forEach((c) => {\n      if (!c.onClick.length) {\n        c.onClick.subscribe((t) => {\n          this._isUserInteraction = t.nativeEvent?.isTrusted;\n          this.select(c);\n        });\n      }\n    });\n  }\n\n  /**\n   * Activates the specified tab and updates the content.\n   *\n   * @param tab - The tab to select, either by index (number) or by component instance\n   */\n  select(tab: number | AXTabItemComponent) {\n    const tabItem: AXTabItemComponent = typeof tab == 'number' ? this.items[tab] : tab;\n    this.activeTab.set(tabItem);\n    //\n    if (!tabItem || this.selectedItem == tabItem) return;\n    this._selectedItem = tabItem;\n    //\n    this.items.forEach((c) => (c.active = false));\n    tabItem.active = true;\n    if (this.content) {\n      this.content.portal = tabItem.template;\n    }\n    this.cdr.markForCheck();\n    this.onActiveTabChanged.emit({\n      component: this,\n      isUserInteraction: this._isUserInteraction,\n      tab: tabItem,\n      index: this.selectedIndex,\n    });\n    this._isUserInteraction = false;\n  }\n\n  private setIndicatorPosition(tabItem: AXTabItemComponent) {\n    const indicatorStyle = this.indicator().nativeElement.style;\n    const itemStats = tabItem.getStats();\n    if (this.location() === 'top' || this.location() === 'bottom') {\n      indicatorStyle.width = `${itemStats.width}px`;\n      indicatorStyle.height = `var(--ax-comp-tabs-indicator-size)`;\n      indicatorStyle.left = `${itemStats.left}px`;\n      indicatorStyle.right = `unset`;\n      if (this.location() === 'top') {\n        indicatorStyle.top = `0px`;\n        indicatorStyle.bottom = `unset`;\n      }\n      if (this.location() === 'bottom') {\n        indicatorStyle.top = `unset`;\n        indicatorStyle.bottom = `0px`;\n      }\n    }\n    if (this.location() === 'start' || this.location() === 'end') {\n      indicatorStyle.width = ` var(--ax-comp-tabs-indicator-size)`;\n      indicatorStyle.height = `${itemStats.height}px`;\n      indicatorStyle.top = `${itemStats.top}px`;\n      indicatorStyle.bottom = `unset`;\n      if (this.location() === 'start') {\n        indicatorStyle.insetInlineStart = `0px`;\n        indicatorStyle.insetInlineEnd = `unset`;\n      }\n      if (this.location() === 'end') {\n        indicatorStyle.insetInlineStart = `unset`;\n        indicatorStyle.insetInlineEnd = `0px`;\n      }\n    }\n  }\n}\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTabContentDirective } from './tab-content.directive';\nimport { AXTabItemComponent } from './tab-item.component';\nimport { AXTabsComponent } from './tabs.component';\n\nconst COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];\nconst MODULES = [CommonModule, PortalModule, AXDecoratorModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXTabsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-tree-view.mjs

@@ -2350,7 +2350,7 @@ class AXTreeViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, inheritDisabled: { classPropertyName: "inheritDisabled", publicName: "inheritDisabled", isSignal: true, isRequired: false, transformFunction: null }, expandOnDoubleClick: { classPropertyName: "expandOnDoubleClick", publicName: "expandOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, doubleClickDuration: { classPropertyName: "doubleClickDuration", publicName: "doubleClickDuration", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n  <div class=\"ax-tree-view-drop-list\">\n    @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n      <div class=\"ax-tree-view-node\">\n        <div class=\"ax-tree-view-node-content\">\n          <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n          <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-loading]=\"isLoading()\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"\n          isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n        \"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          axDoubleClick\n          [duration]=\"doubleClickDuration()\"\n          [disabled]=\"isDoubleClickDisabledForNode(node)\"\n          (onClick)=\"onNodeClickHandle(node, $event)\"\n          (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          (blur)=\"focusedNodeId.set(null)\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span\n              class=\"ax-tree-view-drag-handle\"\n              axDragHandle\n              title=\"Drag to reorder\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              \u22EE\u22EE\n            </span>\n          }\n          <ax-button\n            look=\"link\"\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            (click)=\"$event.stopPropagation()\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipOpenAfter]=\"tooltipDelay()\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"\n            isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n          \"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            axDoubleClick\n            [duration]=\"doubleClickDuration()\"\n            [disabled]=\"isDoubleClickDisabledForNode(node)\"\n            (onClick)=\"onNodeClickHandle(node, $event)\"\n            (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span\n                class=\"ax-tree-view-drag-handle\"\n                axDragHandle\n                title=\"Drag to reorder\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                \u22EE\u22EE\n              </span>\n            }\n            <ax-button\n              look=\"link\"\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              (click)=\"$event.stopPropagation()\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipOpenAfter]=\"tooltipDelay()\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-surface), .5);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-surface), .2);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-surface));--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{padding:var(--ax-comp-tree-view-expand-toggle-padding)}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{min-width:1.5rem;height:1.5rem;border-radius:.25rem}.ax-tree-view-skeleton-label{flex:1;height:1rem;border-radius:.25rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXDoubleClickDirective, selector: "[axDoubleClick]", inputs: ["duration", "disabled"], outputs: ["onClick", "onDblClick"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, inheritDisabled: { classPropertyName: "inheritDisabled", publicName: "inheritDisabled", isSignal: true, isRequired: false, transformFunction: null }, expandOnDoubleClick: { classPropertyName: "expandOnDoubleClick", publicName: "expandOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, doubleClickDuration: { classPropertyName: "doubleClickDuration", publicName: "doubleClickDuration", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n  <div class=\"ax-tree-view-drop-list\">\n    @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n      <div class=\"ax-tree-view-node\">\n        <div class=\"ax-tree-view-node-content\">\n          <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n          <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-loading]=\"isLoading()\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"\n          isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n        \"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          axDoubleClick\n          [duration]=\"doubleClickDuration()\"\n          [disabled]=\"isDoubleClickDisabledForNode(node)\"\n          (onClick)=\"onNodeClickHandle(node, $event)\"\n          (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          (blur)=\"focusedNodeId.set(null)\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span\n              class=\"ax-tree-view-drag-handle\"\n              axDragHandle\n              title=\"Drag to reorder\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              \u22EE\u22EE\n            </span>\n          }\n          <ax-button\n            look=\"link\"\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            (click)=\"$event.stopPropagation()\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipOpenAfter]=\"tooltipDelay()\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"\n            isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n          \"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            axDoubleClick\n            [duration]=\"doubleClickDuration()\"\n            [disabled]=\"isDoubleClickDisabledForNode(node)\"\n            (onClick)=\"onNodeClickHandle(node, $event)\"\n            (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span\n                class=\"ax-tree-view-drag-handle\"\n                axDragHandle\n                title=\"Drag to reorder\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                \u22EE\u22EE\n              </span>\n            }\n            <ax-button\n              look=\"link\"\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              (click)=\"$event.stopPropagation()\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipOpenAfter]=\"tooltipDelay()\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{--ax-comp-tree-view-indent-size:12px;--ax-comp-tree-view-node-hover-bg:rgba(var(--ax-sys-color-surface), .5);--ax-comp-tree-view-node-selected-bg:rgba(var(--ax-sys-color-primary-surface), .2);--ax-comp-tree-view-node-active-bg:rgba(var(--ax-sys-color-surface));--ax-comp-tree-view-node-border-radius:6px;--ax-comp-tree-view-node-margin:.25rem;--ax-comp-tree-view-line-color:rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity:.9;--ax-comp-tree-view-drag-placeholder-bg:rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg:rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline:rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding:0;--ax-comp-tree-view-content-gap:.5rem;--ax-comp-tree-view-drop-list-min-height:2rem;--ax-comp-tree-view-drag-handle-padding:.25rem;--ax-comp-tree-view-badge-padding:.25rem;--ax-comp-tree-view-expand-toggle-padding:.25rem;--ax-comp-tree-view-outline-offset:2px;--ax-comp-tree-view-outline-offset-negative:-2px;width:100%;display:block}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move;position:relative}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--ax-comp-tree-view-node-border-radius);outline:none;display:flex}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{padding:var(--ax-comp-tree-view-expand-toggle-padding)}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{flex-shrink:0;font-size:1.125rem}.ax-tree-view-node-label{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.875rem;line-height:1rem;overflow:hidden}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size,var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size,var(--ax-comp-tree-view-indent-size));position:relative}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";background:var(--ax-tree-view-line-color,var(--ax-comp-tree-view-line-color));inset-inline-start:var(--ax-tree-view-line-offset,calc(var(--ax-comp-tree-view-indent-size) / 2));width:1px;height:calc(100% - .875rem);position:absolute;top:0}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";width:var(--ax-tree-view-line-offset,calc(var(--ax-comp-tree-view-indent-size) / 2));background:var(--ax-tree-view-line-color,var(--ax-comp-tree-view-line-color));inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset,calc(var(--ax-comp-tree-view-indent-size) / 2)));height:1px;position:absolute;top:60%}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{border-radius:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree-view-skeleton-label{border-radius:.25rem;flex:1;height:1rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXDoubleClickDirective, selector: "[axDoubleClick]", inputs: ["duration", "disabled"], outputs: ["onClick", "onDblClick"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
@@ -2383,7 +2383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         '(keydown)': 'handleKeyDown($event)',
                         '(focus)': 'onTreeFocus($event)',
                         '(blur)': 'onTreeBlur($event)',
-                    }, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n  <div class=\"ax-tree-view-drop-list\">\n    @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n      <div class=\"ax-tree-view-node\">\n        <div class=\"ax-tree-view-node-content\">\n          <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n          <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-loading]=\"isLoading()\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"\n          isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n        \"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          axDoubleClick\n          [duration]=\"doubleClickDuration()\"\n          [disabled]=\"isDoubleClickDisabledForNode(node)\"\n          (onClick)=\"onNodeClickHandle(node, $event)\"\n          (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          (blur)=\"focusedNodeId.set(null)\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span\n              class=\"ax-tree-view-drag-handle\"\n              axDragHandle\n              title=\"Drag to reorder\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              \u22EE\u22EE\n            </span>\n          }\n          <ax-button\n            look=\"link\"\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            (click)=\"$event.stopPropagation()\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipOpenAfter]=\"tooltipDelay()\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"\n            isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n          \"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            axDoubleClick\n            [duration]=\"doubleClickDuration()\"\n            [disabled]=\"isDoubleClickDisabledForNode(node)\"\n            (onClick)=\"onNodeClickHandle(node, $event)\"\n            (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span\n                class=\"ax-tree-view-drag-handle\"\n                axDragHandle\n                title=\"Drag to reorder\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                \u22EE\u22EE\n              </span>\n            }\n            <ax-button\n              look=\"link\"\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              (click)=\"$event.stopPropagation()\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipOpenAfter]=\"tooltipDelay()\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-surface), .5);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-surface), .2);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-surface));--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{padding:var(--ax-comp-tree-view-expand-toggle-padding)}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{min-width:1.5rem;height:1.5rem;border-radius:.25rem}.ax-tree-view-skeleton-label{flex:1;height:1rem;border-radius:.25rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"] }]
+                    }, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n  <div class=\"ax-tree-view-drop-list\">\n    @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n      <div class=\"ax-tree-view-node\">\n        <div class=\"ax-tree-view-node-content\">\n          <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n          <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-loading]=\"isLoading()\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"\n          isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n        \"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          axDoubleClick\n          [duration]=\"doubleClickDuration()\"\n          [disabled]=\"isDoubleClickDisabledForNode(node)\"\n          (onClick)=\"onNodeClickHandle(node, $event)\"\n          (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          (blur)=\"focusedNodeId.set(null)\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span\n              class=\"ax-tree-view-drag-handle\"\n              axDragHandle\n              title=\"Drag to reorder\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              \u22EE\u22EE\n            </span>\n          }\n          <ax-button\n            look=\"link\"\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            (click)=\"$event.stopPropagation()\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipOpenAfter]=\"tooltipDelay()\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"\n            isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n          \"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            axDoubleClick\n            [duration]=\"doubleClickDuration()\"\n            [disabled]=\"isDoubleClickDisabledForNode(node)\"\n            (onClick)=\"onNodeClickHandle(node, $event)\"\n            (onDblClick)=\"onNodeDoubleClickHandle(node, $event)\"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span\n                class=\"ax-tree-view-drag-handle\"\n                axDragHandle\n                title=\"Drag to reorder\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                \u22EE\u22EE\n              </span>\n            }\n            <ax-button\n              look=\"link\"\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              (click)=\"$event.stopPropagation()\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipOpenAfter]=\"tooltipDelay()\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{--ax-comp-tree-view-indent-size:12px;--ax-comp-tree-view-node-hover-bg:rgba(var(--ax-sys-color-surface), .5);--ax-comp-tree-view-node-selected-bg:rgba(var(--ax-sys-color-primary-surface), .2);--ax-comp-tree-view-node-active-bg:rgba(var(--ax-sys-color-surface));--ax-comp-tree-view-node-border-radius:6px;--ax-comp-tree-view-node-margin:.25rem;--ax-comp-tree-view-line-color:rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity:.9;--ax-comp-tree-view-drag-placeholder-bg:rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg:rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline:rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding:0;--ax-comp-tree-view-content-gap:.5rem;--ax-comp-tree-view-drop-list-min-height:2rem;--ax-comp-tree-view-drag-handle-padding:.25rem;--ax-comp-tree-view-badge-padding:.25rem;--ax-comp-tree-view-expand-toggle-padding:.25rem;--ax-comp-tree-view-outline-offset:2px;--ax-comp-tree-view-outline-offset-negative:-2px;width:100%;display:block}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move;position:relative}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--ax-comp-tree-view-node-border-radius);outline:none;display:flex}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{padding:var(--ax-comp-tree-view-expand-toggle-padding)}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{flex-shrink:0;font-size:1.125rem}.ax-tree-view-node-label{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.875rem;line-height:1rem;overflow:hidden}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size,var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size,var(--ax-comp-tree-view-indent-size));position:relative}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";background:var(--ax-tree-view-line-color,var(--ax-comp-tree-view-line-color));inset-inline-start:var(--ax-tree-view-line-offset,calc(var(--ax-comp-tree-view-indent-size) / 2));width:1px;height:calc(100% - .875rem);position:absolute;top:0}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";width:var(--ax-tree-view-line-offset,calc(var(--ax-comp-tree-view-indent-size) / 2));background:var(--ax-tree-view-line-color,var(--ax-comp-tree-view-line-color));inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset,calc(var(--ax-comp-tree-view-indent-size) / 2)));height:1px;position:absolute;top:60%}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{border-radius:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree-view-skeleton-label{border-radius:.25rem;flex:1;height:1rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"] }]
         }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], iconField: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], selectedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedField", required: false }] }], indeterminateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], hiddenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], childrenCountField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenCountField", required: false }] }], dataField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataField", required: false }] }], inheritDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritDisabled", required: false }] }], expandOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnDoubleClick", required: false }] }], doubleClickDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "doubleClickDuration", required: false }] }], tooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelay", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onNodeDoubleClick: [{
                 type: Output
             }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });