@acorex/components 21.0.1-next.52 → 21.0.1-next.55

package/fesm2022/acorex-components-command.mjs

@@ -117,7 +117,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: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n      [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      @if (customTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"customTemplate()\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            level: level,\n            isActive: a.isActive(),\n          }\"\n        ></ng-container>\n      } @else {\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      }\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.2.1 | 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.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: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n      [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      @if (customTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"customTemplate()\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            level: level,\n            isActive: a.isActive(),\n          }\"\n        ></ng-container>\n      } @else {\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      }\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.2.3 | 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.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: "21.1.3", ngImport: i0, type: AXCommandComponent, decorators: [{
             type: Component,
@@ -138,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         },
                         { provide: AXComponent, useExisting: AXCommandComponent },
                         { provide: AXValuableComponent, useExisting: AXCommandComponent },
-                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n      [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      @if (customTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"customTemplate()\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            level: level,\n            isActive: a.isActive(),\n          }\"\n        ></ng-container>\n      } @else {\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      }\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\n      [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      @if (customTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"customTemplate()\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            level: level,\n            isActive: a.isActive(),\n          }\"\n        ></ng-container>\n      } @else {\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      }\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.2.3 | 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 }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], searchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBar", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], searchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchKey", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }] } });
 
 const COMPONENT = [AXCommandComponent];

package/fesm2022/acorex-components-comment.mjs

@@ -67,11 +67,11 @@ class AXCommentItemComponent {
         this.repliesExpanded.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpanded: "repliesExpandedChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpanded: "repliesExpandedChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], replyCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyCount", required: false }] }], repliesExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "repliesExpanded", required: false }] }, { type: i0.Output, args: ["repliesExpandedChange"] }] } });
 
 /**
@@ -81,11 +81,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class AXCommentDateComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: '<ng-content />', isInline: true, 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.2.1 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: '<ng-content />', isInline: true, 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.2.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-date', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], 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.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-date', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], 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.2.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 /**
@@ -101,11 +101,11 @@ class AXCommentLikeComponent {
         this.like.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><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);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.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)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.1 | 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><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);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.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)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.3 | 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentLikeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-like', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><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);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.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)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-like', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><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);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));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 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.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)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { like: [{ type: i0.Input, args: [{ isSignal: true, alias: "like", required: true }] }, { type: i0.Output, args: ["likeChange"] }] } });
 
 /**

package/fesm2022/acorex-components-conversation.mjs

@@ -522,7 +522,7 @@ class AXConversationMessageComponent extends MXBaseComponent {
         return `${this.isOwn ? 'ax-state-own' : ''} ${!this.isOwn ? 'ax-state-other' : ''}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXConversationMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXConversationMessageComponent, isStandalone: true, selector: "ax-conversation-message", inputs: { isReplyArrowShown: { classPropertyName: "isReplyArrowShown", publicName: "isReplyArrowShown", isSignal: true, isRequired: false, transformFunction: null }, chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionMenuOpening: "onActionMenuOpening", onReplyClick: "onReplyClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXConversationMessageComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chatMessage().fromId) {\n  @if (avatar()) {\n    <ng-container [ngTemplateOutlet]=\"avatar()\"></ng-container>\n  } @else {\n    <ax-avatar color=\"primary\" [size]=\"36\"> </ax-avatar>\n  }\n}\n\n@if (isOwn && isReplyArrowShown()) {\n  <i (click)=\"replyHandler(chatMessage())\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div\n  class=\"ax-message-content\"\n  [class]=\"'ax-type-' + messageType()\"\n  [class.ax-state-own]=\"!chatMessage().fromId\"\n  [class.ax-state-other]=\"chatMessage().fromId\"\n>\n  <div class=\"ax-action-button\">\n    @if (chatMessage()?.userName) {\n      <div class=\"ax-message-user-name\">\n        <ax-text>{{ chatMessage().userName }}</ax-text>\n      </div>\n    }\n\n    @if (chatMessage()?.showActionButton) {\n      <div class=\"ax-message-action-button\">\n        <ax-menu openOn=\"click\" [hasArrow]=\"false\">\n          <ax-menu-item class=\"ax-parent-menu-item\">\n            <ax-text (click)=\"handleActionClick()\">...</ax-text>\n\n            @for (item of actionButtonItemsPrivate(); track item.text) {\n              <ax-menu-item [color]=\"item.color\" (onClick)=\"item.onClick(chatMessage().id)\">\n                <ax-text>{{ item.text }}</ax-text>\n                <ax-prefix>\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                </ax-prefix>\n\n                @for (innerItem of item.items; track innerItem.text) {\n                  <ax-menu-item [color]=\"innerItem.color\" (onClick)=\"innerItem.onClick(chatMessage().id)\">\n                    <ax-text>{{ innerItem.text }}</ax-text>\n                    <ax-prefix>\n                      <ax-icon [icon]=\"innerItem.icon\"></ax-icon>\n                    </ax-prefix>\n                  </ax-menu-item>\n                }\n              </ax-menu-item>\n            }\n          </ax-menu-item>\n        </ax-menu>\n      </div>\n    }\n  </div>\n\n  <ng-template [cdkPortalOutlet]=\"portal()\" (attached)=\"_handleAttached($event)\"></ng-template>\n\n  <div class=\"ax-chat-message-status\">\n    <div class=\"ax-message-prefix\"></div>\n    <div>\n      <div class=\"ax-message-suffix\"></div>\n      <span>\n        {{ chatMessage().sendTime | format: 'datetime' : 'HH:mm' | async }}\n      </span>\n      <span>\n        @if (isOwn) {\n          @if (chatMessage().deliverTime && chatMessage().sendTime) {\n            <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n          }\n          @if (chatMessage().readTime && chatMessage().sendTime) {\n            <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n          }\n        }\n      </span>\n    </div>\n  </div>\n</div>\n\n@if (!chatMessage().sendTime) {\n  <ax-button class=\"ax-resend-button ax-xs\" color=\"danger\" #b>\n    <ax-icon class=\"ax-icon ax-icon-error\"></ax-icon>\n\n    <ax-popover [target]=\"b\" placement=\"bottom-end\" #popover>\n      <div>\n        <ax-content> </ax-content>\n        <ax-button-item-list>\n          @if (chatMessage().onResendClick) {\n            <ax-button-item text=\"Resend\" (onClick)=\"handleResendClick()\">\n              <ax-icon class=\"ax-icon ax-icon-reload ax-bold\"></ax-icon>\n            </ax-button-item>\n          }\n          @if (chatMessage().onDeleteClick) {\n            <ax-button-item text=\"Delete\" color=\"danger\" (onClick)=\"handleDeleteClick()\">\n              <ax-icon class=\"ax-icon ax-icon-clear ax-bold\"></ax-icon>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </div>\n    </ax-popover>\n  </ax-button>\n}\n\n@if (!isOwn && isReplyArrowShown()) {\n  <i (click)=\"replyHandler(chatMessage())\" class=\"fa-solid fa-reply ax-rotate ax-cursor-pointer\"></i>\n}\n", styles: ["ax-conversation-message{display:flex;align-items:flex-end;margin:.5rem}ax-conversation-message .ax-message-reply-container{padding:.75rem}ax-conversation-message .ax-message-reply-container,ax-conversation-message .ax-image-reply-container,ax-conversation-message .ax-video-reply-container{border-left:.3rem solid rgb(var(--ax-comp-conversation-border-color));border-radius:.75rem;margin-bottom:.25rem;overflow:hidden}ax-conversation-message .ax-message-reply-container .file,ax-conversation-message .ax-image-reply-container .file,ax-conversation-message .ax-video-reply-container .file{display:flex;align-items:center}ax-conversation-message .ax-message-reply-container .file i,ax-conversation-message .ax-image-reply-container .file i,ax-conversation-message .ax-video-reply-container .file i{margin-inline-end:.5rem}ax-conversation-message .ax-message-reply-container img,ax-conversation-message .ax-message-reply-container video,ax-conversation-message .ax-image-reply-container img,ax-conversation-message .ax-image-reply-container video,ax-conversation-message .ax-video-reply-container img,ax-conversation-message .ax-video-reply-container video{max-width:6rem}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message.ax-state-own .ax-conversation-controller button{background-color:rgb(var(--ax-comp-conversation-own-color-fore));color:rgb(var(--ax-comp-conversation-own-color))}ax-conversation-message.ax-state-own .ax-message-reply-container{background-color:rgb(var(--ax-comp-conversation-own-reply-color));color:rgb(var(--ax-comp-conversation-own-reply-color-fore))}ax-conversation-message.ax-state-other .ax-conversation-controller button{background-color:rgb(var(--ax-comp-conversation-other-color-fore));color:rgb(var(--ax-comp-conversation-other-color))}ax-conversation-message.ax-state-other .ax-message-reply-container{background-color:rgb(var(--ax-comp-conversation-other-reply-color));color:rgb(var(--ax-comp-conversation-other-reply-color-fore))}ax-conversation-message .ax-conversation-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message .ax-conversation-controller button ax-loading-spinner{display:flex}ax-conversation-message .ax-conversation-controller button.ax-state-error{background-color:rgb(var(--ax-sys-color-danger-surface));color:rgb(var(--ax-sys-color-danger-fore))}ax-conversation-message .ax-conversation-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message .ax-message-content{display:flex;flex-direction:column;gap:.25rem;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-sys-border-radius);overflow:hidden;width:fit-content;max-width:50%;margin-inline-start:.5rem}ax-conversation-message .ax-message-content .ax-action-button{display:grid;grid-template-columns:repeat(2,1fr)}ax-conversation-message .ax-message-content .ax-action-button .ax-message-user-name{justify-self:start;grid-column:1}ax-conversation-message .ax-message-content .ax-action-button .ax-message-action-button{justify-self:end;grid-column:2}ax-conversation-message .ax-message-content .ax-action-button ax-menu.ax-action-list-horizontal{min-width:0;gap:0}ax-conversation-message .ax-message-content .ax-action-button .ax-parent-menu-item{height:auto!important;padding:0!important}ax-conversation-message .ax-message-content.ax-type-video{padding:0}ax-conversation-message .ax-message-content.ax-type-image{padding:0}ax-conversation-message .ax-message-content .ax-chat-message-status{padding:.25rem .5rem}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:rgb(var(--ax-comp-conversation-own-color));color:rgb(var(--ax-comp-conversation-own-color-fore));justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:rgb(var(--ax-comp-conversation-own-color-fore))}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:rgb(var(--ax-comp-conversation-other-color));color:rgb(var(--ax-comp-conversation-other-color-fore))}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:rgb(var(--ax-comp-conversation-other-color-fore))}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:rgb(var(--ax-comp-conversation-status-color))}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon{font-weight:700;font-size:.875rem}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon-error{color:rgb(var(--ax-sys-color-danger-surface))}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}ax-conversation-message .ax-resend-button{border-radius:999rem}ax-conversation-message .ax-cursor-pointer{cursor:pointer}ax-conversation-message .ax-rounded{border-radius:.75rem}ax-conversation-message .ax-message-content p{padding:.75rem;color:rgba(var(--ax-sys-color-on-primary))}ax-conversation-message .ax-rotate{transform:scaleX(-1);margin-inline-start:.5rem}@media(min-width:320px)and (max-width:640px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"], dependencies: [{ kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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" }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$1.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i1$1.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXConversationMessageComponent, isStandalone: true, selector: "ax-conversation-message", inputs: { isReplyArrowShown: { classPropertyName: "isReplyArrowShown", publicName: "isReplyArrowShown", isSignal: true, isRequired: false, transformFunction: null }, chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionMenuOpening: "onActionMenuOpening", onReplyClick: "onReplyClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXConversationMessageComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chatMessage().fromId) {\n  @if (avatar()) {\n    <ng-container [ngTemplateOutlet]=\"avatar()\"></ng-container>\n  } @else {\n    <ax-avatar color=\"primary\" [size]=\"36\"> </ax-avatar>\n  }\n}\n\n@if (isOwn && isReplyArrowShown()) {\n  <i (click)=\"replyHandler(chatMessage())\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div\n  class=\"ax-message-content\"\n  [class]=\"'ax-type-' + messageType()\"\n  [class.ax-state-own]=\"!chatMessage().fromId\"\n  [class.ax-state-other]=\"chatMessage().fromId\"\n>\n  <div class=\"ax-action-button\">\n    @if (chatMessage()?.userName) {\n      <div class=\"ax-message-user-name\">\n        <ax-text>{{ chatMessage().userName }}</ax-text>\n      </div>\n    }\n\n    @if (chatMessage()?.showActionButton) {\n      <div class=\"ax-message-action-button\">\n        <ax-menu openOn=\"click\" [hasArrow]=\"false\">\n          <ax-menu-item class=\"ax-parent-menu-item\">\n            <ax-text (click)=\"handleActionClick()\">...</ax-text>\n\n            @for (item of actionButtonItemsPrivate(); track item.text) {\n              <ax-menu-item [color]=\"item.color\" (onClick)=\"item.onClick(chatMessage().id)\">\n                <ax-text>{{ item.text }}</ax-text>\n                <ax-prefix>\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                </ax-prefix>\n\n                @for (innerItem of item.items; track innerItem.text) {\n                  <ax-menu-item [color]=\"innerItem.color\" (onClick)=\"innerItem.onClick(chatMessage().id)\">\n                    <ax-text>{{ innerItem.text }}</ax-text>\n                    <ax-prefix>\n                      <ax-icon [icon]=\"innerItem.icon\"></ax-icon>\n                    </ax-prefix>\n                  </ax-menu-item>\n                }\n              </ax-menu-item>\n            }\n          </ax-menu-item>\n        </ax-menu>\n      </div>\n    }\n  </div>\n\n  <ng-template [cdkPortalOutlet]=\"portal()\" (attached)=\"_handleAttached($event)\"></ng-template>\n\n  <div class=\"ax-chat-message-status\">\n    <div class=\"ax-message-prefix\"></div>\n    <div>\n      <div class=\"ax-message-suffix\"></div>\n      <span>\n        {{ chatMessage().sendTime | format: 'datetime' : 'HH:mm' | async }}\n      </span>\n      <span>\n        @if (isOwn) {\n          @if (chatMessage().deliverTime && chatMessage().sendTime) {\n            <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n          }\n          @if (chatMessage().readTime && chatMessage().sendTime) {\n            <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n          }\n        }\n      </span>\n    </div>\n  </div>\n</div>\n\n@if (!chatMessage().sendTime) {\n  <ax-button class=\"ax-resend-button ax-xs\" color=\"danger\" #b>\n    <ax-icon class=\"ax-icon ax-icon-error\"></ax-icon>\n\n    <ax-popover [target]=\"b\" placement=\"bottom-end\" #popover>\n      <div>\n        <ax-content> </ax-content>\n        <ax-button-item-list>\n          @if (chatMessage().onResendClick) {\n            <ax-button-item text=\"Resend\" (onClick)=\"handleResendClick()\">\n              <ax-icon class=\"ax-icon ax-icon-reload ax-bold\"></ax-icon>\n            </ax-button-item>\n          }\n          @if (chatMessage().onDeleteClick) {\n            <ax-button-item text=\"Delete\" color=\"danger\" (onClick)=\"handleDeleteClick()\">\n              <ax-icon class=\"ax-icon ax-icon-clear ax-bold\"></ax-icon>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </div>\n    </ax-popover>\n  </ax-button>\n}\n\n@if (!isOwn && isReplyArrowShown()) {\n  <i (click)=\"replyHandler(chatMessage())\" class=\"fa-solid fa-reply ax-rotate ax-cursor-pointer\"></i>\n}\n", styles: ["ax-conversation-message{display:flex;align-items:flex-end;margin:.5rem}ax-conversation-message .ax-message-reply-container{padding:.75rem}ax-conversation-message .ax-message-reply-container,ax-conversation-message .ax-image-reply-container,ax-conversation-message .ax-video-reply-container{border-left:.3rem solid rgb(var(--ax-comp-conversation-border-color));border-radius:.75rem;margin-bottom:.25rem;overflow:hidden}ax-conversation-message .ax-message-reply-container .file,ax-conversation-message .ax-image-reply-container .file,ax-conversation-message .ax-video-reply-container .file{display:flex;align-items:center}ax-conversation-message .ax-message-reply-container .file i,ax-conversation-message .ax-image-reply-container .file i,ax-conversation-message .ax-video-reply-container .file i{margin-inline-end:.5rem}ax-conversation-message .ax-message-reply-container img,ax-conversation-message .ax-message-reply-container video,ax-conversation-message .ax-image-reply-container img,ax-conversation-message .ax-image-reply-container video,ax-conversation-message .ax-video-reply-container img,ax-conversation-message .ax-video-reply-container video{max-width:6rem}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message.ax-state-own .ax-conversation-controller button{background-color:rgb(var(--ax-comp-conversation-own-color-fore));color:rgb(var(--ax-comp-conversation-own-color))}ax-conversation-message.ax-state-own .ax-message-reply-container{background-color:rgb(var(--ax-comp-conversation-own-reply-color));color:rgb(var(--ax-comp-conversation-own-reply-color-fore))}ax-conversation-message.ax-state-other .ax-conversation-controller button{background-color:rgb(var(--ax-comp-conversation-other-color-fore));color:rgb(var(--ax-comp-conversation-other-color))}ax-conversation-message.ax-state-other .ax-message-reply-container{background-color:rgb(var(--ax-comp-conversation-other-reply-color));color:rgb(var(--ax-comp-conversation-other-reply-color-fore))}ax-conversation-message .ax-conversation-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message .ax-conversation-controller button ax-loading-spinner{display:flex}ax-conversation-message .ax-conversation-controller button.ax-state-error{background-color:rgb(var(--ax-sys-color-danger-surface));color:rgb(var(--ax-sys-color-danger-fore))}ax-conversation-message .ax-conversation-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message .ax-message-content{display:flex;flex-direction:column;gap:.25rem;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-sys-border-radius);overflow:hidden;width:fit-content;max-width:50%;margin-inline-start:.5rem}ax-conversation-message .ax-message-content .ax-action-button{display:grid;grid-template-columns:repeat(2,1fr)}ax-conversation-message .ax-message-content .ax-action-button .ax-message-user-name{justify-self:start;grid-column:1}ax-conversation-message .ax-message-content .ax-action-button .ax-message-action-button{justify-self:end;grid-column:2}ax-conversation-message .ax-message-content .ax-action-button ax-menu.ax-action-list-horizontal{min-width:0;gap:0}ax-conversation-message .ax-message-content .ax-action-button .ax-parent-menu-item{height:auto!important;padding:0!important}ax-conversation-message .ax-message-content.ax-type-video{padding:0}ax-conversation-message .ax-message-content.ax-type-image{padding:0}ax-conversation-message .ax-message-content .ax-chat-message-status{padding:.25rem .5rem}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:rgb(var(--ax-comp-conversation-own-color));color:rgb(var(--ax-comp-conversation-own-color-fore));justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:rgb(var(--ax-comp-conversation-own-color-fore))}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:rgb(var(--ax-comp-conversation-other-color));color:rgb(var(--ax-comp-conversation-other-color-fore))}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:rgb(var(--ax-comp-conversation-other-color-fore))}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:rgb(var(--ax-comp-conversation-status-color))}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon{font-weight:700;font-size:.875rem}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon-error{color:rgb(var(--ax-sys-color-danger-surface))}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}ax-conversation-message .ax-resend-button{border-radius:999rem}ax-conversation-message .ax-cursor-pointer{cursor:pointer}ax-conversation-message .ax-rounded{border-radius:.75rem}ax-conversation-message .ax-message-content p{padding:.75rem;color:rgba(var(--ax-sys-color-on-primary))}ax-conversation-message .ax-rotate{transform:scaleX(-1);margin-inline-start:.5rem}@media(min-width:320px)and (max-width:640px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"], dependencies: [{ kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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" }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$1.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i1$1.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXConversationMessageComponent, decorators: [{
             type: Component,