@acorex/components 20.3.48 → 20.3.51

package/fesm2022/acorex-components-comment.mjs

@@ -1,14 +1,11 @@
 import { AXComponent } from '@acorex/cdk/common';
-import { isPlatformBrowser, AsyncPipe, CommonModule } from '@angular/common';
+import { isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, PLATFORM_ID, ViewEncapsulation, Component, contentChild, viewChild, input, afterNextRender, model, NgModule } from '@angular/core';
-import * as i1 from '@acorex/components/accordion';
-import { AXAccordionModule } from '@acorex/components/accordion';
+import { inject, DOCUMENT, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, input, model, afterNextRender, NgModule } from '@angular/core';
 import { AXAvatarComponent } from '@acorex/components/avatar';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { AXDecoratorIconComponent, AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXButtonModule } from '@acorex/components/button';
-import { AXCollapseModule } from '@acorex/components/collapse';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXWysiwygModule } from '@acorex/components/wysiwyg';
 
@@ -26,30 +23,23 @@ class AXCommentContainerComponent {
      * Scrolls to a specific comment reply by its ID and highlights it temporarily.
      *
      * @param id - The ID of the comment reply to scroll to
-     * @returns void
      */
     scrollToReply(id) {
-        if (isPlatformBrowser(this.platformID)) {
-            const el = this.document.querySelector(`ax-comment-item[id=${id}]`);
-            if (!el)
-                return;
-            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            const content = el?.firstElementChild?.children[1];
-            const prevBg = content.style.background;
-            content.style.borderRadius = '0.25rem';
-            content.style.transition = 'background 1s ease-in-out';
-            content.style.background = '#e2fffc';
-            setTimeout(() => {
-                content.style.background = prevBg || 'rgba(0, 0, 0, 0)';
-            }, 1000);
-        }
+        if (!isPlatformBrowser(this.platformID))
+            return;
+        const el = this.document.querySelector(`ax-comment-item[id="${id}"]`);
+        if (!el)
+            return;
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        el.classList.add('ax-state-highlight');
+        setTimeout(() => el.classList.remove('ax-state-highlight'), 1500);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentContainerComponent, isStandalone: true, selector: "ax-comment-container", providers: [{ provide: AXComponent, useExisting: AXCommentContainerComponent }], ngImport: i0, template: "<ng-content> </ng-content>\n", styles: ["ax-comment-container{width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentContainerComponent, isStandalone: true, selector: "ax-comment-container", providers: [{ provide: AXComponent, useExisting: AXCommentContainerComponent }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["ax-comment-container{display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-container', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentContainerComponent }], template: "<ng-content> </ng-content>\n", styles: ["ax-comment-container{width:100%}\n"] }]
+            args: [{ selector: 'ax-comment-container', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentContainerComponent }], styles: ["ax-comment-container{display:block;width:100%}\n"] }]
         }] });
 
 /**
@@ -58,43 +48,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * @category Components
  */
 class AXCommentItemComponent {
-    /**
-     *  @ignore
-     */
     constructor() {
-        /**
-         *  @ignore
-         */
         this.avatar = contentChild(AXAvatarComponent, ...(ngDevMode ? [{ debugName: "avatar" }] : []));
-        this.collapse = viewChild('c', ...(ngDevMode ? [{ debugName: "collapse" }] : []));
         this.replyCount = input(...(ngDevMode ? [undefined, { debugName: "replyCount" }] : []));
+        /** Two-way bindable state controlling whether nested replies are visible. */
+        this.repliesExpanded = model(false, ...(ngDevMode ? [{ debugName: "repliesExpanded" }] : []));
         afterNextRender(() => {
             this.avatar()?.size?.set(40);
         });
     }
-    toggleCollapse() {
-        this.collapse().toggle();
+    toggleReplies() {
+        this.repliesExpanded.update((v) => !v);
+    }
+    showReplies() {
+        this.repliesExpanded.set(true);
+    }
+    hideReplies() {
+        this.repliesExpanded.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "collapse", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-accordion-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-accordion-item\n          #c\n          [caption]=\"\n            ('@acorex:comment.view' | translate | async) +\n            ' ' +\n            replyCount() +\n            ' ' +\n            ((replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-accordion-item>\n      </ax-accordion-group>\n    </div>\n  }\n</div>\n", styles: [".ax-comment-items{margin-bottom:.25rem}.ax-comment-items .ax-header-container{display:flex;align-items:center;justify-content:space-between}.ax-comment-items .ax-header-container .ax-title-avatar-container{display:flex;align-items:center}.ax-comment-items .ax-header-container ax-title{font-weight:500;padding:.5rem}.ax-comment-items .ax-content-container{margin-inline-start:3rem;display:flex;flex-direction:column;font-size:.875rem;opacity:80%}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:.75rem;display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:1.5rem}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:2rem}.ax-comment-items .ax-comment-replies .ax-collapse-header-container{font-weight:500;justify-content:unset;color:rgba(var(--ax-sys-color-primary-surface))}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpanded: "repliesExpandedChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\n", styles: ["ax-comment-item{--ax-comp-comment-spacing: 1rem;--ax-comp-comment-header-gap: .5rem;--ax-comp-comment-body-indent: 3rem;--ax-comp-comment-body-font-size: .875rem;--ax-comp-comment-reply-indent: 2.5rem;--ax-comp-comment-highlight-bg: rgba(var(--ax-sys-color-primary-surface), .1);display:block;padding:.25rem;border-radius:.25rem;transition:background 1s ease-in-out}ax-comment-item:not(:last-child){margin-bottom:var(--ax-comp-comment-spacing)}ax-comment-item.ax-state-highlight{background:var(--ax-comp-comment-highlight-bg)}ax-comment-item .ax-comment-header{display:flex;align-items:center;justify-content:space-between}ax-comment-item .ax-comment-header .ax-comment-header-start{display:flex;align-items:center;gap:var(--ax-comp-comment-header-gap)}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{display:flex;align-items:baseline;gap:.5rem}ax-comment-item .ax-comment-header ax-title{font-weight:500}ax-comment-item .ax-comment-body{margin-inline-start:var(--ax-comp-comment-body-indent);font-size:var(--ax-comp-comment-body-font-size);color:rgba(var(--ax-sys-color-on-surface));padding-top:.25rem}ax-comment-item .ax-comment-actions{display:flex;align-items:center;gap:1rem;margin-top:.5rem;font-size:var(--ax-comp-comment-body-font-size)}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:var(--ax-comp-comment-reply-indent);margin-top:.5rem}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--ax-comp-comment-body-font-size);font-weight:500;color:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:.5rem}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;color:rgba(var(--ax-sys-color-primary-surface));font-weight:500;font-size:var(--ax-comp-comment-body-font-size)}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, imports: [AXAccordionModule, AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-accordion-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-accordion-item\n          #c\n          [caption]=\"\n            ('@acorex:comment.view' | translate | async) +\n            ' ' +\n            replyCount() +\n            ' ' +\n            ((replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-accordion-item>\n      </ax-accordion-group>\n    </div>\n  }\n</div>\n", styles: [".ax-comment-items{margin-bottom:.25rem}.ax-comment-items .ax-header-container{display:flex;align-items:center;justify-content:space-between}.ax-comment-items .ax-header-container .ax-title-avatar-container{display:flex;align-items:center}.ax-comment-items .ax-header-container ax-title{font-weight:500;padding:.5rem}.ax-comment-items .ax-content-container{margin-inline-start:3rem;display:flex;flex-direction:column;font-size:.875rem;opacity:80%}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:.75rem;display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:1.5rem}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:2rem}.ax-comment-items .ax-comment-replies .ax-collapse-header-container{font-weight:500;justify-content:unset;color:rgba(var(--ax-sys-color-primary-surface))}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}\n"] }]
+            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\n", styles: ["ax-comment-item{--ax-comp-comment-spacing: 1rem;--ax-comp-comment-header-gap: .5rem;--ax-comp-comment-body-indent: 3rem;--ax-comp-comment-body-font-size: .875rem;--ax-comp-comment-reply-indent: 2.5rem;--ax-comp-comment-highlight-bg: rgba(var(--ax-sys-color-primary-surface), .1);display:block;padding:.25rem;border-radius:.25rem;transition:background 1s ease-in-out}ax-comment-item:not(:last-child){margin-bottom:var(--ax-comp-comment-spacing)}ax-comment-item.ax-state-highlight{background:var(--ax-comp-comment-highlight-bg)}ax-comment-item .ax-comment-header{display:flex;align-items:center;justify-content:space-between}ax-comment-item .ax-comment-header .ax-comment-header-start{display:flex;align-items:center;gap:var(--ax-comp-comment-header-gap)}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{display:flex;align-items:baseline;gap:.5rem}ax-comment-item .ax-comment-header ax-title{font-weight:500}ax-comment-item .ax-comment-body{margin-inline-start:var(--ax-comp-comment-body-indent);font-size:var(--ax-comp-comment-body-font-size);color:rgba(var(--ax-sys-color-on-surface));padding-top:.25rem}ax-comment-item .ax-comment-actions{display:flex;align-items:center;gap:1rem;margin-top:.5rem;font-size:var(--ax-comp-comment-body-font-size)}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:var(--ax-comp-comment-reply-indent);margin-top:.5rem}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--ax-comp-comment-body-font-size);font-weight:500;color:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:.5rem}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;color:rgba(var(--ax-sys-color-primary-surface));font-weight:500;font-size:var(--ax-comp-comment-body-font-size)}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
- * A component for displaying and managing date on a comment.
+ * A component for displaying date on a comment.
  *
  * @category Components
  */
 class AXCommentDateComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-date', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], template: "<ng-content></ng-content>\n", styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"] }]
+            args: [{ selector: 'ax-comment-date', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"] }]
         }] });
 
 /**
@@ -104,20 +95,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  */
 class AXCommentLikeComponent {
     constructor() {
-        /**
-         * Indicates whether the comment is liked.
-         */
         this.like = model.required(...(ngDevMode ? [{ debugName: "like" }] : []));
     }
-    changeState() {
+    toggleLike() {
         this.like.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { like: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", styles: [".ax-comment-like-container{display:flex;align-items:center;gap:.25rem}.ax-comment-like-container ax-icon{font-size:.938rem}.ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}.ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}.ax-comment-like-container.ax-state-liked ax-text{color:rgba(var(--ax-sys-color-danger-500))}\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { like: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\n</div>\n", styles: ["ax-comment-like .ax-comment-like-container{display:flex;align-items:center;gap:.25rem;transition:color .2s ease}ax-comment-like .ax-comment-like-container ax-icon{font-size:.938rem;transition:transform .2s ease}ax-comment-like .ax-comment-like-container:hover:not(.ax-state-liked){color:rgba(var(--ax-sys-color-danger-400))}ax-comment-like .ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}ax-comment-like .ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}\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: "20.3.3", ngImport: i0, type: AXCommentLikeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-like', imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", styles: [".ax-comment-like-container{display:flex;align-items:center;gap:.25rem}.ax-comment-like-container ax-icon{font-size:.938rem}.ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}.ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}.ax-comment-like-container.ax-state-liked ax-text{color:rgba(var(--ax-sys-color-danger-500))}\n"] }]
+            args: [{ selector: 'ax-comment-like', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\n</div>\n", styles: ["ax-comment-like .ax-comment-like-container{display:flex;align-items:center;gap:.25rem;transition:color .2s ease}ax-comment-like .ax-comment-like-container ax-icon{font-size:.938rem;transition:transform .2s ease}ax-comment-like .ax-comment-like-container:hover:not(.ax-state-liked){color:rgba(var(--ax-sys-color-danger-400))}ax-comment-like .ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}ax-comment-like .ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}\n"] }]
         }] });
 
 /**
@@ -127,45 +115,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  */
 class AXMenuOptionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXMenuOptionsComponent, isStandalone: true, selector: "ax-comment-menu-options", providers: [{ provide: AXComponent, useExisting: AXMenuOptionsComponent }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXMenuOptionsComponent, isStandalone: true, selector: "ax-comment-menu-options", providers: [{ provide: AXComponent, useExisting: AXMenuOptionsComponent }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-menu-options', providers: [{ provide: AXComponent, useExisting: AXMenuOptionsComponent }], template: "<ng-content></ng-content>\n" }]
+            args: [{
+                    selector: 'ax-comment-menu-options',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: AXComponent, useExisting: AXMenuOptionsComponent }],
+                }]
         }] });
 
+/**
+ * A component for displaying "show more replies" action on a comment.
+ *
+ * @category Components
+ */
 class AXCommentReplyMoreComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentReplyMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentReplyMoreComponent, isStandalone: true, selector: "ax-comment-reply-more", providers: [{ provide: AXComponent, useExisting: AXCommentReplyMoreComponent }], ngImport: i0, template: "<ax-text><ng-content></ng-content></ax-text>\n", dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentReplyMoreComponent, isStandalone: true, selector: "ax-comment-reply-more", providers: [{ provide: AXComponent, useExisting: AXCommentReplyMoreComponent }], ngImport: i0, template: '<ax-text><ng-content /></ax-text>', isInline: true, dependencies: [{ 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: "20.3.3", ngImport: i0, type: AXCommentReplyMoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-reply-more', imports: [AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentReplyMoreComponent }], template: "<ax-text><ng-content></ng-content></ax-text>\n" }]
+            args: [{
+                    selector: 'ax-comment-reply-more',
+                    template: '<ax-text><ng-content /></ax-text>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXDecoratorGenericComponent],
+                    providers: [{ provide: AXComponent, useExisting: AXCommentReplyMoreComponent }],
+                }]
         }] });
 
+/**
+ * A component for displaying the reply action text on a comment.
+ *
+ * @category Components
+ */
 class AXCommentReplyTextComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentReplyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentReplyTextComponent, isStandalone: true, selector: "ax-comment-reply-text", providers: [{ provide: AXComponent, useExisting: AXCommentReplyTextComponent }], ngImport: i0, template: "<ax-text>Reply</ax-text>\n", dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentReplyTextComponent, isStandalone: true, selector: "ax-comment-reply-text", providers: [{ provide: AXComponent, useExisting: AXCommentReplyTextComponent }], ngImport: i0, template: `<ax-text>{{ '@acorex:comment.reply' | translate | async }}</ax-text>`, isInline: true, dependencies: [{ 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: "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: "20.3.3", ngImport: i0, type: AXCommentReplyTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-reply-text', imports: [AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentReplyTextComponent }], template: "<ax-text>Reply</ax-text>\n" }]
+            args: [{
+                    selector: 'ax-comment-reply-text',
+                    template: `<ax-text>{{ '@acorex:comment.reply' | translate | async }}</ax-text>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXDecoratorGenericComponent, AXTranslatorPipe, AsyncPipe],
+                    providers: [{ provide: AXComponent, useExisting: AXCommentReplyTextComponent }],
+                }]
         }] });
 
 /**
  * A component for viewing comments with their details.
+ *
  * @category Components
  */
 class AXCommentViewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], ngImport: i0, template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", styles: ["ax-comment-view{border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);display:block;padding:1.5rem;margin-bottom:1rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], ngImport: i0, template: '<ng-content select="ax-comment-item" />', isInline: true, styles: ["ax-comment-view{display:block;margin-block-end:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", styles: ["ax-comment-view{border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);display:block;padding:1.5rem;margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'ax-comment-view', template: '<ng-content select="ax-comment-item" />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentViewComponent }], styles: ["ax-comment-view{display:block;margin-block-end:1rem}\n"] }]
         }] });
 
-const COMPONENT = [
+const COMPONENTS = [
     AXCommentViewComponent,
     AXCommentContainerComponent,
     AXCommentItemComponent,
@@ -175,24 +194,10 @@ const COMPONENT = [
     AXCommentDateComponent,
     AXCommentReplyMoreComponent,
 ];
-const MODULES = [
-    AXDecoratorModule,
-    AXWysiwygModule,
-    AXCollapseModule,
-    AXButtonModule,
-    AXTextAreaModule,
-    AXTranslationModule,
-    CommonModule,
-];
+const MODULES = [AXDecoratorModule, AXWysiwygModule, AXButtonModule, AXTextAreaModule, AXTranslationModule];
 class AXCommentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXCommentModule, imports: [AXDecoratorModule,
-            AXWysiwygModule,
-            AXCollapseModule,
-            AXButtonModule,
-            AXTextAreaModule,
-            AXTranslationModule,
-            CommonModule, AXCommentViewComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXCommentModule, imports: [AXDecoratorModule, AXWysiwygModule, AXButtonModule, AXTextAreaModule, AXTranslationModule, AXCommentViewComponent,
             AXCommentContainerComponent,
             AXCommentItemComponent,
             AXCommentLikeComponent,
@@ -207,17 +212,15 @@ class AXCommentModule {
             AXCommentReplyTextComponent,
             AXCommentDateComponent,
             AXCommentReplyMoreComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentModule, imports: [MODULES, AXCommentItemComponent,
-            AXCommentLikeComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentModule, imports: [MODULES, AXCommentLikeComponent,
             AXCommentReplyTextComponent,
             AXCommentReplyMoreComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...MODULES, ...COMPONENT],
-                    exports: [...COMPONENT],
-                    providers: [],
+                    imports: [...MODULES, ...COMPONENTS],
+                    exports: [...COMPONENTS],
                 }]
         }] });