@acorex/components 22.4.17 → 22.4.20

package/fesm2022/acorex-components-comment.mjs

@@ -1,7 +1,7 @@
 import { AXComponent } from '@acorex/cdk/common';
 import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, PLATFORM_ID, contentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, input, model, viewChild, output, computed, afterNextRender, DestroyRef, signal, effect, untracked, NgModule } from '@angular/core';
+import { inject, DOCUMENT, PLATFORM_ID, contentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, input, output, signal, computed, effect, untracked, viewChild, afterNextRender, DestroyRef, InjectionToken, model, NgModule } from '@angular/core';
 import { AXAvatarComponent } from '@acorex/components/avatar';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
 import { AXButtonItemListComponent, AXButtonModule } from '@acorex/components/button';
@@ -139,19 +139,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 class AXCommentLikeComponent {
     constructor() {
-        this.like = model.required(/* @ts-ignore */
+        /** Current like state from the parent. Later parent values replace a local toggle. */
+        this.like = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "like" }] : /* istanbul ignore next */ []));
+        this.likeChange = output();
+        this.optimistic = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optimistic" }] : /* istanbul ignore next */ []));
+        this.seenLike = false;
+        this.hasSeenLike = false;
+        /** Parent value, unless the user just toggled and the parent has not caught up. */
+        this.pressed = computed(() => this.optimistic() ?? this.like(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const incoming = this.like();
+            untracked(() => {
+                if (!this.hasSeenLike || incoming !== this.seenLike) {
+                    this.hasSeenLike = true;
+                    this.seenLike = incoming;
+                    this.optimistic.set(null);
+                }
+            });
+        });
     }
     toggleLike() {
-        this.like.update((prev) => !prev);
+        const next = !this.pressed();
+        this.optimistic.set(next);
+        this.likeChange.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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: "<button\n  type=\"button\"\n  class=\"ax-comment-like-button\"\n  [class.ax-state-liked]=\"like()\"\n  [attr.aria-pressed]=\"like()\"\n  (click)=\"toggleLike()\"\n>\n  <ax-icon [icon]=\"like() ? 'ax-icon ax-icon-solid ax-icon-heart' : 'ax-icon ax-icon-heart'\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\n</button>\n", styles: ["@layer properties;@layer components{ax-comment-like{display:inline-flex}.ax-comment-like-button{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));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))}@supports (color: color-mix(in lab,red,red)){.ax-comment-like-button{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 70%,transparent)}}.ax-comment-like-button ax-icon{font-size:14px;--tw-leading: 1;line-height:1}.ax-comment-like-button:hover:not(.ax-state-liked){color:rgba(var(--ax-sys-color-danger-400))}.ax-comment-like-button.ax-state-liked{color:rgba(var(--ax-sys-color-danger-surface))}.ax-comment-like-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], 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: "22.1.6", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { likeChange: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ax-comment-like-button\"\n  [class.ax-state-liked]=\"pressed()\"\n  [attr.aria-pressed]=\"pressed()\"\n  (click)=\"toggleLike()\"\n>\n  <ax-icon [icon]=\"pressed() ? 'ax-icon ax-icon-solid ax-icon-heart' : 'ax-icon ax-icon-heart'\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\n</button>\n", styles: ["@layer properties;@layer components{ax-comment-like{display:inline-flex}.ax-comment-like-button{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));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))}@supports (color: color-mix(in lab,red,red)){.ax-comment-like-button{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 70%,transparent)}}.ax-comment-like-button ax-icon{font-size:14px;--tw-leading: 1;line-height:1}.ax-comment-like-button:hover:not(.ax-state-liked){color:rgba(var(--ax-sys-color-danger-400))}.ax-comment-like-button.ax-state-liked{color:rgba(var(--ax-sys-color-danger-surface))}.ax-comment-like-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], 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: "22.1.6", 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: "<button\n  type=\"button\"\n  class=\"ax-comment-like-button\"\n  [class.ax-state-liked]=\"like()\"\n  [attr.aria-pressed]=\"like()\"\n  (click)=\"toggleLike()\"\n>\n  <ax-icon [icon]=\"like() ? 'ax-icon ax-icon-solid ax-icon-heart' : 'ax-icon ax-icon-heart'\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\n</button>\n", styles: ["@layer properties;@layer components{ax-comment-like{display:inline-flex}.ax-comment-like-button{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));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))}@supports (color: color-mix(in lab,red,red)){.ax-comment-like-button{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 70%,transparent)}}.ax-comment-like-button ax-icon{font-size:14px;--tw-leading: 1;line-height:1}.ax-comment-like-button:hover:not(.ax-state-liked){color:rgba(var(--ax-sys-color-danger-400))}.ax-comment-like-button.ax-state-liked{color:rgba(var(--ax-sys-color-danger-surface))}.ax-comment-like-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { like: [{ type: i0.Input, args: [{ isSignal: true, alias: "like", required: true }] }, { type: i0.Output, args: ["likeChange"] }] } });
+            args: [{ selector: 'ax-comment-like', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<button\n  type=\"button\"\n  class=\"ax-comment-like-button\"\n  [class.ax-state-liked]=\"pressed()\"\n  [attr.aria-pressed]=\"pressed()\"\n  (click)=\"toggleLike()\"\n>\n  <ax-icon [icon]=\"pressed() ? 'ax-icon ax-icon-solid ax-icon-heart' : 'ax-icon ax-icon-heart'\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\n</button>\n", styles: ["@layer properties;@layer components{ax-comment-like{display:inline-flex}.ax-comment-like-button{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));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))}@supports (color: color-mix(in lab,red,red)){.ax-comment-like-button{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 70%,transparent)}}.ax-comment-like-button ax-icon{font-size:14px;--tw-leading: 1;line-height:1}.ax-comment-like-button:hover:not(.ax-state-liked){color:rgba(var(--ax-sys-color-danger-400))}.ax-comment-like-button.ax-state-liked{color:rgba(var(--ax-sys-color-danger-surface))}.ax-comment-like-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { like: [{ type: i0.Input, args: [{ isSignal: true, alias: "like", required: true }] }], likeChange: [{ type: i0.Output, args: ["likeChange"] }] } });
 
 /**
  * A component for displaying the reply action on a comment.
@@ -195,9 +216,14 @@ class AXCommentItemComponent {
         ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
         this.replyCount = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "replyCount" }] : /* istanbul ignore next */ []));
-        /** Two-way bindable state controlling whether nested replies are visible. */
-        this.repliesExpanded = model(false, /* @ts-ignore */
+        /** Whether nested replies are visible. A later parent value replaces a local toggle. */
+        this.repliesExpanded = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "repliesExpanded" }] : /* istanbul ignore next */ []));
+        this.repliesExpandedChange = output();
+        this.expanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.seenExpanded = false;
+        this.hasSeenExpanded = false;
         /** Whether replies for this item are currently being loaded. */
         this.loading = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -224,12 +250,46 @@ class AXCommentItemComponent {
         ...(ngDevMode ? [{ debugName: "showOverflowMenu" }] : /* istanbul ignore next */ []));
         this.overflowItems = computed(() => this.toButtonItems(this.itemActions()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []));
+        this.templateContexts = computed(() => {
+            const ctx = this.itemContext();
+            return ctx ? [ctx] : [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateContexts" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const incoming = this.repliesExpanded();
+            untracked(() => {
+                if (!this.hasSeenExpanded || incoming !== this.seenExpanded) {
+                    this.hasSeenExpanded = true;
+                    this.seenExpanded = incoming;
+                    this.expanded.set(incoming);
+                }
+            });
+        });
         afterNextRender(() => {
             if (this.itemTemplate())
                 return;
             (this.projectedAvatar() ?? this.viewAvatar())?.size?.set(this.avatarSize);
         });
     }
+    /**
+     * Recreates the custom item template when the rendered snapshot changes.
+     * The outlet otherwise keeps the first context on screen.
+     */
+    templateContextKey(ctx) {
+        const item = ctx.item;
+        return [
+            item.id,
+            item.author,
+            item.content ?? '',
+            item.date ?? '',
+            item.edited ? 1 : 0,
+            item.editedAt ?? '',
+            ctx.likes,
+            ctx.liked ? 1 : 0,
+            ctx.replyCount,
+            ctx.repliesExpanded ? 1 : 0,
+        ].join('|');
+    }
     getColor(data) {
         return data.color ?? 'default';
     }
@@ -288,22 +348,26 @@ class AXCommentItemComponent {
      * Toggles the collapse state of the comment replies section.
      */
     toggleReplies() {
-        this.repliesExpanded.update((v) => !v);
+        this.setExpanded(!this.expanded());
     }
     /**
      * Expands the nested replies section.
      */
     showReplies() {
-        this.repliesExpanded.set(true);
+        this.setExpanded(true);
     }
     /**
      * Collapses the nested replies section.
      */
     hideReplies() {
-        this.repliesExpanded.set(false);
+        this.setExpanded(false);
+    }
+    setExpanded(expanded) {
+        this.expanded.set(expanded);
+        this.repliesExpandedChange.emit(expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemContext: { classPropertyName: "itemContext", publicName: "itemContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpanded: "repliesExpandedChange", likeChange: "likeChange", replyClick: "replyClick", actionClick: "actionClick" }, host: { properties: { "class.ax-comment-item-reply": "isReply", "class.ax-comment-item-custom": "!!itemTemplate()" } }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "projectedAvatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewAvatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-layout\">\n  @if (showDefaultDataLayout()) {\n    @if (item(); as data) {\n      <ax-avatar [color]=\"getColor(data)\" [size]=\"avatarSize\" look=\"twotone\" shape=\"rounded\">\n        @if (data.avatar) {\n          <ax-image [src]=\"data.avatar\"></ax-image>\n        } @else {\n          <ax-text>{{ getInitials(data) }}</ax-text>\n        }\n      </ax-avatar>\n    }\n  }\n  <ng-content select=\"ax-avatar\" />\n\n  <div class=\"ax-comment-main\">\n    @if (itemTemplate(); as tpl) {\n      <div class=\"ax-comment-custom-body\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"itemContext()\" />\n      </div>\n    } @else if (showDefaultDataLayout()) {\n      @if (item(); as data) {\n        <div class=\"ax-comment-header\">\n          <div class=\"ax-comment-header-meta\">\n            <ax-title>{{ data.author }}</ax-title>\n            @if (data.isYou) {\n              <ax-badge\n                class=\"ax-sm ax-pill ax-comment-you-badge\"\n                look=\"twotone\"\n                color=\"primary\"\n                [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"\n              ></ax-badge>\n            }\n            @if (showEdited(data)) {\n              <ax-comment-edited [editedAt]=\"data.editedAt\" />\n            }\n            @if (data.date) {\n              <ax-comment-date>{{ data.date }}</ax-comment-date>\n            }\n          </div>\n          @if (showOverflowMenu()) {\n            <ax-dropdown-button\n              class=\"ax-sm ax-comment-menu-trigger\"\n              mode=\"dropdown\"\n              look=\"blank\"\n              [iconOnly]=\"true\"\n              text=\"More\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n              </ax-prefix>\n              <ax-button-item-list [items]=\"overflowItems()\" (onItemClick)=\"handleOverflowClick($event)\">\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          }\n        </div>\n        <div class=\"ax-comment-body\">\n          <ax-content>\n            <div [innerHTML]=\"data.content\"></div>\n          </ax-content>\n        </div>\n      }\n    }\n\n    <div class=\"ax-comment-default\" [hidden]=\"!useProjectedSlots()\">\n      <div class=\"ax-comment-header\">\n        <div class=\"ax-comment-header-meta\">\n          <ng-content select=\"ax-title\" />\n          <ng-content select=\"ax-subtitle\" />\n          <ng-content select=\"ax-badge\" />\n          <ng-content select=\"ax-comment-edited\" />\n          <ng-content select=\"ax-comment-date\" />\n        </div>\n        <ng-content select=\"ax-comment-menu-options\" />\n      </div>\n      <div class=\"ax-comment-body\">\n        <ng-content select=\"ax-content\" />\n      </div>\n    </div>\n\n    <div class=\"ax-comment-actions\">\n      @if (item(); as data) {\n        <ax-comment-like [like]=\"!!data.liked\" (likeChange)=\"handleLike($event)\">\n          {{ data.likes ?? 0 }}\n        </ax-comment-like>\n        <ax-comment-reply-text (click)=\"handleReply($event)\"></ax-comment-reply-text>\n      }\n      <ng-content select=\"ax-comment-like\" />\n      <ng-content select=\"ax-comment-reply-text\" />\n      @if (replyCount()) {\n        <button\n          type=\"button\"\n          class=\"ax-comment-replies-toggle\"\n          [attr.aria-expanded]=\"repliesExpanded()\"\n          [attr.aria-busy]=\"loading()\"\n          [disabled]=\"loading()\"\n          (click)=\"toggleReplies()\"\n        >\n          <ax-icon\n            [icon]=\"\n              loading()\n                ? 'ax-icon ax-icon-reload'\n                : repliesExpanded()\n                  ? 'ax-icon ax-icon-chevron-up'\n                  : 'ax-icon ax-icon-chevron-down'\n            \"\n            [class.ax-comment-loading-icon]=\"loading()\"\n          ></ax-icon>\n          <span>\n            {{ replyCount() }}\n            {{ ((replyCount() ?? 0) > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n          </span>\n        </button>\n      }\n    </div>\n\n    <div class=\"ax-comment-replies\" [hidden]=\"!(replyCount() && repliesExpanded())\">\n      @if (loading()) {\n        <div class=\"ax-comment-replies-loading\">\n          <ax-icon icon=\"ax-icon ax-icon-reload\" class=\"ax-comment-loading-icon\"></ax-icon>\n        </div>\n      }\n      <ng-content select=\"ax-comment-item\" />\n      <ng-content select=\"ax-comment-reply-more\" />\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-comment-item{display:block;transition-property:background-color;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: .7s;transition-duration:.7s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));padding-block:var(--ax-comp-comment-padding-y, 12px)}ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 8%,transparent);border-radius:8px}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,var(--color-primary) 8%,transparent)}}ax-comment-item .ax-comment-layout{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:flex-start;gap:var(--ax-comp-comment-gap, .5rem)}ax-comment-item .ax-comment-layout>ax-avatar{flex-shrink:0}ax-comment-item .ax-comment-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-comment-item .ax-comment-default[hidden]{display:none}ax-comment-item .ax-comment-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-comment-item .ax-comment-custom-body{width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-menu-trigger{flex-shrink:0}@media(hover:hover){ax-comment-item .ax-comment-menu-trigger{opacity:0%;transition:opacity .15s ease}ax-comment-item .ax-comment-layout:has(>ax-avatar:hover)>.ax-comment-main>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-header:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-body:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-actions:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-header:focus-within>.ax-comment-menu-trigger{opacity:100%}}ax-comment-item .ax-comment-header-meta{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center}ax-comment-item ax-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-comment-item ax-subtitle{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);font-size:11px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-comment-item ax-subtitle{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 55%,transparent)}}ax-comment-item .ax-comment-you-badge{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0}ax-comment-item .ax-comment-body{margin-top:calc(var(--spacing, .25rem) * 1)}ax-comment-item ax-content{display:block;font-size:13.5px;overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface));line-height:1.6}ax-comment-item ax-content a,ax-comment-item ax-content .ax-mention{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface));text-decoration-line:none}ax-comment-item ax-content a:hover,ax-comment-item ax-content .ax-mention:hover{text-decoration-line:underline}ax-comment-item ax-content ul,ax-comment-item ax-content ol{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom:calc(var(--spacing, .25rem) * 0);padding-inline-start:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-content li{margin-block:calc(var(--spacing, .25rem) * .5)}ax-comment-item ax-content p{margin:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;min-height:calc(var(--spacing, .25rem) * 7);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-comment-like,ax-comment-item ax-comment-reply-text,ax-comment-item .ax-comment-replies-toggle{-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies-toggle{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--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-toggle ax-icon{font-size:11px;--tw-leading: 1;line-height:1}ax-comment-item .ax-comment-replies-toggle:hover:not(:disabled){text-decoration-line:underline}ax-comment-item .ax-comment-replies-toggle:disabled{cursor:wait;opacity:70%}ax-comment-item .ax-comment-replies-toggle:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}ax-comment-item .ax-comment-loading-icon{animation:var(--animate-spin, spin 1s linear infinite)}ax-comment-item .ax-comment-replies-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;padding-block: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))}@supports (color: color-mix(in lab,red,red)){ax-comment-item .ax-comment-replies-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 40%,transparent)}}ax-comment-item .ax-comment-replies{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column}ax-comment-item .ax-comment-replies[hidden]{display:none}ax-comment-item ax-comment-reply-more{margin-top:calc(var(--spacing, .25rem) * 1);cursor:pointer;font-size:12.5px;--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-reply-more:hover{text-decoration-line:underline}ax-comment-item ax-comment-menu-options{margin-inline-end:calc(var(--spacing, .25rem) * -1);margin-top:calc(var(--spacing, .25rem) * -1);flex-shrink:0}ax-comment-item.ax-comment-item-reply{padding-block:10px}ax-comment-item.ax-comment-item-custom .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 2)}ax-comment-item.ax-comment-item-custom .ax-comment-replies{margin-inline-start:.5rem;padding-inline-start:1.25rem;border-inline-start:2px solid color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 35%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-comment-item-custom .ax-comment-replies{border-inline-start:2px solid color-mix(in srgb,var(--color-primary) 35%,transparent)}}ax-comment-item.ax-comment-item-custom.ax-comment-item-reply{padding-block:8px}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@keyframes spin{to{transform:rotate(360deg)}}@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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], 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" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "component", type: AXCommentEditedComponent, selector: "ax-comment-edited", inputs: ["editedAt"] }, { kind: "component", type: AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["like"], outputs: ["likeChange"] }, { kind: "component", type: AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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: "22.1.6", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemContext: { classPropertyName: "itemContext", publicName: "itemContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpandedChange: "repliesExpandedChange", likeChange: "likeChange", replyClick: "replyClick", actionClick: "actionClick" }, host: { properties: { "class.ax-comment-item-reply": "isReply", "class.ax-comment-item-custom": "!!itemTemplate()" } }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "projectedAvatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewAvatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-layout\">\n  @if (showDefaultDataLayout()) {\n    @if (item(); as data) {\n      <ax-avatar [color]=\"getColor(data)\" [size]=\"avatarSize\" look=\"twotone\" shape=\"rounded\">\n        @if (data.avatar) {\n          <ax-image [src]=\"data.avatar\"></ax-image>\n        } @else {\n          <ax-text>{{ getInitials(data) }}</ax-text>\n        }\n      </ax-avatar>\n    }\n  }\n  <ng-content select=\"ax-avatar\" />\n\n  <div class=\"ax-comment-main\">\n    @if (itemTemplate(); as tpl) {\n      @for (ctx of templateContexts(); track templateContextKey(ctx)) {\n        <div class=\"ax-comment-custom-body\">\n          <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"ctx\" />\n        </div>\n      }\n    } @else if (showDefaultDataLayout()) {\n      @if (item(); as data) {\n        <div class=\"ax-comment-header\">\n          <div class=\"ax-comment-header-meta\">\n            <ax-title>{{ data.author }}</ax-title>\n            @if (data.isYou) {\n              <ax-badge\n                class=\"ax-sm ax-pill ax-comment-you-badge\"\n                look=\"twotone\"\n                color=\"primary\"\n                [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"\n              ></ax-badge>\n            }\n            @if (showEdited(data)) {\n              <ax-comment-edited [editedAt]=\"data.editedAt\" />\n            }\n            @if (data.date) {\n              <ax-comment-date>{{ data.date }}</ax-comment-date>\n            }\n          </div>\n          @if (showOverflowMenu()) {\n            <ax-dropdown-button\n              class=\"ax-sm ax-comment-menu-trigger\"\n              mode=\"dropdown\"\n              look=\"blank\"\n              [iconOnly]=\"true\"\n              text=\"More\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n              </ax-prefix>\n              <ax-button-item-list [items]=\"overflowItems()\" (onItemClick)=\"handleOverflowClick($event)\">\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          }\n        </div>\n        <div class=\"ax-comment-body\">\n          <ax-content>\n            <div [innerHTML]=\"data.content\"></div>\n          </ax-content>\n        </div>\n      }\n    }\n\n    <div class=\"ax-comment-default\" [hidden]=\"!useProjectedSlots()\">\n      <div class=\"ax-comment-header\">\n        <div class=\"ax-comment-header-meta\">\n          <ng-content select=\"ax-title\" />\n          <ng-content select=\"ax-subtitle\" />\n          <ng-content select=\"ax-badge\" />\n          <ng-content select=\"ax-comment-edited\" />\n          <ng-content select=\"ax-comment-date\" />\n        </div>\n        <ng-content select=\"ax-comment-menu-options\" />\n      </div>\n      <div class=\"ax-comment-body\">\n        <ng-content select=\"ax-content\" />\n      </div>\n    </div>\n\n    <div class=\"ax-comment-actions\">\n      @if (item(); as data) {\n        <ax-comment-like [like]=\"!!data.liked\" (likeChange)=\"handleLike($event)\">\n          {{ data.likes ?? 0 }}\n        </ax-comment-like>\n        <ax-comment-reply-text (click)=\"handleReply($event)\"></ax-comment-reply-text>\n      }\n      <ng-content select=\"ax-comment-like\" />\n      <ng-content select=\"ax-comment-reply-text\" />\n      @if (replyCount()) {\n        <button\n          type=\"button\"\n          class=\"ax-comment-replies-toggle\"\n          [attr.aria-expanded]=\"expanded()\"\n          [attr.aria-busy]=\"loading()\"\n          [disabled]=\"loading()\"\n          (click)=\"toggleReplies()\"\n        >\n          <ax-icon\n            [icon]=\"\n              loading()\n                ? 'ax-icon ax-icon-reload'\n                : expanded()\n                  ? 'ax-icon ax-icon-chevron-up'\n                  : 'ax-icon ax-icon-chevron-down'\n            \"\n            [class.ax-comment-loading-icon]=\"loading()\"\n          ></ax-icon>\n          <span>\n            {{ replyCount() }}\n            {{ ((replyCount() ?? 0) > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n          </span>\n        </button>\n      }\n    </div>\n\n    <div class=\"ax-comment-replies\" [hidden]=\"!(replyCount() && expanded())\">\n      @if (loading()) {\n        <div class=\"ax-comment-replies-loading\">\n          <ax-icon icon=\"ax-icon ax-icon-reload\" class=\"ax-comment-loading-icon\"></ax-icon>\n        </div>\n      }\n      <ng-content select=\"ax-comment-item\" />\n      <ng-content select=\"ax-comment-reply-more\" />\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-comment-item{display:block;transition-property:background-color;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: .7s;transition-duration:.7s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));padding-block:var(--ax-comp-comment-padding-y, 12px)}ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 8%,transparent);border-radius:8px}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,var(--color-primary) 8%,transparent)}}ax-comment-item .ax-comment-layout{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:flex-start;gap:var(--ax-comp-comment-gap, .5rem)}ax-comment-item .ax-comment-layout>ax-avatar{flex-shrink:0}ax-comment-item .ax-comment-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-comment-item .ax-comment-default[hidden]{display:none}ax-comment-item .ax-comment-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-comment-item .ax-comment-custom-body{width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-menu-trigger{flex-shrink:0}@media(hover:hover){ax-comment-item .ax-comment-menu-trigger{opacity:0%;transition:opacity .15s ease}ax-comment-item .ax-comment-layout:has(>ax-avatar:hover)>.ax-comment-main>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-header:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-body:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-actions:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-header:focus-within>.ax-comment-menu-trigger{opacity:100%}}ax-comment-item .ax-comment-header-meta{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center}ax-comment-item ax-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-comment-item ax-subtitle{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);font-size:11px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-comment-item ax-subtitle{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 55%,transparent)}}ax-comment-item .ax-comment-you-badge{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0}ax-comment-item .ax-comment-body{margin-top:calc(var(--spacing, .25rem) * 1)}ax-comment-item ax-content{display:block;font-size:13.5px;overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface));line-height:1.6}ax-comment-item ax-content a,ax-comment-item ax-content .ax-mention{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface));text-decoration-line:none}ax-comment-item ax-content a:hover,ax-comment-item ax-content .ax-mention:hover{text-decoration-line:underline}ax-comment-item ax-content ul,ax-comment-item ax-content ol{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom:calc(var(--spacing, .25rem) * 0);padding-inline-start:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-content li{margin-block:calc(var(--spacing, .25rem) * .5)}ax-comment-item ax-content p{margin:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;min-height:calc(var(--spacing, .25rem) * 7);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-comment-like,ax-comment-item ax-comment-reply-text,ax-comment-item .ax-comment-replies-toggle{-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies-toggle{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--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-toggle ax-icon{font-size:11px;--tw-leading: 1;line-height:1}ax-comment-item .ax-comment-replies-toggle:hover:not(:disabled){text-decoration-line:underline}ax-comment-item .ax-comment-replies-toggle:disabled{cursor:wait;opacity:70%}ax-comment-item .ax-comment-replies-toggle:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}ax-comment-item .ax-comment-loading-icon{animation:var(--animate-spin, spin 1s linear infinite)}ax-comment-item .ax-comment-replies-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;padding-block: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))}@supports (color: color-mix(in lab,red,red)){ax-comment-item .ax-comment-replies-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 40%,transparent)}}ax-comment-item .ax-comment-replies{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column}ax-comment-item .ax-comment-replies[hidden]{display:none}ax-comment-item ax-comment-reply-more{margin-top:calc(var(--spacing, .25rem) * 1);cursor:pointer;font-size:12.5px;--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-reply-more:hover{text-decoration-line:underline}ax-comment-item ax-comment-menu-options{margin-inline-end:calc(var(--spacing, .25rem) * -1);margin-top:calc(var(--spacing, .25rem) * -1);flex-shrink:0}ax-comment-item.ax-comment-item-reply{padding-block:10px}ax-comment-item.ax-comment-item-custom .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 2)}ax-comment-item.ax-comment-item-custom .ax-comment-replies{margin-inline-start:.5rem;padding-inline-start:1.25rem;border-inline-start:2px solid color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 35%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-comment-item-custom .ax-comment-replies{border-inline-start:2px solid color-mix(in srgb,var(--color-primary) 35%,transparent)}}ax-comment-item.ax-comment-item-custom.ax-comment-item-reply{padding-block:8px}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@keyframes spin{to{transform:rotate(360deg)}}@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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], 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" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXCommentDateComponent, selector: "ax-comment-date" }, { kind: "component", type: AXCommentEditedComponent, selector: "ax-comment-edited", inputs: ["editedAt"] }, { kind: "component", type: AXCommentLikeComponent, selector: "ax-comment-like", inputs: ["like"], outputs: ["likeChange"] }, { kind: "component", type: AXCommentReplyTextComponent, selector: "ax-comment-reply-text" }, { kind: "component", type: AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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: "22.1.6", ngImport: i0, type: AXCommentItemComponent, decorators: [{
             type: Component,
@@ -325,8 +389,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], host: {
                         '[class.ax-comment-item-reply]': 'isReply',
                         '[class.ax-comment-item-custom]': '!!itemTemplate()',
-                    }, template: "<div class=\"ax-comment-layout\">\n  @if (showDefaultDataLayout()) {\n    @if (item(); as data) {\n      <ax-avatar [color]=\"getColor(data)\" [size]=\"avatarSize\" look=\"twotone\" shape=\"rounded\">\n        @if (data.avatar) {\n          <ax-image [src]=\"data.avatar\"></ax-image>\n        } @else {\n          <ax-text>{{ getInitials(data) }}</ax-text>\n        }\n      </ax-avatar>\n    }\n  }\n  <ng-content select=\"ax-avatar\" />\n\n  <div class=\"ax-comment-main\">\n    @if (itemTemplate(); as tpl) {\n      <div class=\"ax-comment-custom-body\">\n        <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"itemContext()\" />\n      </div>\n    } @else if (showDefaultDataLayout()) {\n      @if (item(); as data) {\n        <div class=\"ax-comment-header\">\n          <div class=\"ax-comment-header-meta\">\n            <ax-title>{{ data.author }}</ax-title>\n            @if (data.isYou) {\n              <ax-badge\n                class=\"ax-sm ax-pill ax-comment-you-badge\"\n                look=\"twotone\"\n                color=\"primary\"\n                [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"\n              ></ax-badge>\n            }\n            @if (showEdited(data)) {\n              <ax-comment-edited [editedAt]=\"data.editedAt\" />\n            }\n            @if (data.date) {\n              <ax-comment-date>{{ data.date }}</ax-comment-date>\n            }\n          </div>\n          @if (showOverflowMenu()) {\n            <ax-dropdown-button\n              class=\"ax-sm ax-comment-menu-trigger\"\n              mode=\"dropdown\"\n              look=\"blank\"\n              [iconOnly]=\"true\"\n              text=\"More\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n              </ax-prefix>\n              <ax-button-item-list [items]=\"overflowItems()\" (onItemClick)=\"handleOverflowClick($event)\">\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          }\n        </div>\n        <div class=\"ax-comment-body\">\n          <ax-content>\n            <div [innerHTML]=\"data.content\"></div>\n          </ax-content>\n        </div>\n      }\n    }\n\n    <div class=\"ax-comment-default\" [hidden]=\"!useProjectedSlots()\">\n      <div class=\"ax-comment-header\">\n        <div class=\"ax-comment-header-meta\">\n          <ng-content select=\"ax-title\" />\n          <ng-content select=\"ax-subtitle\" />\n          <ng-content select=\"ax-badge\" />\n          <ng-content select=\"ax-comment-edited\" />\n          <ng-content select=\"ax-comment-date\" />\n        </div>\n        <ng-content select=\"ax-comment-menu-options\" />\n      </div>\n      <div class=\"ax-comment-body\">\n        <ng-content select=\"ax-content\" />\n      </div>\n    </div>\n\n    <div class=\"ax-comment-actions\">\n      @if (item(); as data) {\n        <ax-comment-like [like]=\"!!data.liked\" (likeChange)=\"handleLike($event)\">\n          {{ data.likes ?? 0 }}\n        </ax-comment-like>\n        <ax-comment-reply-text (click)=\"handleReply($event)\"></ax-comment-reply-text>\n      }\n      <ng-content select=\"ax-comment-like\" />\n      <ng-content select=\"ax-comment-reply-text\" />\n      @if (replyCount()) {\n        <button\n          type=\"button\"\n          class=\"ax-comment-replies-toggle\"\n          [attr.aria-expanded]=\"repliesExpanded()\"\n          [attr.aria-busy]=\"loading()\"\n          [disabled]=\"loading()\"\n          (click)=\"toggleReplies()\"\n        >\n          <ax-icon\n            [icon]=\"\n              loading()\n                ? 'ax-icon ax-icon-reload'\n                : repliesExpanded()\n                  ? 'ax-icon ax-icon-chevron-up'\n                  : 'ax-icon ax-icon-chevron-down'\n            \"\n            [class.ax-comment-loading-icon]=\"loading()\"\n          ></ax-icon>\n          <span>\n            {{ replyCount() }}\n            {{ ((replyCount() ?? 0) > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n          </span>\n        </button>\n      }\n    </div>\n\n    <div class=\"ax-comment-replies\" [hidden]=\"!(replyCount() && repliesExpanded())\">\n      @if (loading()) {\n        <div class=\"ax-comment-replies-loading\">\n          <ax-icon icon=\"ax-icon ax-icon-reload\" class=\"ax-comment-loading-icon\"></ax-icon>\n        </div>\n      }\n      <ng-content select=\"ax-comment-item\" />\n      <ng-content select=\"ax-comment-reply-more\" />\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-comment-item{display:block;transition-property:background-color;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: .7s;transition-duration:.7s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));padding-block:var(--ax-comp-comment-padding-y, 12px)}ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 8%,transparent);border-radius:8px}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,var(--color-primary) 8%,transparent)}}ax-comment-item .ax-comment-layout{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:flex-start;gap:var(--ax-comp-comment-gap, .5rem)}ax-comment-item .ax-comment-layout>ax-avatar{flex-shrink:0}ax-comment-item .ax-comment-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-comment-item .ax-comment-default[hidden]{display:none}ax-comment-item .ax-comment-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-comment-item .ax-comment-custom-body{width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-menu-trigger{flex-shrink:0}@media(hover:hover){ax-comment-item .ax-comment-menu-trigger{opacity:0%;transition:opacity .15s ease}ax-comment-item .ax-comment-layout:has(>ax-avatar:hover)>.ax-comment-main>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-header:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-body:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-actions:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-header:focus-within>.ax-comment-menu-trigger{opacity:100%}}ax-comment-item .ax-comment-header-meta{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center}ax-comment-item ax-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-comment-item ax-subtitle{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);font-size:11px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-comment-item ax-subtitle{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 55%,transparent)}}ax-comment-item .ax-comment-you-badge{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0}ax-comment-item .ax-comment-body{margin-top:calc(var(--spacing, .25rem) * 1)}ax-comment-item ax-content{display:block;font-size:13.5px;overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface));line-height:1.6}ax-comment-item ax-content a,ax-comment-item ax-content .ax-mention{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface));text-decoration-line:none}ax-comment-item ax-content a:hover,ax-comment-item ax-content .ax-mention:hover{text-decoration-line:underline}ax-comment-item ax-content ul,ax-comment-item ax-content ol{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom:calc(var(--spacing, .25rem) * 0);padding-inline-start:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-content li{margin-block:calc(var(--spacing, .25rem) * .5)}ax-comment-item ax-content p{margin:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;min-height:calc(var(--spacing, .25rem) * 7);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-comment-like,ax-comment-item ax-comment-reply-text,ax-comment-item .ax-comment-replies-toggle{-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies-toggle{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--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-toggle ax-icon{font-size:11px;--tw-leading: 1;line-height:1}ax-comment-item .ax-comment-replies-toggle:hover:not(:disabled){text-decoration-line:underline}ax-comment-item .ax-comment-replies-toggle:disabled{cursor:wait;opacity:70%}ax-comment-item .ax-comment-replies-toggle:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}ax-comment-item .ax-comment-loading-icon{animation:var(--animate-spin, spin 1s linear infinite)}ax-comment-item .ax-comment-replies-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;padding-block: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))}@supports (color: color-mix(in lab,red,red)){ax-comment-item .ax-comment-replies-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 40%,transparent)}}ax-comment-item .ax-comment-replies{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column}ax-comment-item .ax-comment-replies[hidden]{display:none}ax-comment-item ax-comment-reply-more{margin-top:calc(var(--spacing, .25rem) * 1);cursor:pointer;font-size:12.5px;--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-reply-more:hover{text-decoration-line:underline}ax-comment-item ax-comment-menu-options{margin-inline-end:calc(var(--spacing, .25rem) * -1);margin-top:calc(var(--spacing, .25rem) * -1);flex-shrink:0}ax-comment-item.ax-comment-item-reply{padding-block:10px}ax-comment-item.ax-comment-item-custom .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 2)}ax-comment-item.ax-comment-item-custom .ax-comment-replies{margin-inline-start:.5rem;padding-inline-start:1.25rem;border-inline-start:2px solid color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 35%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-comment-item-custom .ax-comment-replies{border-inline-start:2px solid color-mix(in srgb,var(--color-primary) 35%,transparent)}}ax-comment-item.ax-comment-item-custom.ax-comment-item-reply{padding-block:8px}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@keyframes spin{to{transform:rotate(360deg)}}@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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { projectedAvatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], viewAvatar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], 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"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], itemContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemContext", required: false }] }], likeChange: [{ type: i0.Output, args: ["likeChange"] }], replyClick: [{ type: i0.Output, args: ["replyClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+                    }, template: "<div class=\"ax-comment-layout\">\n  @if (showDefaultDataLayout()) {\n    @if (item(); as data) {\n      <ax-avatar [color]=\"getColor(data)\" [size]=\"avatarSize\" look=\"twotone\" shape=\"rounded\">\n        @if (data.avatar) {\n          <ax-image [src]=\"data.avatar\"></ax-image>\n        } @else {\n          <ax-text>{{ getInitials(data) }}</ax-text>\n        }\n      </ax-avatar>\n    }\n  }\n  <ng-content select=\"ax-avatar\" />\n\n  <div class=\"ax-comment-main\">\n    @if (itemTemplate(); as tpl) {\n      @for (ctx of templateContexts(); track templateContextKey(ctx)) {\n        <div class=\"ax-comment-custom-body\">\n          <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"ctx\" />\n        </div>\n      }\n    } @else if (showDefaultDataLayout()) {\n      @if (item(); as data) {\n        <div class=\"ax-comment-header\">\n          <div class=\"ax-comment-header-meta\">\n            <ax-title>{{ data.author }}</ax-title>\n            @if (data.isYou) {\n              <ax-badge\n                class=\"ax-sm ax-pill ax-comment-you-badge\"\n                look=\"twotone\"\n                color=\"primary\"\n                [text]=\"('@acorex:comment.you' | translate | async) ?? 'You'\"\n              ></ax-badge>\n            }\n            @if (showEdited(data)) {\n              <ax-comment-edited [editedAt]=\"data.editedAt\" />\n            }\n            @if (data.date) {\n              <ax-comment-date>{{ data.date }}</ax-comment-date>\n            }\n          </div>\n          @if (showOverflowMenu()) {\n            <ax-dropdown-button\n              class=\"ax-sm ax-comment-menu-trigger\"\n              mode=\"dropdown\"\n              look=\"blank\"\n              [iconOnly]=\"true\"\n              text=\"More\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"ax-icon ax-icon-more-horizontal\"></ax-icon>\n              </ax-prefix>\n              <ax-button-item-list [items]=\"overflowItems()\" (onItemClick)=\"handleOverflowClick($event)\">\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          }\n        </div>\n        <div class=\"ax-comment-body\">\n          <ax-content>\n            <div [innerHTML]=\"data.content\"></div>\n          </ax-content>\n        </div>\n      }\n    }\n\n    <div class=\"ax-comment-default\" [hidden]=\"!useProjectedSlots()\">\n      <div class=\"ax-comment-header\">\n        <div class=\"ax-comment-header-meta\">\n          <ng-content select=\"ax-title\" />\n          <ng-content select=\"ax-subtitle\" />\n          <ng-content select=\"ax-badge\" />\n          <ng-content select=\"ax-comment-edited\" />\n          <ng-content select=\"ax-comment-date\" />\n        </div>\n        <ng-content select=\"ax-comment-menu-options\" />\n      </div>\n      <div class=\"ax-comment-body\">\n        <ng-content select=\"ax-content\" />\n      </div>\n    </div>\n\n    <div class=\"ax-comment-actions\">\n      @if (item(); as data) {\n        <ax-comment-like [like]=\"!!data.liked\" (likeChange)=\"handleLike($event)\">\n          {{ data.likes ?? 0 }}\n        </ax-comment-like>\n        <ax-comment-reply-text (click)=\"handleReply($event)\"></ax-comment-reply-text>\n      }\n      <ng-content select=\"ax-comment-like\" />\n      <ng-content select=\"ax-comment-reply-text\" />\n      @if (replyCount()) {\n        <button\n          type=\"button\"\n          class=\"ax-comment-replies-toggle\"\n          [attr.aria-expanded]=\"expanded()\"\n          [attr.aria-busy]=\"loading()\"\n          [disabled]=\"loading()\"\n          (click)=\"toggleReplies()\"\n        >\n          <ax-icon\n            [icon]=\"\n              loading()\n                ? 'ax-icon ax-icon-reload'\n                : expanded()\n                  ? 'ax-icon ax-icon-chevron-up'\n                  : 'ax-icon ax-icon-chevron-down'\n            \"\n            [class.ax-comment-loading-icon]=\"loading()\"\n          ></ax-icon>\n          <span>\n            {{ replyCount() }}\n            {{ ((replyCount() ?? 0) > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n          </span>\n        </button>\n      }\n    </div>\n\n    <div class=\"ax-comment-replies\" [hidden]=\"!(replyCount() && expanded())\">\n      @if (loading()) {\n        <div class=\"ax-comment-replies-loading\">\n          <ax-icon icon=\"ax-icon ax-icon-reload\" class=\"ax-comment-loading-icon\"></ax-icon>\n        </div>\n      }\n      <ng-content select=\"ax-comment-item\" />\n      <ng-content select=\"ax-comment-reply-more\" />\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{ax-comment-item{display:block;transition-property:background-color;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: .7s;transition-duration:.7s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));padding-block:var(--ax-comp-comment-padding-y, 12px)}ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 8%,transparent);border-radius:8px}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-state-highlight{background-color:color-mix(in srgb,var(--color-primary) 8%,transparent)}}ax-comment-item .ax-comment-layout{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:flex-start;gap:var(--ax-comp-comment-gap, .5rem)}ax-comment-item .ax-comment-layout>ax-avatar{flex-shrink:0}ax-comment-item .ax-comment-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-comment-item .ax-comment-default[hidden]{display:none}ax-comment-item .ax-comment-header{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}ax-comment-item .ax-comment-custom-body{width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-menu-trigger{flex-shrink:0}@media(hover:hover){ax-comment-item .ax-comment-menu-trigger{opacity:0%;transition:opacity .15s ease}ax-comment-item .ax-comment-layout:has(>ax-avatar:hover)>.ax-comment-main>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-header:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-body:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-main:has(>.ax-comment-actions:hover)>.ax-comment-header>.ax-comment-menu-trigger,ax-comment-item .ax-comment-header:focus-within>.ax-comment-menu-trigger{opacity:100%}}ax-comment-item .ax-comment-header-meta{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center}ax-comment-item ax-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}ax-comment-item ax-subtitle{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);font-size:11px;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-comment-item ax-subtitle{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 55%,transparent)}}ax-comment-item .ax-comment-you-badge{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0}ax-comment-item .ax-comment-body{margin-top:calc(var(--spacing, .25rem) * 1)}ax-comment-item ax-content{display:block;font-size:13.5px;overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface));line-height:1.6}ax-comment-item ax-content a,ax-comment-item ax-content .ax-mention{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface));text-decoration-line:none}ax-comment-item ax-content a:hover,ax-comment-item ax-content .ax-mention:hover{text-decoration-line:underline}ax-comment-item ax-content ul,ax-comment-item ax-content ol{margin-top:calc(var(--spacing, .25rem) * 1);margin-bottom:calc(var(--spacing, .25rem) * 0);padding-inline-start:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-content li{margin-block:calc(var(--spacing, .25rem) * .5)}ax-comment-item ax-content p{margin:calc(var(--spacing, .25rem) * 0)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;min-height:calc(var(--spacing, .25rem) * 7);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 5)}ax-comment-item ax-comment-like,ax-comment-item ax-comment-reply-text,ax-comment-item .ax-comment-replies-toggle{-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies-toggle{display:inline-flex;min-height:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:12.5px;--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-toggle ax-icon{font-size:11px;--tw-leading: 1;line-height:1}ax-comment-item .ax-comment-replies-toggle:hover:not(:disabled){text-decoration-line:underline}ax-comment-item .ax-comment-replies-toggle:disabled{cursor:wait;opacity:70%}ax-comment-item .ax-comment-replies-toggle:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-outline-style: none;outline-style:none}ax-comment-item .ax-comment-loading-icon{animation:var(--animate-spin, spin 1s linear infinite)}ax-comment-item .ax-comment-replies-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;padding-block: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))}@supports (color: color-mix(in lab,red,red)){ax-comment-item .ax-comment-replies-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 40%,transparent)}}ax-comment-item .ax-comment-replies{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column}ax-comment-item .ax-comment-replies[hidden]{display:none}ax-comment-item ax-comment-reply-more{margin-top:calc(var(--spacing, .25rem) * 1);cursor:pointer;font-size:12.5px;--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-reply-more:hover{text-decoration-line:underline}ax-comment-item ax-comment-menu-options{margin-inline-end:calc(var(--spacing, .25rem) * -1);margin-top:calc(var(--spacing, .25rem) * -1);flex-shrink:0}ax-comment-item.ax-comment-item-reply{padding-block:10px}ax-comment-item.ax-comment-item-custom .ax-comment-actions{margin-top:calc(var(--spacing, .25rem) * 2)}ax-comment-item.ax-comment-item-custom .ax-comment-replies{margin-inline-start:.5rem;padding-inline-start:1.25rem;border-inline-start:2px solid color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 35%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-item.ax-comment-item-custom .ax-comment-replies{border-inline-start:2px solid color-mix(in srgb,var(--color-primary) 35%,transparent)}}ax-comment-item.ax-comment-item-custom.ax-comment-item-reply{padding-block:8px}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@keyframes spin{to{transform:rotate(360deg)}}@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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { projectedAvatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], viewAvatar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], replyCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyCount", required: false }] }], repliesExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "repliesExpanded", required: false }] }], repliesExpandedChange: [{ type: i0.Output, args: ["repliesExpandedChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], itemContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemContext", required: false }] }], likeChange: [{ type: i0.Output, args: ["likeChange"] }], replyClick: [{ type: i0.Output, args: ["replyClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 /**
  * A component for displaying and managing menu options on a comment.
@@ -521,6 +585,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }] });
 
+const AX_COMMENT_THREAD_HOST = new InjectionToken('AX_COMMENT_THREAD_HOST');
+
+/**
+ * Renders one level of the comment tree.
+ * A real component input (instead of `ngTemplateOutlet`) so OnPush checks this
+ * level again whenever the parent replaces the items array.
+ *
+ * @category Components
+ */
+class AXCommentThreadComponent {
+    constructor() {
+        this.host = inject(AX_COMMENT_THREAD_HOST);
+        this.items = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.level = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommentThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXCommentThreadComponent, isStandalone: true, selector: "ax-comment-thread", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "@for (item of items(); track host.trackItem(item)) {\n  <ax-comment-item\n    [attr.id]=\"'comment-' + host.getId(item)\"\n    [item]=\"item\"\n    [replyCount]=\"host.getReplyCount(item)\"\n    [repliesExpanded]=\"host.isExpanded(item)\"\n    [loading]=\"host.isItemLoading(item)\"\n    [itemTemplate]=\"itemTemplate()\"\n    [itemContext]=\"itemTemplate() ? host.getTemplateContext(item, level()) : null\"\n    (repliesExpandedChange)=\"host.onRepliesExpandedChange(item, $event)\"\n    (likeChange)=\"host.toggleLike(item, $event)\"\n    (replyClick)=\"host.replyTo(item, $event)\"\n    (actionClick)=\"host.emitAction(item, $event)\"\n  >\n    <ax-comment-thread [items]=\"host.getReplies(item)\" [level]=\"level() + 1\" [itemTemplate]=\"itemTemplate()\" />\n  </ax-comment-item>\n}\n", dependencies: [{ kind: "component", type: AXCommentThreadComponent, selector: "ax-comment-thread", inputs: ["items", "level", "itemTemplate"] }, { kind: "component", type: AXCommentItemComponent, selector: "ax-comment-item", inputs: ["item", "replyCount", "repliesExpanded", "loading", "itemTemplate", "itemContext"], outputs: ["repliesExpandedChange", "likeChange", "replyClick", "actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommentThreadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-comment-thread', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXCommentItemComponent, AXCommentThreadComponent], host: {
+                        style: 'display: contents',
+                    }, template: "@for (item of items(); track host.trackItem(item)) {\n  <ax-comment-item\n    [attr.id]=\"'comment-' + host.getId(item)\"\n    [item]=\"item\"\n    [replyCount]=\"host.getReplyCount(item)\"\n    [repliesExpanded]=\"host.isExpanded(item)\"\n    [loading]=\"host.isItemLoading(item)\"\n    [itemTemplate]=\"itemTemplate()\"\n    [itemContext]=\"itemTemplate() ? host.getTemplateContext(item, level()) : null\"\n    (repliesExpandedChange)=\"host.onRepliesExpandedChange(item, $event)\"\n    (likeChange)=\"host.toggleLike(item, $event)\"\n    (replyClick)=\"host.replyTo(item, $event)\"\n    (actionClick)=\"host.emitAction(item, $event)\"\n  >\n    <ax-comment-thread [items]=\"host.getReplies(item)\" [level]=\"level() + 1\" [itemTemplate]=\"itemTemplate()\" />\n  </ax-comment-item>\n}\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }] } });
+
 /**
  * Renders a comment thread from a datasource (array or lazy callback).
  * Provide `itemTemplate` or `<ng-template axCommentItem>` to customize item UI;
@@ -553,7 +646,7 @@ class AXCommentViewComponent {
         ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
         this.isLoading = this._isLoading.asReadonly();
         this.loadGeneration = 0;
-        this.syncingFromDatasource = false;
+        this.emptyReplies = [];
         this.isLazyDataSource = computed(() => typeof this.datasource() === 'function', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLazyDataSource" }] : /* istanbul ignore next */ []));
         this.hasDatasource = computed(() => this.datasource() != null, /* @ts-ignore */
@@ -562,8 +655,6 @@ class AXCommentViewComponent {
         ...(ngDevMode ? [{ debugName: "resolvedTemplate" }] : /* istanbul ignore next */ []));
         effect(() => {
             const ds = this.datasource();
-            if (this.syncingFromDatasource)
-                return;
             untracked(() => void this.applyDatasource(ds));
         });
     }
@@ -696,8 +787,26 @@ class AXCommentViewComponent {
     getId(item) {
         return String(item.id);
     }
+    /**
+     * Identity includes the fields the row renders. A same-id edit, like, or reply
+     * must refresh the row instead of leaving the previous snapshot on screen.
+     */
+    trackItem(item) {
+        const replies = (item.replies ?? []).map((reply) => this.trackItem(reply)).join(',');
+        return [
+            this.getId(item),
+            item.content ?? '',
+            item.likes ?? 0,
+            item.liked ? 1 : 0,
+            item.edited ? 1 : 0,
+            item.editedAt ?? '',
+            item.replyCount ?? item.replies?.length ?? 0,
+            item.repliesExpanded ? 1 : 0,
+            replies,
+        ].join(':');
+    }
     getReplies(item) {
-        return item.replies ?? [];
+        return item.replies?.length ? item.replies : this.emptyReplies;
     }
     getReplyCount(item) {
         return item.replyCount ?? item.replies?.length ?? 0;
@@ -767,7 +876,7 @@ class AXCommentViewComponent {
             return;
         }
         if (Array.isArray(ds)) {
-            this.items.set(ds);
+            this.items.set(ds.slice());
             return;
         }
         await this.loadRootItems(ds);
@@ -849,16 +958,9 @@ class AXCommentViewComponent {
         }
     }
     refreshItems() {
-        const current = this.items();
-        this.items.set([...current]);
-        const ds = this.datasource();
-        if (Array.isArray(ds)) {
-            this.syncingFromDatasource = true;
-            this.datasource.set([...current]);
-            queueMicrotask(() => {
-                this.syncingFromDatasource = false;
-            });
-        }
+        // Keep the parent datasource as the source of truth. Writing it back here
+        // used to drop the next array the parent pushed in.
+        this.items.set(this.items().slice());
     }
     findInTree(items, id) {
         for (const item of items) {
@@ -882,11 +984,17 @@ class AXCommentViewComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onReply: "onReply", onLikeChange: "onLikeChange", onRepliesToggle: "onRepliesToggle", onAction: "onAction" }, providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], queries: [{ propertyName: "projectedItemTemplate", first: true, predicate: AXCommentItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDatasource()) {\n  @if (isLoading()) {\n    <div class=\"ax-comment-view-skeleton\">\n      @for (row of [1, 2, 3]; track row) {\n        <div class=\"ax-comment-skeleton-row\">\n          <ax-skeleton class=\"ax-comment-skeleton-avatar\"></ax-skeleton>\n          <div class=\"ax-comment-skeleton-main\">\n            <ax-skeleton class=\"ax-comment-skeleton-title\"></ax-skeleton>\n            <ax-skeleton class=\"ax-comment-skeleton-body\"></ax-skeleton>\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"itemsTpl\"\n      [ngTemplateOutletContext]=\"{ items: items(), level: 0 }\"\n    ></ng-container>\n  }\n} @else {\n  <ng-content select=\"ax-comment-item\" />\n}\n\n<ng-template #itemsTpl let-items=\"items\" let-level=\"level\">\n  @for (item of items; track getId(item)) {\n    <ax-comment-item\n      [attr.id]=\"'comment-' + getId(item)\"\n      [item]=\"item\"\n      [replyCount]=\"getReplyCount(item)\"\n      [repliesExpanded]=\"isExpanded(item)\"\n      [loading]=\"isItemLoading(item)\"\n      [itemTemplate]=\"resolvedTemplate()\"\n      [itemContext]=\"resolvedTemplate() ? getTemplateContext(item, level) : null\"\n      (repliesExpandedChange)=\"onRepliesExpandedChange(item, $event)\"\n      (likeChange)=\"toggleLike(item, $event)\"\n      (replyClick)=\"replyTo(item, $event)\"\n      (actionClick)=\"emitAction(item, $event)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"itemsTpl\"\n        [ngTemplateOutletContext]=\"{ items: getReplies(item), level: level + 1 }\"\n      ></ng-container>\n    </ax-comment-item>\n  }\n</ng-template>\n", styles: ["@layer components{ax-comment-view{display:block}ax-comment-view>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,rgba(var(--ax-sys-color-on-surface)) 8%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-view>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--color-on-surface) 8%,transparent)}}.ax-comment-view-skeleton{display:flex;flex-direction:column}.ax-comment-skeleton-row{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-comment-skeleton-avatar{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.ax-comment-skeleton-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-comment-skeleton-title{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 32);border-radius:.25rem}.ax-comment-skeleton-body{height:calc(var(--spacing, .25rem) * 3);width:100%;max-width:var(--container-md, 28rem);border-radius:.25rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXCommentItemComponent, selector: "ax-comment-item", inputs: ["item", "replyCount", "repliesExpanded", "loading", "itemTemplate", "itemContext"], outputs: ["repliesExpandedChange", "likeChange", "replyClick", "actionClick"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onReply: "onReply", onLikeChange: "onLikeChange", onRepliesToggle: "onRepliesToggle", onAction: "onAction" }, providers: [
+            { provide: AXComponent, useExisting: AXCommentViewComponent },
+            { provide: AX_COMMENT_THREAD_HOST, useExisting: AXCommentViewComponent },
+        ], queries: [{ propertyName: "projectedItemTemplate", first: true, predicate: AXCommentItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDatasource()) {\n  @if (isLoading()) {\n    <div class=\"ax-comment-view-skeleton\">\n      @for (row of [1, 2, 3]; track row) {\n        <div class=\"ax-comment-skeleton-row\">\n          <ax-skeleton class=\"ax-comment-skeleton-avatar\"></ax-skeleton>\n          <div class=\"ax-comment-skeleton-main\">\n            <ax-skeleton class=\"ax-comment-skeleton-title\"></ax-skeleton>\n            <ax-skeleton class=\"ax-comment-skeleton-body\"></ax-skeleton>\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <ax-comment-thread [items]=\"items()\" [level]=\"0\" [itemTemplate]=\"resolvedTemplate()\" />\n  }\n} @else {\n  <ng-content select=\"ax-comment-item\" />\n}\n", styles: ["@layer components{ax-comment-view{display:block}ax-comment-view>ax-comment-thread>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,rgba(var(--ax-sys-color-on-surface)) 8%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-view>ax-comment-thread>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--color-on-surface) 8%,transparent)}}.ax-comment-view-skeleton{display:flex;flex-direction:column}.ax-comment-skeleton-row{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-comment-skeleton-avatar{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.ax-comment-skeleton-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-comment-skeleton-title{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 32);border-radius:.25rem}.ax-comment-skeleton-body{height:calc(var(--spacing, .25rem) * 3);width:100%;max-width:var(--container-md, 28rem);border-radius:.25rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXCommentThreadComponent, selector: "ax-comment-thread", inputs: ["items", "level", "itemTemplate"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCommentViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, AXCommentItemComponent, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], template: "@if (hasDatasource()) {\n  @if (isLoading()) {\n    <div class=\"ax-comment-view-skeleton\">\n      @for (row of [1, 2, 3]; track row) {\n        <div class=\"ax-comment-skeleton-row\">\n          <ax-skeleton class=\"ax-comment-skeleton-avatar\"></ax-skeleton>\n          <div class=\"ax-comment-skeleton-main\">\n            <ax-skeleton class=\"ax-comment-skeleton-title\"></ax-skeleton>\n            <ax-skeleton class=\"ax-comment-skeleton-body\"></ax-skeleton>\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"itemsTpl\"\n      [ngTemplateOutletContext]=\"{ items: items(), level: 0 }\"\n    ></ng-container>\n  }\n} @else {\n  <ng-content select=\"ax-comment-item\" />\n}\n\n<ng-template #itemsTpl let-items=\"items\" let-level=\"level\">\n  @for (item of items; track getId(item)) {\n    <ax-comment-item\n      [attr.id]=\"'comment-' + getId(item)\"\n      [item]=\"item\"\n      [replyCount]=\"getReplyCount(item)\"\n      [repliesExpanded]=\"isExpanded(item)\"\n      [loading]=\"isItemLoading(item)\"\n      [itemTemplate]=\"resolvedTemplate()\"\n      [itemContext]=\"resolvedTemplate() ? getTemplateContext(item, level) : null\"\n      (repliesExpandedChange)=\"onRepliesExpandedChange(item, $event)\"\n      (likeChange)=\"toggleLike(item, $event)\"\n      (replyClick)=\"replyTo(item, $event)\"\n      (actionClick)=\"emitAction(item, $event)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"itemsTpl\"\n        [ngTemplateOutletContext]=\"{ items: getReplies(item), level: level + 1 }\"\n      ></ng-container>\n    </ax-comment-item>\n  }\n</ng-template>\n", styles: ["@layer components{ax-comment-view{display:block}ax-comment-view>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,rgba(var(--ax-sys-color-on-surface)) 8%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-view>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--color-on-surface) 8%,transparent)}}.ax-comment-view-skeleton{display:flex;flex-direction:column}.ax-comment-skeleton-row{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-comment-skeleton-avatar{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.ax-comment-skeleton-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-comment-skeleton-title{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 32);border-radius:.25rem}.ax-comment-skeleton-body{height:calc(var(--spacing, .25rem) * 3);width:100%;max-width:var(--container-md, 28rem);border-radius:.25rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXCommentThreadComponent, AXSkeletonComponent], providers: [
+                        { provide: AXComponent, useExisting: AXCommentViewComponent },
+                        { provide: AX_COMMENT_THREAD_HOST, useExisting: AXCommentViewComponent },
+                    ], template: "@if (hasDatasource()) {\n  @if (isLoading()) {\n    <div class=\"ax-comment-view-skeleton\">\n      @for (row of [1, 2, 3]; track row) {\n        <div class=\"ax-comment-skeleton-row\">\n          <ax-skeleton class=\"ax-comment-skeleton-avatar\"></ax-skeleton>\n          <div class=\"ax-comment-skeleton-main\">\n            <ax-skeleton class=\"ax-comment-skeleton-title\"></ax-skeleton>\n            <ax-skeleton class=\"ax-comment-skeleton-body\"></ax-skeleton>\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <ax-comment-thread [items]=\"items()\" [level]=\"0\" [itemTemplate]=\"resolvedTemplate()\" />\n  }\n} @else {\n  <ng-content select=\"ax-comment-item\" />\n}\n", styles: ["@layer components{ax-comment-view{display:block}ax-comment-view>ax-comment-thread>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,rgba(var(--ax-sys-color-on-surface)) 8%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-comment-view>ax-comment-thread>ax-comment-item:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--color-on-surface) 8%,transparent)}}.ax-comment-view-skeleton{display:flex;flex-direction:column}.ax-comment-skeleton-row{display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-comment-skeleton-avatar{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px)}.ax-comment-skeleton-main{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-comment-skeleton-title{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 32);border-radius:.25rem}.ax-comment-skeleton-body{height:calc(var(--spacing, .25rem) * 3);width:100%;max-width:var(--container-md, 28rem);border-radius:.25rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }, { type: i0.Output, args: ["datasourceChange"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], onReply: [{ type: i0.Output, args: ["onReply"] }], onLikeChange: [{ type: i0.Output, args: ["onLikeChange"] }], onRepliesToggle: [{ type: i0.Output, args: ["onRepliesToggle"] }], onAction: [{ type: i0.Output, args: ["onAction"] }], projectedItemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXCommentItemTemplateDirective), { isSignal: true }] }] } });
 
 const COMPONENTS = [