@acorex/components 21.0.0-next.50 → 21.0.0-next.51

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-collapse.mjs","sources":["../../../../packages/components/collapse/src/lib/collapse.component.ts","../../../../packages/components/collapse/src/lib/collapse.component.html","../../../../packages/components/collapse/src/lib/collapse-group.component.ts","../../../../packages/components/collapse/src/lib/collapse.module.ts","../../../../packages/components/collapse/src/acorex-components-collapse.ts"],"sourcesContent":["import {\n  AXClickEvent,\n  AXComponent,\n  MXInteractiveComponent,\n  MXLookComponent,\n  MXLookableComponent,\n} from '@acorex/cdk/common';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n  TemplateRef,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { classes } from 'polytype';\n\nexport class AXCollapseClickEvent extends AXClickEvent {\n  handled = false;\n}\n\n/**\n * A component that provides a collapsible section with animated transitions.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-collapse',\n  templateUrl: './collapse.component.html',\n  inputs: ['disabled', 'look'],\n  styleUrls: ['./collapse.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet, AXLoadingComponent, NgClass],\n  providers: [{ provide: AXComponent, useExisting: AXCollapseComponent }],\n})\nexport class AXCollapseComponent extends classes(MXInteractiveComponent, MXLookComponent) {\n  private parent = inject(MXLookableComponent, { optional: true, host: true });\n\n  /**\n   *  Fires each time the user clicks the panel header.\n   *  @event\n   */\n  @Output()\n  onClick: EventEmitter<AXCollapseClickEvent> = new EventEmitter<AXCollapseClickEvent>();\n\n  /**\n   * Fires an event when the collapse state changes.\n   *\n   * @event\n   */\n  @Output()\n  isCollapsedChange: EventEmitter<any> = new EventEmitter<any>();\n\n  /**\n   *  @ignore\n   */\n  private _isCollapsed = false;\n\n  /**\n   *  Providing a boolean value for its collapse state\n   */\n  @Input()\n  public get isCollapsed(): boolean {\n    return this._isCollapsed;\n  }\n  public set isCollapsed(v: boolean) {\n    this.setOption({\n      name: 'isCollapsed',\n      value: v,\n      afterCallback: () => {\n        this.cdr.detectChanges();\n      },\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  private _showHeader = true;\n\n  /**\n   *  Providing a boolean value for show or hide header\n   */\n  @Input()\n  public get showHeader(): boolean {\n    return this._showHeader;\n  }\n  public set showHeader(v: boolean) {\n    this.setOption({\n      name: 'showHeader',\n      value: v,\n      afterCallback: () => {\n        this.cdr.detectChanges();\n      },\n    });\n  }\n\n  /**\n   * Sets the caption for the collapse component.\n   *\n   * @defaultValue ''\n   */\n  @Input()\n  caption = '';\n\n  /**\n   * Specifies the icon to display in the collapse component.\n   *\n   * @defaultValue ''\n   */\n  @Input()\n  icon = '';\n\n  /**\n   *  @ignore\n   */\n  private _isLoading = false;\n\n  /**\n   *  Providing a boolean value for its collapse state\n   */\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this.setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        this.cdr.detectChanges();\n      },\n    });\n  }\n\n  /**\n   * Template used for the collapse component's header.\n   */\n  @Input()\n  headerTemplate: TemplateRef<any>;\n\n  /**\n   * Handles header clicks, emitting a click event and toggling collapse state if not handled.\n   *\n   * @param e - The native mouse event.\n   */\n  handleHeaderClick(e: MouseEvent) {\n    if (this.disabled || this.isLoading) return;\n    const event = {\n      component: this,\n      htmlElement: this.getHostElement(),\n      nativeEvent: e,\n      handled: false,\n    };\n    this.onClick.emit(event);\n    if (!event.handled) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Expands the collapse component.\n   *\n   * @returns void - No return value. Sets `isCollapsed` to false and expands the body.\n   */\n  open(): void {\n    this.isCollapsed = false;\n  }\n\n  /**\n   * Collapses the collapse component.\n   *\n   * @returns void - No return value. Sets `isCollapsed` to true and hides the body.\n   */\n  close(): void {\n    this.isCollapsed = true;\n  }\n\n  /**\n   * Toggles the collapse state between expanded and collapsed.\n   *\n   * @returns void - No return value. Flips the `isCollapsed` state.\n   */\n  toggle(): void {\n    this.isCollapsed = !this.isCollapsed;\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.look ?? this.parent?.look}`];\n  }\n}\n","@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (!isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\" class=\"ax-collapse-body\">\n    <div class=\"ax-collapse-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n","import { AXComponent, MXBaseComponent, MXLookComponent, MXLookableComponent } from '@acorex/cdk/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { classes } from 'polytype';\nimport { Subscription } from 'rxjs';\nimport { AXCollapseComponent } from './collapse.component';\n\n/**\n * Container for collapsible items with configurable styling.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-collapse-group',\n  inputs: ['look'],\n  template: `<ng-content select=\"ax-collapse\"></ng-content>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: MXLookableComponent,\n      useExisting: AXCollapseGroupComponent,\n    },\n    { provide: AXComponent, useExisting: AXCollapseGroupComponent },\n  ],\n})\nexport class AXCollapseGroupComponent\n  extends classes(MXBaseComponent, MXLookComponent)\n  implements AfterViewInit, OnDestroy\n{\n  /**\n   * Emitted when the accordion state changes.\n   *\n   * @event\n   */\n  @Output()\n  accordionChange: EventEmitter<boolean> = new EventEmitter();\n\n  /**\n   *  @ignore\n   */\n  private _accordion?: boolean = false;\n\n  /**\n   *  Enables accordion behavior, allowing only one collapsible item to be expanded at a time\n   */\n  @Input()\n  get accordion(): boolean | undefined {\n    return this._accordion;\n  }\n  set accordion(value: boolean) {\n    this.setOption({\n      name: 'accordion',\n      value,\n      afterCallback: (oldValue, newValue) => {\n        if (newValue) {\n          this.applyAccordion();\n        } else {\n          this.removeAccordion();\n        }\n      },\n    });\n  }\n\n  /**\n   * Emits when the active index changes.\n   * @event\n   */\n  @Output()\n  activeIndexChange: EventEmitter<number> = new EventEmitter<number>();\n\n  /**\n   *  @ignore\n   */\n  private _activeIndex = 0;\n\n  /**\n   *  Index of the currently active item within the group\n   */\n  @Input()\n  get activeIndex(): number {\n    return this._activeIndex;\n  }\n  set activeIndex(value: number) {\n    this.setOption({\n      name: 'activeIndex',\n      value,\n      beforeCallback: (oldValue, newValue) => {\n        const len = this._items?.length || 0;\n        if (newValue < 0) newValue = 0;\n        if (len > 0 && newValue >= len) {\n          newValue = len - 1;\n        }\n        return newValue;\n      },\n      afterCallback: () => {\n        this.applyAccordion();\n      },\n    });\n  }\n\n  @ContentChildren(AXCollapseComponent)\n  private _items: QueryList<AXCollapseComponent>;\n\n  /**\n   *  @ignore\n   */\n  private _subs: Subscription[] = [];\n\n  /**\n   *  @ignore\n   */\n  ngAfterViewInit(): void {\n    if (this.accordion) {\n      this.applyAccordion();\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  private applyAccordion() {\n    if (!this.look) return;\n    if (this._items && this._items.length > 1) {\n      const activeIndex = this._items.get(this.activeIndex) || this._items.get(0);\n      this._items.forEach((c) => (c.isCollapsed = true));\n      if (activeIndex) activeIndex.isCollapsed = false;\n\n      this._items.forEach((c1: AXCollapseComponent) => {\n        const list = this._items.toArray();\n\n        this._subs.push(\n          // TODO: add and use a new event for status changes\n          c1.onClick.subscribe((e) => {\n            if (!e.handled) {\n              this._activeIndex = list.indexOf(c1);\n              list.filter((c2) => c2 != c1).forEach((c) => (c.isCollapsed = true));\n            }\n          }),\n        );\n      });\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  private removeAccordion() {\n    this._subs.forEach((s) => s.unsubscribe());\n    this._subs = [];\n  }\n\n  /**\n   *  @ignore\n   */\n  ngOnDestroy(): void {\n    this.removeAccordion();\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return ['ax-collapse-group', `${this.look}`];\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { AXCollapseGroupComponent } from './collapse-group.component';\nimport { AXCollapseComponent } from './collapse.component';\n\n@NgModule({\n  imports: [AXCollapseComponent, AXCollapseGroupComponent],\n  exports: [AXCollapseComponent, AXCollapseGroupComponent],\n})\nexport class AXCollapseModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAsBM,MAAO,oBAAqB,SAAQ,YAAY,CAAA;AAAtD,IAAA,WAAA,GAAA;;QACE,IAAA,CAAA,OAAO,GAAG,KAAK;IACjB;AAAC;AAED;;;;AAIG;AAWG,MAAO,mBAAoB,SAAQ,OAAO,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAA;AAVzF,IAAA,WAAA,GAAA;;AAWU,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAE5E;;;AAGG;AAEH,QAAA,IAAA,CAAA,OAAO,GAAuC,IAAI,YAAY,EAAwB;AAEtF;;;;AAIG;AAEH,QAAA,IAAA,CAAA,iBAAiB,GAAsB,IAAI,YAAY,EAAO;AAE9D;;AAEG;QACK,IAAA,CAAA,YAAY,GAAG,KAAK;AAmB5B;;AAEG;QACK,IAAA,CAAA,WAAW,GAAG,IAAI;AAmB1B;;;;AAIG;QAEH,IAAA,CAAA,OAAO,GAAG,EAAE;AAEZ;;;;AAIG;QAEH,IAAA,CAAA,IAAI,GAAG,EAAE;AAET;;AAEG;QACK,IAAA,CAAA,UAAU,GAAG,KAAK;AA8E3B,IAAA;AAxIC;;AAEG;AACH,IAAA,IACW,WAAW,GAAA;QACpB,OAAO,IAAI,CAAC,YAAY;IAC1B;IACA,IAAW,WAAW,CAAC,CAAU,EAAA;QAC/B,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,KAAK,EAAE,CAAC;YACR,aAAa,EAAE,MAAK;AAClB,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;YAC1B,CAAC;AACF,SAAA,CAAC;IACJ;AAOA;;AAEG;AACH,IAAA,IACW,UAAU,GAAA;QACnB,OAAO,IAAI,CAAC,WAAW;IACzB;IACA,IAAW,UAAU,CAAC,CAAU,EAAA;QAC9B,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,YAAY;AAClB,YAAA,KAAK,EAAE,CAAC;YACR,aAAa,EAAE,MAAK;AAClB,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;YAC1B,CAAC;AACF,SAAA,CAAC;IACJ;AAuBA;;AAEG;AACH,IAAA,IACW,SAAS,GAAA;QAClB,OAAO,IAAI,CAAC,UAAU;IACxB;IACA,IAAW,SAAS,CAAC,CAAU,EAAA;QAC7B,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,KAAK,EAAE,CAAC;YACR,aAAa,EAAE,MAAK;AAClB,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;YAC1B,CAAC;AACF,SAAA,CAAC;IACJ;AAQA;;;;AAIG;AACH,IAAA,iBAAiB,CAAC,CAAa,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;YAAE;AACrC,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE;AAClC,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,OAAO,EAAE,KAAK;SACf;AACD,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE;QACf;IACF;AAEA;;;;AAIG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;IAC1B;AAEA;;;;AAIG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;IACzB;AAEA;;;;AAIG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW;IACtC;AAEA;;AAEG;AACH,IAAA,IACI,WAAW,GAAA;QACb,OAAO,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,CAAA,CAAE,CAAC;IAC7F;+GA9JW,mBAAmB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,4XAFnB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAC,iDCvCzE,mzCAsCA,EAAA,MAAA,EAAA,CAAA,g9HAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDAY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,2HAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAG5C,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,MAAA,EAEf,CAAC,UAAU,EAAE,MAAM,CAAC,EAAA,eAAA,EAEX,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,OAAO,CAAC,aAC7C,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,mBAAqB,EAAE,CAAC,EAAA,QAAA,EAAA,mzCAAA,EAAA,MAAA,EAAA,CAAA,g9HAAA,CAAA,EAAA;;sBAStE;;sBAQA;;sBAWA;;sBAsBA;;sBAmBA;;sBAQA;;sBAWA;;sBAiBA;;sBAoDA,WAAW;uBAAC,OAAO;;;AElLtB;;;;AAIG;AAeG,MAAO,wBACX,SAAQ,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC,CAAA;AAfnD,IAAA,WAAA,GAAA;;AAkBE;;;;AAIG;AAEH,QAAA,IAAA,CAAA,eAAe,GAA0B,IAAI,YAAY,EAAE;AAE3D;;AAEG;QACK,IAAA,CAAA,UAAU,GAAa,KAAK;AAuBpC;;;AAGG;AAEH,QAAA,IAAA,CAAA,iBAAiB,GAAyB,IAAI,YAAY,EAAU;AAEpE;;AAEG;QACK,IAAA,CAAA,YAAY,GAAG,CAAC;AA8BxB;;AAEG;QACK,IAAA,CAAA,KAAK,GAAmB,EAAE;AA2DnC,IAAA;AA3HC;;AAEG;AACH,IAAA,IACI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU;IACxB;IACA,IAAI,SAAS,CAAC,KAAc,EAAA;QAC1B,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,WAAW;YACjB,KAAK;AACL,YAAA,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAI;gBACpC,IAAI,QAAQ,EAAE;oBACZ,IAAI,CAAC,cAAc,EAAE;gBACvB;qBAAO;oBACL,IAAI,CAAC,eAAe,EAAE;gBACxB;YACF,CAAC;AACF,SAAA,CAAC;IACJ;AAcA;;AAEG;AACH,IAAA,IACI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,YAAY;IAC1B;IACA,IAAI,WAAW,CAAC,KAAa,EAAA;QAC3B,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,aAAa;YACnB,KAAK;AACL,YAAA,cAAc,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAI;gBACrC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;gBACpC,IAAI,QAAQ,GAAG,CAAC;oBAAE,QAAQ,GAAG,CAAC;gBAC9B,IAAI,GAAG,GAAG,CAAC,IAAI,QAAQ,IAAI,GAAG,EAAE;AAC9B,oBAAA,QAAQ,GAAG,GAAG,GAAG,CAAC;gBACpB;AACA,gBAAA,OAAO,QAAQ;YACjB,CAAC;YACD,aAAa,EAAE,MAAK;gBAClB,IAAI,CAAC,cAAc,EAAE;YACvB,CAAC;AACF,SAAA,CAAC;IACJ;AAUA;;AAEG;IACH,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,cAAc,EAAE;QACvB;IACF;AAEA;;AAEG;IACK,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAChB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACzC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAC3E,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAClD,YAAA,IAAI,WAAW;AAAE,gBAAA,WAAW,CAAC,WAAW,GAAG,KAAK;YAEhD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAuB,KAAI;gBAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;gBAElC,IAAI,CAAC,KAAK,CAAC,IAAI;;gBAEb,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI;AACzB,oBAAA,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE;wBACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;AACpC,wBAAA,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;oBACtE;gBACF,CAAC,CAAC,CACH;AACH,YAAA,CAAC,CAAC;QACJ;IACF;AAEA;;AAEG;IACK,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AAC1C,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;IACjB;AAEA;;AAEG;IACH,WAAW,GAAA;QACT,IAAI,CAAC,eAAe,EAAE;IACxB;AAEA;;AAEG;AACH,IAAA,IACY,WAAW,GAAA;QACrB,OAAO,CAAC,mBAAmB,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAE,CAAC;IAC9C;+GA3IW,wBAAwB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EARxB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,mBAAmB;AAC5B,gBAAA,WAAW,EAAE,wBAAwB;AACtC,aAAA;AACD,YAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,wBAAwB,EAAE;SAChE,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EA6EgB,mBAAmB,oDAtF1B,CAAA,8CAAA,CAAgD,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAW/C,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAdpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,MAAM,EAAE,CAAC,MAAM,CAAC;AAChB,oBAAA,QAAQ,EAAE,CAAA,8CAAA,CAAgD;oBAC1D,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,mBAAmB;AAC5B,4BAAA,WAAW,EAAA,wBAA0B;AACtC,yBAAA;AACD,wBAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,0BAA0B,EAAE;AAChE,qBAAA;AACF,iBAAA;;sBAUE;;sBAWA;;sBAsBA;;sBAWA;;sBAsBA,eAAe;uBAAC,mBAAmB;;sBA6DnC,WAAW;uBAAC,OAAO;;;MCrKT,gBAAgB,CAAA;+GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAHjB,mBAAmB,EAAE,wBAAwB,CAAA,EAAA,OAAA,EAAA,CAC7C,mBAAmB,EAAE,wBAAwB,CAAA,EAAA,CAAA,CAAA;AAE5C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAHjB,mBAAmB,CAAA,EAAA,CAAA,CAAA;;4FAGlB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;AACxD,oBAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;AACzD,iBAAA;;;ACPD;;AAEG;;;;"}
+{"version":3,"file":"acorex-components-collapse.mjs","sources":["../../../../packages/components/collapse/src/lib/collapse.component.ts","../../../../packages/components/collapse/src/lib/collapse.component.html","../../../../packages/components/collapse/src/lib/collapse-group.component.ts","../../../../packages/components/collapse/src/lib/collapse.module.ts","../../../../packages/components/collapse/src/index.ts","../../../../packages/components/collapse/src/acorex-components-collapse.ts"],"sourcesContent":["import {\n  AXClickEvent,\n  AXComponent,\n  MXInteractiveComponent,\n  MXLookComponent,\n  MXLookableComponent,\n} from '@acorex/cdk/common';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n  TemplateRef,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { classes } from 'polytype';\n\nexport class AXCollapseClickEvent extends AXClickEvent {\n  handled = false;\n}\n\n/**\n * @deprecated Use `accordion` instead.\n * This component deprecated and no longer support.\n */\n@Component({\n  selector: 'ax-collapse',\n  templateUrl: './collapse.component.html',\n  inputs: ['disabled', 'look'],\n  styleUrls: ['./collapse.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet, AXLoadingComponent, NgClass],\n  providers: [{ provide: AXComponent, useExisting: AXCollapseComponent }],\n})\nexport class AXCollapseComponent extends classes(MXInteractiveComponent, MXLookComponent) {\n  private parent = inject(MXLookableComponent, { optional: true, host: true });\n\n  /**\n   *  Fires each time the user clicks the panel header.\n   *  @event\n   */\n  @Output()\n  onClick: EventEmitter<AXCollapseClickEvent> = new EventEmitter<AXCollapseClickEvent>();\n\n  /**\n   * Fires an event when the collapse state changes.\n   *\n   * @event\n   */\n  @Output()\n  isCollapsedChange: EventEmitter<any> = new EventEmitter<any>();\n\n  /**\n   *  @ignore\n   */\n  private _isCollapsed = false;\n\n  /**\n   *  Providing a boolean value for its collapse state\n   */\n  @Input()\n  public get isCollapsed(): boolean {\n    return this._isCollapsed;\n  }\n  public set isCollapsed(v: boolean) {\n    this.setOption({\n      name: 'isCollapsed',\n      value: v,\n      afterCallback: () => {\n        this.cdr.detectChanges();\n      },\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  private _showHeader = true;\n\n  /**\n   *  Providing a boolean value for show or hide header\n   */\n  @Input()\n  public get showHeader(): boolean {\n    return this._showHeader;\n  }\n  public set showHeader(v: boolean) {\n    this.setOption({\n      name: 'showHeader',\n      value: v,\n      afterCallback: () => {\n        this.cdr.detectChanges();\n      },\n    });\n  }\n\n  /**\n   * Sets the caption for the collapse component.\n   *\n   * @defaultValue ''\n   */\n  @Input()\n  caption = '';\n\n  /**\n   * Specifies the icon to display in the collapse component.\n   *\n   * @defaultValue ''\n   */\n  @Input()\n  icon = '';\n\n  /**\n   *  @ignore\n   */\n  private _isLoading = false;\n\n  /**\n   *  Providing a boolean value for its collapse state\n   */\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this.setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        this.cdr.detectChanges();\n      },\n    });\n  }\n\n  /**\n   * Template used for the collapse component's header.\n   */\n  @Input()\n  headerTemplate: TemplateRef<any>;\n\n  /**\n   * Handles header clicks, emitting a click event and toggling collapse state if not handled.\n   *\n   * @param e - The native mouse event.\n   */\n  handleHeaderClick(e: MouseEvent) {\n    if (this.disabled || this.isLoading) return;\n    const event = {\n      component: this,\n      htmlElement: this.getHostElement(),\n      nativeEvent: e,\n      handled: false,\n    };\n    this.onClick.emit(event);\n    if (!event.handled) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Expands the collapse component.\n   *\n   * @returns void - No return value. Sets `isCollapsed` to false and expands the body.\n   */\n  open(): void {\n    this.isCollapsed = false;\n  }\n\n  /**\n   * Collapses the collapse component.\n   *\n   * @returns void - No return value. Sets `isCollapsed` to true and hides the body.\n   */\n  close(): void {\n    this.isCollapsed = true;\n  }\n\n  /**\n   * Toggles the collapse state between expanded and collapsed.\n   *\n   * @returns void - No return value. Flips the `isCollapsed` state.\n   */\n  toggle(): void {\n    this.isCollapsed = !this.isCollapsed;\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.look ?? this.parent?.look}`];\n  }\n}\n","@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (!isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\" class=\"ax-collapse-body\">\n    <div class=\"ax-collapse-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n","import { AXComponent, MXBaseComponent, MXLookComponent, MXLookableComponent } from '@acorex/cdk/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { classes } from 'polytype';\nimport { Subscription } from 'rxjs';\nimport { AXCollapseComponent } from './collapse.component';\n\n/**\n * @deprecated Use `accordion` instead.\n * This component deprecated and no longer support.\n */\n@Component({\n  selector: 'ax-collapse-group',\n  inputs: ['look'],\n  template: `<ng-content select=\"ax-collapse\"></ng-content>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: MXLookableComponent,\n      useExisting: AXCollapseGroupComponent,\n    },\n    { provide: AXComponent, useExisting: AXCollapseGroupComponent },\n  ],\n})\nexport class AXCollapseGroupComponent\n  extends classes(MXBaseComponent, MXLookComponent)\n  implements AfterViewInit, OnDestroy\n{\n  /**\n   * Emitted when the accordion state changes.\n   *\n   * @event\n   */\n  @Output()\n  accordionChange: EventEmitter<boolean> = new EventEmitter();\n\n  /**\n   *  @ignore\n   */\n  private _accordion?: boolean = false;\n\n  /**\n   *  Enables accordion behavior, allowing only one collapsible item to be expanded at a time\n   */\n  @Input()\n  get accordion(): boolean | undefined {\n    return this._accordion;\n  }\n  set accordion(value: boolean) {\n    this.setOption({\n      name: 'accordion',\n      value,\n      afterCallback: (oldValue, newValue) => {\n        if (newValue) {\n          this.applyAccordion();\n        } else {\n          this.removeAccordion();\n        }\n      },\n    });\n  }\n\n  /**\n   * Emits when the active index changes.\n   * @event\n   */\n  @Output()\n  activeIndexChange: EventEmitter<number> = new EventEmitter<number>();\n\n  /**\n   *  @ignore\n   */\n  private _activeIndex = 0;\n\n  /**\n   *  Index of the currently active item within the group\n   */\n  @Input()\n  get activeIndex(): number {\n    return this._activeIndex;\n  }\n  set activeIndex(value: number) {\n    this.setOption({\n      name: 'activeIndex',\n      value,\n      beforeCallback: (oldValue, newValue) => {\n        const len = this._items?.length || 0;\n        if (newValue < 0) newValue = 0;\n        if (len > 0 && newValue >= len) {\n          newValue = len - 1;\n        }\n        return newValue;\n      },\n      afterCallback: () => {\n        this.applyAccordion();\n      },\n    });\n  }\n\n  @ContentChildren(AXCollapseComponent)\n  private _items: QueryList<AXCollapseComponent>;\n\n  /**\n   *  @ignore\n   */\n  private _subs: Subscription[] = [];\n\n  /**\n   *  @ignore\n   */\n  ngAfterViewInit(): void {\n    if (this.accordion) {\n      this.applyAccordion();\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  private applyAccordion() {\n    if (!this.look) return;\n    if (this._items && this._items.length > 1) {\n      const activeIndex = this._items.get(this.activeIndex) || this._items.get(0);\n      this._items.forEach((c) => (c.isCollapsed = true));\n      if (activeIndex) activeIndex.isCollapsed = false;\n\n      this._items.forEach((c1: AXCollapseComponent) => {\n        const list = this._items.toArray();\n\n        this._subs.push(\n          // TODO: add and use a new event for status changes\n          c1.onClick.subscribe((e) => {\n            if (!e.handled) {\n              this._activeIndex = list.indexOf(c1);\n              list.filter((c2) => c2 != c1).forEach((c) => (c.isCollapsed = true));\n            }\n          }),\n        );\n      });\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  private removeAccordion() {\n    this._subs.forEach((s) => s.unsubscribe());\n    this._subs = [];\n  }\n\n  /**\n   *  @ignore\n   */\n  ngOnDestroy(): void {\n    this.removeAccordion();\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return ['ax-collapse-group', `${this.look}`];\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { AXCollapseGroupComponent } from './collapse-group.component';\nimport { AXCollapseComponent } from './collapse.component';\n\n@NgModule({\n  imports: [AXCollapseComponent, AXCollapseGroupComponent],\n  exports: [AXCollapseComponent, AXCollapseGroupComponent],\n})\nexport class AXCollapseModule {}\n","/**\n * @deprecated Use `range slider` instead.\n * This component deprecated and no longer support.\n */\nexport * from './lib/collapse-group.component';\n/**\n * @deprecated Use `range slider` instead.\n * This component deprecated and no longer support.\n */\nexport * from './lib/collapse.component';\n/**\n * @deprecated Use `range slider` instead.\n * This component deprecated and no longer support.\n */\nexport * from './lib/collapse.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-color-box.mjs

@@ -93,7 +93,7 @@ class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBa
                 useExisting: forwardRef(() => AXColorBoxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "palettePicker", first: true, predicate: AXColorPalettePickerComponent, descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: AXColorPaletteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", 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-outline-style:solid;--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-color-box{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);display:flex}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width,100%);font-size:var(--ax-comp-color-box-font-size,var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);align-items:center;gap:calc(var(--spacing,.25rem)*2);height:100%;display:flex;outline-style:var(--tw-outline-style)!important;outline-width:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));display:block}ax-color-box .ax-editor-container .ax-content .color-placeholder{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:inherit}ax-color-box .ax-editor-container .ax-content .color-value{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;overflow:hidden}ax-color-box .ax-editor-container .ax-clear-button{flex-direction:row;display:flex;margin:calc(var(--spacing,.25rem)*0)!important}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXColorPaletteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "palettePicker", first: true, predicate: AXColorPalettePickerComponent, descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: AXColorPaletteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", 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-outline-style:solid;--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-color-box{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);display:flex}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width,100%);font-size:var(--ax-comp-color-box-font-size,var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);align-items:center;gap:calc(var(--spacing,.25rem)*2);height:100%;display:flex;outline-style:var(--tw-outline-style)!important;outline-width:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));display:block}ax-color-box .ax-editor-container .ax-content .color-placeholder{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:inherit}ax-color-box .ax-editor-container .ax-content .color-value{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;overflow:hidden}ax-color-box .ax-editor-container .ax-clear-button{flex-direction:row;display:flex;margin:calc(var(--spacing,.25rem)*0)!important}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXColorPaletteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
@@ -125,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXColorPalettePickerComponent,
                         AXColorPaletteSwatchesComponent,
                         AXColorPaletteInputComponent,
-                    ], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", 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-outline-style:solid;--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-color-box{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);display:flex}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width,100%);font-size:var(--ax-comp-color-box-font-size,var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);align-items:center;gap:calc(var(--spacing,.25rem)*2);height:100%;display:flex;outline-style:var(--tw-outline-style)!important;outline-width:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));display:block}ax-color-box .ax-editor-container .ax-content .color-placeholder{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:inherit}ax-color-box .ax-editor-container .ax-content .color-value{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;overflow:hidden}ax-color-box .ax-editor-container .ax-clear-button{flex-direction:row;display:flex;margin:calc(var(--spacing,.25rem)*0)!important}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", 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-outline-style:solid;--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-color-box{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);display:flex}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width,100%);font-size:var(--ax-comp-color-box-font-size,var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);align-items:center;gap:calc(var(--spacing,.25rem)*2);height:100%;display:flex;outline-style:var(--tw-outline-style)!important;outline-width:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));display:block}ax-color-box .ax-editor-container .ax-content .color-placeholder{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:inherit}ax-color-box .ax-editor-container .ax-content .color-value{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;overflow:hidden}ax-color-box .ax-editor-container .ax-clear-button{flex-direction:row;display:flex;margin:calc(var(--spacing,.25rem)*0)!important}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadge", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], picker: [{
                 type: ViewChild,
                 args: [AXColorPaletteComponent]

package/fesm2022/acorex-components-color-palette.mjs

@@ -913,7 +913,7 @@ class AXColorPaletteComponent extends MXValueComponent {
             },
             { provide: AXComponent, useExisting: AXColorPaletteComponent },
             AXColorPaletteService,
-        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", 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-border-style:solid;--tw-content:\"\";--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-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@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.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", 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-border-style:solid;--tw-content:\"\";--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-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@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.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
             type: Component,
@@ -936,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXColorPalettePickerComponent,
                         AXColorPaletteSwatchesComponent,
                         AXColorPaletteInputComponent,
-                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", 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-border-style:solid;--tw-content:\"\";--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-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@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.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", 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-border-style:solid;--tw-content:\"\";--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-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--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);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@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.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]

package/fesm2022/acorex-components-command.mjs

@@ -100,7 +100,7 @@ class AXCommandComponent extends classes((MXInputBaseValueComponent), MXLookComp
             },
             { provide: AXComponent, useExisting: AXCommandComponent },
             { provide: AXValuableComponent, useExisting: AXCommandComponent },
-        ], viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["f"], descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: ["l"], descendants: true, read: AXListNavigationDirective, isSignal: true }, { propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n    look=\"fill\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [ngClass]=\"{ 'ax-command-item-container-active': a.isActive() }\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      <div class=\"ax-command-item\">\n        @if (item.icon) {\n          <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n        }\n        <span class=\"ax-command-item-text\">{{ item.text }}</span>\n      </div>\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", 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-outline-style:solid;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-command{border-radius:var(--radius-lg,.5rem);outline-style:var(--tw-outline-style);outline-width:4px;outline-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));display:block;overflow:hidden}ax-command .ax-search-box-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding:calc(var(--spacing,.25rem)*3)}ax-command .ax-search-box-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{max-height:calc(var(--spacing,.25rem)*80);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));overflow:auto}ax-command .ax-command-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{padding:calc(var(--spacing,.25rem)*3);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*2);border-width:1px;border-color:#0000}ax-command .ax-command-container .ax-command-item-container .ax-command-item{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{padding:calc(var(--spacing,.25rem)*4);justify-content:center;display:flex}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}ax-command .ax-kbd{justify-content:center;align-items:center;height:100%;display:flex}ax-command .ax-command-footer{align-items:center;gap:calc(var(--spacing,.25rem)*6);border-bottom-right-radius:var(--radius-lg,.5rem);border-bottom-left-radius:var(--radius-lg,.5rem);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));padding:calc(var(--spacing,.25rem)*3);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-light-surface))50%,transparent);display:flex}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*3);display:flex}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["f"], descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: ["l"], descendants: true, read: AXListNavigationDirective, isSignal: true }, { propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n    look=\"fill\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [ngClass]=\"{ 'ax-command-item-container-active': a.isActive() }\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      <div class=\"ax-command-item\">\n        @if (item.icon) {\n          <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n        }\n        <span class=\"ax-command-item-text\">{{ item.text }}</span>\n      </div>\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", 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-outline-style:solid;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-command{border-radius:var(--radius-lg,.5rem);outline-style:var(--tw-outline-style);outline-width:4px;outline-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));display:block;overflow:hidden}ax-command .ax-search-box-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding:calc(var(--spacing,.25rem)*3)}ax-command .ax-search-box-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{max-height:calc(var(--spacing,.25rem)*80);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));overflow:auto}ax-command .ax-command-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{padding:calc(var(--spacing,.25rem)*3);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*2);border-width:1px;border-color:#0000}ax-command .ax-command-container .ax-command-item-container .ax-command-item{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{padding:calc(var(--spacing,.25rem)*4);justify-content:center;display:flex}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}ax-command .ax-kbd{justify-content:center;align-items:center;height:100%;display:flex}ax-command .ax-command-footer{align-items:center;gap:calc(var(--spacing,.25rem)*6);border-bottom-right-radius:var(--radius-lg,.5rem);border-bottom-left-radius:var(--radius-lg,.5rem);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));padding:calc(var(--spacing,.25rem)*3);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-light-surface))50%,transparent);display:flex}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*3);display:flex}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommandComponent, decorators: [{
             type: Component,
@@ -121,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         },
                         { provide: AXComponent, useExisting: AXCommandComponent },
                         { provide: AXValuableComponent, useExisting: AXCommandComponent },
-                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n    look=\"fill\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [ngClass]=\"{ 'ax-command-item-container-active': a.isActive() }\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      <div class=\"ax-command-item\">\n        @if (item.icon) {\n          <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n        }\n        <span class=\"ax-command-item-text\">{{ item.text }}</span>\n      </div>\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", 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-outline-style:solid;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-command{border-radius:var(--radius-lg,.5rem);outline-style:var(--tw-outline-style);outline-width:4px;outline-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));display:block;overflow:hidden}ax-command .ax-search-box-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding:calc(var(--spacing,.25rem)*3)}ax-command .ax-search-box-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{max-height:calc(var(--spacing,.25rem)*80);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));overflow:auto}ax-command .ax-command-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{padding:calc(var(--spacing,.25rem)*3);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*2);border-width:1px;border-color:#0000}ax-command .ax-command-container .ax-command-item-container .ax-command-item{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{padding:calc(var(--spacing,.25rem)*4);justify-content:center;display:flex}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}ax-command .ax-kbd{justify-content:center;align-items:center;height:100%;display:flex}ax-command .ax-command-footer{align-items:center;gap:calc(var(--spacing,.25rem)*6);border-bottom-right-radius:var(--radius-lg,.5rem);border-bottom-left-radius:var(--radius-lg,.5rem);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));padding:calc(var(--spacing,.25rem)*3);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-light-surface))50%,transparent);display:flex}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*3);display:flex}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n    look=\"fill\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [ngClass]=\"{ 'ax-command-item-container-active': a.isActive() }\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      <div class=\"ax-command-item\">\n        @if (item.icon) {\n          <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n        }\n        <span class=\"ax-command-item-text\">{{ item.text }}</span>\n      </div>\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", 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-outline-style:solid;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-command{border-radius:var(--radius-lg,.5rem);outline-style:var(--tw-outline-style);outline-width:4px;outline-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));display:block;overflow:hidden}ax-command .ax-search-box-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding:calc(var(--spacing,.25rem)*3)}ax-command .ax-search-box-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{max-height:calc(var(--spacing,.25rem)*80);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));overflow:auto}ax-command .ax-command-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{padding:calc(var(--spacing,.25rem)*3);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*2);border-width:1px;border-color:#0000}ax-command .ax-command-container .ax-command-item-container .ax-command-item{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{padding:calc(var(--spacing,.25rem)*4);justify-content:center;display:flex}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}ax-command .ax-kbd{justify-content:center;align-items:center;height:100%;display:flex}ax-command .ax-command-footer{align-items:center;gap:calc(var(--spacing,.25rem)*6);border-bottom-right-radius:var(--radius-lg,.5rem);border-bottom-left-radius:var(--radius-lg,.5rem);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));padding:calc(var(--spacing,.25rem)*3);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-light-surface))50%,transparent);display:flex}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*3);display:flex}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { searchBox: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onEscape: [{ type: i0.Output, args: ["onEscape"] }], onSearchBoxFocus: [{ type: i0.Output, args: ["onSearchBoxFocus"] }], onSearchBoxBlur: [{ type: i0.Output, args: ["onSearchBoxBlur"] }], listNavigation: [{ type: i0.ViewChild, args: ['l', { ...{ read: AXListNavigationDirective }, isSignal: true }] }], listNav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }] } });
 
 const COMPONENT = [AXCommandComponent];

package/fesm2022/acorex-components-comment.mjs

@@ -76,11 +76,11 @@ class AXCommentItemComponent {
         this.collapse().toggle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "collapse", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-accordion-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-accordion-item\n          #c\n          [caption]=\"\n            ('@acorex:comment.view' | translate | async) +\n            ' ' +\n            replyCount() +\n            ' ' +\n            ((replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-accordion-item>\n      </ax-accordion-group>\n    </div>\n  }\n</div>\n", 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}}}@layer components{.ax-comment-items{margin-bottom:calc(var(--spacing,.25rem)*1)}.ax-comment-items .ax-header-container{justify-content:space-between;align-items:center;display:flex}.ax-comment-items .ax-header-container .ax-title-avatar-container{align-items:center;display:flex}.ax-comment-items .ax-header-container ax-title{padding:calc(var(--spacing,.25rem)*2);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.ax-comment-items .ax-content-container{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));opacity:.8;flex-direction:column;margin-inline-start:calc(var(--spacing,.25rem)*12);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:calc(var(--spacing,.25rem)*3);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:calc(var(--spacing,.25rem)*6)}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem)*8)}.ax-comment-items .ax-comment-replies .ax-accordion-header-container{justify-content:flex-start;gap:calc(var(--spacing,.25rem)*4);color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));display:flex}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "collapse", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-accordion-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-accordion-item\n          #c\n          [caption]=\"\n            ('@acorex:comment.view' | translate | async) +\n            ' ' +\n            replyCount() +\n            ' ' +\n            ((replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-accordion-item>\n      </ax-accordion-group>\n    </div>\n  }\n</div>\n", 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}}}@layer components{.ax-comment-items{margin-bottom:calc(var(--spacing,.25rem)*1)}.ax-comment-items .ax-header-container{justify-content:space-between;align-items:center;display:flex}.ax-comment-items .ax-header-container .ax-title-avatar-container{align-items:center;display:flex}.ax-comment-items .ax-header-container ax-title{padding:calc(var(--spacing,.25rem)*2);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.ax-comment-items .ax-content-container{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));opacity:.8;flex-direction:column;margin-inline-start:calc(var(--spacing,.25rem)*12);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:calc(var(--spacing,.25rem)*3);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:calc(var(--spacing,.25rem)*6)}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem)*8)}.ax-comment-items .ax-comment-replies .ax-accordion-header-container{justify-content:flex-start;gap:calc(var(--spacing,.25rem)*4);color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));display:flex}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, imports: [AXAccordionModule, AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-accordion-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-accordion-item\n          #c\n          [caption]=\"\n            ('@acorex:comment.view' | translate | async) +\n            ' ' +\n            replyCount() +\n            ' ' +\n            ((replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-accordion-item>\n      </ax-accordion-group>\n    </div>\n  }\n</div>\n", 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}}}@layer components{.ax-comment-items{margin-bottom:calc(var(--spacing,.25rem)*1)}.ax-comment-items .ax-header-container{justify-content:space-between;align-items:center;display:flex}.ax-comment-items .ax-header-container .ax-title-avatar-container{align-items:center;display:flex}.ax-comment-items .ax-header-container ax-title{padding:calc(var(--spacing,.25rem)*2);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.ax-comment-items .ax-content-container{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));opacity:.8;flex-direction:column;margin-inline-start:calc(var(--spacing,.25rem)*12);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:calc(var(--spacing,.25rem)*3);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:calc(var(--spacing,.25rem)*6)}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem)*8)}.ax-comment-items .ax-comment-replies .ax-accordion-header-container{justify-content:flex-start;gap:calc(var(--spacing,.25rem)*4);color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));display:flex}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, imports: [AXAccordionModule, AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-accordion-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-accordion-item\n          #c\n          [caption]=\"\n            ('@acorex:comment.view' | translate | async) +\n            ' ' +\n            replyCount() +\n            ' ' +\n            ((replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-accordion-item>\n      </ax-accordion-group>\n    </div>\n  }\n</div>\n", 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}}}@layer components{.ax-comment-items{margin-bottom:calc(var(--spacing,.25rem)*1)}.ax-comment-items .ax-header-container{justify-content:space-between;align-items:center;display:flex}.ax-comment-items .ax-header-container .ax-title-avatar-container{align-items:center;display:flex}.ax-comment-items .ax-header-container ax-title{padding:calc(var(--spacing,.25rem)*2);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.ax-comment-items .ax-content-container{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));opacity:.8;flex-direction:column;margin-inline-start:calc(var(--spacing,.25rem)*12);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:calc(var(--spacing,.25rem)*3);display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:calc(var(--spacing,.25rem)*6)}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem)*8)}.ax-comment-items .ax-comment-replies .ax-accordion-header-container{justify-content:flex-start;gap:calc(var(--spacing,.25rem)*4);color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));display:flex}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], collapse: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], replyCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyCount", required: false }] }] } });
 
 /**
@@ -90,11 +90,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 class AXCommentDateComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-date', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-date', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], template: "<ng-content></ng-content>\n", styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 /**
@@ -113,11 +113,11 @@ class AXCommentLikeComponent {
         this.like.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { like: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", 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}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.ax-comment-like-container.ax-state-liked ax-text{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { like: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", 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}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.ax-comment-like-container.ax-state-liked ax-text{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentLikeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-like', imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", 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}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.ax-comment-like-container.ax-state-liked ax-text{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-like', imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", 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}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem)*1);display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}.ax-comment-like-container.ax-state-liked ax-text{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { like: [{ type: i0.Input, args: [{ isSignal: true, alias: "like", required: true }] }, { type: i0.Output, args: ["likeChange"] }] } });
 
 /**
@@ -158,11 +158,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 class AXCommentViewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], ngImport: i0, template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", 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-border-style:solid}}}@layer components{ax-comment-view{margin-bottom:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem)*6);display:block}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], ngImport: i0, template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", 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-border-style:solid}}}@layer components{ax-comment-view{margin-bottom:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem)*6);display:block}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommentViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", 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-border-style:solid}}}@layer components{ax-comment-view{margin-bottom:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem)*6);display:block}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", 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-border-style:solid}}}@layer components{ax-comment-view{margin-bottom:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding:calc(var(--spacing,.25rem)*6);display:block}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 const COMPONENT = [