@rolatech/angular-comment 17.1.0

package/fesm2022/rolatech-angular-comment.mjs

@@ -0,0 +1,581 @@
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Injectable, Component, Input, Output } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { AngularCommonModule, TimePipe } from '@rolatech/angular-common';
+import * as i7 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AuthService, AuthUserService } from '@rolatech/angular-auth';
+import { BaseService } from '@rolatech/angular-services';
+import _ from 'lodash';
+import { map, switchMap, of } from 'rxjs';
+import * as i6 from '@angular/cdk/text-field';
+import * as i3 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+
+class CommentService extends BaseService {
+    constructor() {
+        super(...arguments);
+        this.authService = inject(AuthService);
+        this.authUserService = inject(AuthUserService);
+        this.onCommentLoading = new EventEmitter();
+        this.onComment = new EventEmitter();
+        this.onCommentReply = new EventEmitter();
+    }
+    init() {
+        this.endpoint = 'comments';
+        super.init();
+    }
+    findComments(options) {
+        options = {
+            sort: 'createdAt desc',
+        };
+        return this.http.get(`${this.actionUrl}`, { params: options }).pipe(map((res) => {
+            const userIds = _.uniq(_.map(res.data, 'userId')); // [12, 14, 16, 18]
+            this.findCommentsUser(userIds);
+            return res;
+        }));
+    }
+    findCommentsByItemId(itemId) {
+        const options = {
+            sort: 'createdAt desc',
+            filter: `itemId:${itemId}`,
+        };
+        return this.http.get(`${this.actionUrl}`, { params: options }).pipe(switchMap((comments) => {
+            const userIds = _.uniq(_.map(comments.data, 'userId')); // [12, 14, 16, 18]
+            return this.findCommentsUser(userIds).pipe(map((users) => {
+                comments.data?.forEach((item) => {
+                    const matchingUser = _.find(users.data, { id: item.userId });
+                    item.user = matchingUser;
+                });
+                return comments;
+            }));
+        }), switchMap((comments) => {
+            const ids = _.uniq(_.map(comments.data, 'id')); // [12, 14, 16, 18]
+            return this.authService.introspect().pipe(switchMap((res) => {
+                if (res.authenticated) {
+                    return this.findMyCommentsThumbs(ids).pipe(map((thumbs) => {
+                        comments.data?.forEach((item) => {
+                            const matchingComment = _.find(thumbs.data, (obj) => _.get(obj, `comment.id`) === item.id);
+                            item.like = matchingComment?.status === 'UP';
+                            item.dislike = matchingComment?.status === 'DOWN';
+                        });
+                        return comments;
+                    }));
+                }
+                else {
+                    return of(comments);
+                }
+            }));
+        }));
+    }
+    createComment(data) {
+        return this.http
+            .post(`${this.actionUrl}`, data, {
+            withCredentials: true,
+        })
+            .pipe(map((res) => {
+            res.data.repliesCount = 0;
+            this.getUserInfo(res.data);
+            return res.data;
+        }));
+    }
+    countCommnentsByItemId(itemId) {
+        return this.http.get(`${this.actionUrl}/count/by`, { params: { itemId } });
+    }
+    countRepliesByCommentId(commentId) {
+        return this.http.get(`${this.actionUrl}/replies/count/by`, { params: { commentId } });
+    }
+    reply(id, data) {
+        return this.http
+            .post(`${this.actionUrl}/${id}/replies`, data, {
+            withCredentials: true,
+        })
+            .pipe(map((res) => {
+            this.getReplyUserInfo(res.data);
+            return res.data;
+        }));
+    }
+    findRepliesByCommentId(commentId) {
+        return this.http.get(`${this.actionUrl}/${commentId}/replies`).pipe(switchMap((replies) => {
+            const userIds = _.uniq(_.map(replies.data, 'senderId')); // [12, 14, 16, 18]
+            return this.findRepliesUser(userIds).pipe(map((users) => {
+                replies.data?.forEach((item) => {
+                    const matchingUser = _.find(users.data, { id: item.senderId });
+                    item.user = matchingUser;
+                });
+                return replies;
+            }));
+        }), switchMap((replies) => {
+            const ids = _.uniq(_.map(replies.data, 'id'));
+            return this.authService.introspect().pipe(switchMap((res) => {
+                if (res.authenticated) {
+                    return this.findMyRepliesThumbs(ids).pipe(map((thumbs) => {
+                        replies.data?.forEach((reply) => {
+                            const matchingReply = _.find(thumbs.data, (obj) => _.get(obj, `reply.id`) === reply.id);
+                            reply.like = matchingReply?.status === 'UP';
+                            reply.dislike = matchingReply?.status === 'DOWN';
+                        });
+                        return replies;
+                    }));
+                }
+                else {
+                    return of(replies);
+                }
+            }));
+        }));
+    }
+    commentThumbsUp(commentId) {
+        return this.http.post(`${this.actionUrl}/${commentId}/thumbs/up`, {}, {
+            withCredentials: true,
+        });
+    }
+    commentThumbsDown(commentId) {
+        return this.http.post(`${this.actionUrl}/${commentId}/thumbs/down`, {}, {
+            withCredentials: true,
+        });
+    }
+    deleteCommentThumbsUp(commentId) {
+        return this.http.delete(`${this.actionUrl}/${commentId}/thumbs/up`, {
+            withCredentials: true,
+        });
+    }
+    deleteCommentThumbsDown(commentId) {
+        return this.http.delete(`${this.actionUrl}/${commentId}/thumbs/down`, {
+            withCredentials: true,
+        });
+    }
+    replyThumbsUp(replyId) {
+        return this.http.post(`${this.actionUrl}/replies/${replyId}/thumbs/up`, {}, {
+            withCredentials: true,
+        });
+    }
+    replyThumbsDown(replyId) {
+        return this.http.post(`${this.actionUrl}/replies/${replyId}/thumbs/down`, {}, {
+            withCredentials: true,
+        });
+    }
+    deleteReplyThumbsUp(replyId) {
+        return this.http.delete(`${this.actionUrl}/${replyId}/thumbs/up`, {
+            withCredentials: true,
+        });
+    }
+    deleteReplyThumbsDown(replyId) {
+        return this.http.delete(`${this.actionUrl}/${replyId}/thumbs/down`, {
+            withCredentials: true,
+        });
+    }
+    getReplyUserInfo(reply) {
+        this.authUserService.getPublicUserInfo(reply.senderId).subscribe({
+            next: (res) => {
+                reply.user = res;
+            },
+        });
+    }
+    getUserInfo(comment) {
+        this.authUserService.getPublicUserInfo(comment.userId).subscribe({
+            next: (res) => {
+                comment.user = res;
+            },
+        });
+    }
+    findRepliesUser(ids) {
+        return this.authUserService.findPublicInfoByIds(ids);
+    }
+    findCommentsUser(ids) {
+        return this.authUserService.findPublicInfoByIds(ids);
+    }
+    findMyCommentsThumbs(ids) {
+        const params = { ids: ids.join(',') };
+        return this.http.get(`${this.actionUrl}/thumbs/me`, {
+            params: params,
+            withCredentials: true,
+        });
+    }
+    findMyRepliesThumbs(ids) {
+        const params = { ids: ids.join(',') };
+        return this.http.get(`${this.actionUrl}/replies/thumbs/me`, {
+            params: params,
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class CommentActionComponent {
+    constructor() {
+        this.commentService = inject(CommentService);
+        this.placeholder = '请输入回复内容';
+        this.reply = new EventEmitter();
+        this.thumbsUp = new EventEmitter();
+        this.thumbsDown = new EventEmitter();
+        this.show = false;
+        this.content = '';
+        this.loading = false;
+    }
+    onCancel() {
+        this.show = false;
+        this.content = '';
+    }
+    onReply() {
+        this.loading = true;
+        this.reply.emit(this.content);
+        this.commentService.onCommentLoading.subscribe({
+            next: (res) => {
+                this.loading = res;
+                this.show = false;
+                this.content = '';
+            },
+        });
+    }
+    onThumbsUp() {
+        this.thumbsUp.emit();
+    }
+    onThumbsDown() {
+        this.thumbsDown.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: CommentActionComponent, isStandalone: true, selector: "rolatech-comment-action", inputs: { placeholder: "placeholder", data: "data" }, outputs: { reply: "reply", thumbsUp: "thumbsUp", thumbsDown: "thumbsDown" }, ngImport: i0, template: "<div>\n  <div class=\"flex items-center -ml-2\">\n    <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsUp()\">\n      <mat-icon [color]=\"data.like ? 'primary' : ''\">thumb_up</mat-icon>\n    </button>\n    @if (data.thumbsUpCount > 0) {\n      <span class=\"text-sm opacity-80\">{{ data.thumbsUpCount }}</span>\n    }\n    <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsDown()\">\n      <mat-icon [color]=\"data.dislike ? 'primary' : ''\">thumb_down</mat-icon>\n    </button>\n    @if (data.thumbsDownCount > 0) {\n      <span class=\"text-sm opacity-80\">{{ data.thumbsDownCount }}</span>\n    }\n\n    <button mat-button (click)=\"show = true\" class=\"w-8 h-8\">\u56DE\u590D</button>\n  </div>\n  <div>\n    @if (loading) {\n      <div class=\"flex items-center justify-center h-20\">\n        <mat-spinner diameter=\"32\"></mat-spinner>\n      </div>\n    } @else {\n      @if (show) {\n        <mat-form-field>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"8\"\n            [placeholder]=\"placeholder\"\n            [(ngModel)]=\"content\"\n            (focus)=\"show = true\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex justify-end items-center gap-2 pr-2\">\n          <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n          <button mat-flat-button color=\"primary\" (click)=\"onReply()\">\n            <span class=\"text-white\">\u56DE\u590D</span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-comment-action', standalone: true, imports: [AngularCommonModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule], template: "<div>\n  <div class=\"flex items-center -ml-2\">\n    <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsUp()\">\n      <mat-icon [color]=\"data.like ? 'primary' : ''\">thumb_up</mat-icon>\n    </button>\n    @if (data.thumbsUpCount > 0) {\n      <span class=\"text-sm opacity-80\">{{ data.thumbsUpCount }}</span>\n    }\n    <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsDown()\">\n      <mat-icon [color]=\"data.dislike ? 'primary' : ''\">thumb_down</mat-icon>\n    </button>\n    @if (data.thumbsDownCount > 0) {\n      <span class=\"text-sm opacity-80\">{{ data.thumbsDownCount }}</span>\n    }\n\n    <button mat-button (click)=\"show = true\" class=\"w-8 h-8\">\u56DE\u590D</button>\n  </div>\n  <div>\n    @if (loading) {\n      <div class=\"flex items-center justify-center h-20\">\n        <mat-spinner diameter=\"32\"></mat-spinner>\n      </div>\n    } @else {\n      @if (show) {\n        <mat-form-field>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            #autosize=\"cdkTextareaAutosize\"\n            cdkAutosizeMinRows=\"1\"\n            cdkAutosizeMaxRows=\"8\"\n            [placeholder]=\"placeholder\"\n            [(ngModel)]=\"content\"\n            (focus)=\"show = true\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"flex justify-end items-center gap-2 pr-2\">\n          <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n          <button mat-flat-button color=\"primary\" (click)=\"onReply()\">\n            <span class=\"text-white\">\u56DE\u590D</span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], reply: [{
+                type: Output
+            }], thumbsUp: [{
+                type: Output
+            }], thumbsDown: [{
+                type: Output
+            }] } });
+
+class ReplyItemComponent {
+    constructor() {
+        this.commentService = inject(CommentService);
+        this.commentId = '';
+        this.replied = new EventEmitter();
+        this.show = false;
+    }
+    onReply(content) {
+        const data = {
+            replyId: this.reply.id,
+            content,
+        };
+        this.commentService.reply(this.commentId, data).subscribe({
+            next: (res) => {
+                this.commentService.onCommentLoading.emit(false);
+                this.replied.emit(res);
+            },
+            error: (error) => {
+                this.commentService.onCommentLoading.emit(false);
+                console.log(error);
+            },
+        });
+    }
+    onThumbsUp() {
+        this.commentService.replyThumbsUp(this.reply.id).subscribe({
+            next: (res) => {
+                this.reply.thumbsUpCount = res.data.thumbsUpCount;
+                this.reply.thumbsDownCount = res.data.thumbsDownCount;
+                this.reply.like = true;
+                this.reply.dislike = false;
+            },
+        });
+    }
+    onThumbsDown() {
+        this.commentService.replyThumbsDown(this.reply.id).subscribe({
+            next: (res) => {
+                this.reply.thumbsUpCount = res.data.thumbsUpCount;
+                this.reply.thumbsDownCount = res.data.thumbsDownCount;
+                this.reply.like = false;
+                this.reply.dislike = true;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ReplyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: ReplyItemComponent, isStandalone: true, selector: "rolatech-reply-item", inputs: { reply: "reply", commentId: "commentId" }, outputs: { replied: "replied" }, ngImport: i0, template: "<div class=\"block w-full\">\n  @if (reply) {\n    <div class=\"flex group\">\n      <div class=\"bg-orange-600 min-w-[28px] min-h-[28px] h-fit mr-3 rounded-full\">\n        @if (reply.user && reply.user.avatar) {\n          <img class=\"w-7 h-7 rounded-full\" [src]=\"reply.user.avatar\" />\n        }\n      </div>\n      <div class=\"flex flex-col w-full\">\n        <a class=\"mb-0.5\">\n          @if (reply.user) {\n            <span class=\"text-md font-semibold mr-1\">&#64;{{ reply.user.username }}</span>\n          }\n          <span class=\"text-sm opacity-70\">{{ reply.createdAt | time }}</span>\n        </a>\n        <div [innerText]=\"reply.content\"></div>\n        <rolatech-comment-action\n          (reply)=\"onReply($event)\"\n          [data]=\"reply\"\n          (thumbsUp)=\"onThumbsUp()\"\n          (thumbsDown)=\"onThumbsDown()\"\n        ></rolatech-comment-action>\n      </div>\n      <div class=\"min-w-10\">\n        <button\n          class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n          [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n          [matMenuTriggerFor]=\"actionMenu\"\n          #memnu=\"matMenuTrigger\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n  <button mat-menu-item>\n    <mat-icon>flag</mat-icon>\n    <span>\u4E3E\u62A5</span>\n  </button>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CommentActionComponent, selector: "rolatech-comment-action", inputs: ["placeholder", "data"], outputs: ["reply", "thumbsUp", "thumbsDown"] }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ReplyItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-reply-item', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, CommentActionComponent, TimePipe, MatMenuModule], template: "<div class=\"block w-full\">\n  @if (reply) {\n    <div class=\"flex group\">\n      <div class=\"bg-orange-600 min-w-[28px] min-h-[28px] h-fit mr-3 rounded-full\">\n        @if (reply.user && reply.user.avatar) {\n          <img class=\"w-7 h-7 rounded-full\" [src]=\"reply.user.avatar\" />\n        }\n      </div>\n      <div class=\"flex flex-col w-full\">\n        <a class=\"mb-0.5\">\n          @if (reply.user) {\n            <span class=\"text-md font-semibold mr-1\">&#64;{{ reply.user.username }}</span>\n          }\n          <span class=\"text-sm opacity-70\">{{ reply.createdAt | time }}</span>\n        </a>\n        <div [innerText]=\"reply.content\"></div>\n        <rolatech-comment-action\n          (reply)=\"onReply($event)\"\n          [data]=\"reply\"\n          (thumbsUp)=\"onThumbsUp()\"\n          (thumbsDown)=\"onThumbsDown()\"\n        ></rolatech-comment-action>\n      </div>\n      <div class=\"min-w-10\">\n        <button\n          class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n          [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n          [matMenuTriggerFor]=\"actionMenu\"\n          #memnu=\"matMenuTrigger\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n  <button mat-menu-item>\n    <mat-icon>flag</mat-icon>\n    <span>\u4E3E\u62A5</span>\n  </button>\n</mat-menu>\n" }]
+        }], propDecorators: { reply: [{
+                type: Input
+            }], commentId: [{
+                type: Input
+            }], replied: [{
+                type: Output
+            }] } });
+
+class CommentRepliesComponent {
+    constructor() {
+        this.commentService = inject(CommentService);
+        this.total = 0;
+        this.replies = [];
+        this.commentId = '';
+        this.replied = new EventEmitter();
+        this.fetch = new EventEmitter();
+        this.expand = false;
+        this.loading = false;
+        this.fetched = false;
+    }
+    onFetch() {
+        this.expand = !this.expand;
+        if (!this.fetched) {
+            this.fetched = true;
+            this.fetch.emit(this.commentId);
+        }
+    }
+    onItemReplied(reply) {
+        this.total++;
+        this.replies.push(reply);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: CommentRepliesComponent, isStandalone: true, selector: "rolatech-comment-replies", inputs: { total: "total", replies: "replies", commentId: "commentId" }, outputs: { replied: "replied", fetch: "fetch" }, ngImport: i0, template: "<div class=\"block ml-14\">\n  @if (total > 0) {\n    <div>\n      <button class=\"inline-flex items-center rounded-lg hover:bg-orange-200 py-1 -ml-1\" (click)=\"onFetch()\">\n        <mat-icon color=\"primary\">{{ expand ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>\n        <span class=\"mr-2 text-sm text-orange-500\">\u56DE\u590D({{ total || replies.length }})</span>\n      </button>\n      <!-- <div class=\"less-button\">\n        <button (click)=\"expand = false\">222</button>\n      </div> -->\n    </div>\n  }\n  @if (loading) {\n    <div class=\"flex items-center justify-center h-20\">\n      <mat-spinner diameter=\"32\"></mat-spinner>\n    </div>\n  }\n\n  @if (expand) {\n    @for (item of replies; track $index) {\n      <rolatech-reply-item [commentId]=\"commentId\" [reply]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ReplyItemComponent, selector: "rolatech-reply-item", inputs: ["reply", "commentId"], outputs: ["replied"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentRepliesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-comment-replies', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, ReplyItemComponent], template: "<div class=\"block ml-14\">\n  @if (total > 0) {\n    <div>\n      <button class=\"inline-flex items-center rounded-lg hover:bg-orange-200 py-1 -ml-1\" (click)=\"onFetch()\">\n        <mat-icon color=\"primary\">{{ expand ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>\n        <span class=\"mr-2 text-sm text-orange-500\">\u56DE\u590D({{ total || replies.length }})</span>\n      </button>\n      <!-- <div class=\"less-button\">\n        <button (click)=\"expand = false\">222</button>\n      </div> -->\n    </div>\n  }\n  @if (loading) {\n    <div class=\"flex items-center justify-center h-20\">\n      <mat-spinner diameter=\"32\"></mat-spinner>\n    </div>\n  }\n\n  @if (expand) {\n    @for (item of replies; track $index) {\n      <rolatech-reply-item [commentId]=\"commentId\" [reply]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { total: [{
+                type: Input
+            }], replies: [{
+                type: Input
+            }], commentId: [{
+                type: Input
+            }], replied: [{
+                type: Output
+            }], fetch: [{
+                type: Output
+            }] } });
+
+class CommentItemComponent {
+    constructor() {
+        this.commentService = inject(CommentService);
+        this.show = false;
+        this.loading = false;
+        this.replies = [];
+    }
+    ngOnInit() {
+        // this.countRepliesByCommentId(this.comment.id!);
+    }
+    onFocus(event) {
+        this.show = true;
+    }
+    onCommentReply(content) {
+        const data = {
+            content,
+        };
+        const id = this.comment.id;
+        this.commentService.reply(id, data).subscribe({
+            next: (res) => {
+                this.comment.repliesCount++;
+                this.comment.replies = this.comment.replies ? this.comment.replies : [];
+                this.comment.replies.push(res);
+                this.commentService.onCommentLoading.emit(false);
+                this.commentService.onCommentReply.emit(res);
+            },
+            error: (error) => {
+                this.commentService.onCommentLoading.emit(false);
+            },
+        });
+    }
+    countRepliesByCommentId(commentId) {
+        this.commentService.countRepliesByCommentId(commentId).subscribe({
+            next: (res) => {
+                this.comment.repliesCount = res.data;
+            },
+            error: (error) => { },
+        });
+    }
+    onFetchReplies(commentId) {
+        this.loading = true;
+        this.commentService.findRepliesByCommentId(commentId).subscribe({
+            next: (res) => {
+                this.comment.replies = res.data;
+            },
+            error: (error) => {
+                this.loading = false;
+            },
+        });
+    }
+    onThumbsUp() {
+        this.commentService.commentThumbsUp(this.comment.id).subscribe({
+            next: (res) => {
+                this.comment.thumbsUpCount = res.data.thumbsUpCount;
+                this.comment.thumbsDownCount = res.data.thumbsDownCount;
+                this.comment.like = true;
+                this.comment.dislike = false;
+            },
+        });
+    }
+    onThumbsDown() {
+        this.commentService.commentThumbsDown(this.comment.id).subscribe({
+            next: (res) => {
+                this.comment.thumbsUpCount = res.data.thumbsUpCount;
+                this.comment.thumbsDownCount = res.data.thumbsDownCount;
+                this.comment.like = false;
+                this.comment.dislike = true;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: CommentItemComponent, isStandalone: true, selector: "rolatech-comment-item", inputs: { comment: "comment" }, ngImport: i0, template: "<div class=\"block w-full\">\n  @if (comment) {\n    <div class=\"flex group\">\n      <div class=\"bg-orange-600 min-w-10 min-h-10 mr-4 h-fit rounded-full\">\n        @if (comment.user && comment.user.avatar) {\n          <img class=\"w-10 h-10 rounded-full\" [src]=\"comment.user.avatar\" />\n        }\n      </div>\n      <div class=\"flex flex-col w-full\">\n        <a class=\"mb-0.5\">\n          @if (comment.user) {\n            <span class=\"text-md font-semibold mr-1\">&#64;{{ comment.user.username }}</span>\n          }\n          <span class=\"text-sm opacity-70\">{{ comment.createdAt | time }}</span>\n        </a>\n\n        <div [innerText]=\"comment.content\"></div>\n        <rolatech-comment-action\n          (reply)=\"onCommentReply($event)\"\n          [data]=\"comment\"\n          (thumbsUp)=\"onThumbsUp()\"\n          (thumbsDown)=\"onThumbsDown()\"\n        ></rolatech-comment-action>\n      </div>\n      <div class=\"min-w-9\">\n        <button\n          class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n          [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n          [matMenuTriggerFor]=\"actionMenu\"\n          #memnu=\"matMenuTrigger\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div>\n      <rolatech-comment-replies\n        [total]=\"comment.repliesCount\"\n        [commentId]=\"comment.id!\"\n        [replies]=\"comment.replies!\"\n        (fetch)=\"onFetchReplies($event)\"\n      ></rolatech-comment-replies>\n    </div>\n  }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n  <button mat-menu-item>\n    <mat-icon>flag</mat-icon>\n    <span>\u4E3E\u62A5</span>\n  </button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: CommentRepliesComponent, selector: "rolatech-comment-replies", inputs: ["total", "replies", "commentId"], outputs: ["replied", "fetch"] }, { kind: "component", type: CommentActionComponent, selector: "rolatech-comment-action", inputs: ["placeholder", "data"], outputs: ["reply", "thumbsUp", "thumbsDown"] }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-comment-item', standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        CommentRepliesComponent,
+                        CommentActionComponent,
+                        TimePipe,
+                        MatMenuModule,
+                    ], template: "<div class=\"block w-full\">\n  @if (comment) {\n    <div class=\"flex group\">\n      <div class=\"bg-orange-600 min-w-10 min-h-10 mr-4 h-fit rounded-full\">\n        @if (comment.user && comment.user.avatar) {\n          <img class=\"w-10 h-10 rounded-full\" [src]=\"comment.user.avatar\" />\n        }\n      </div>\n      <div class=\"flex flex-col w-full\">\n        <a class=\"mb-0.5\">\n          @if (comment.user) {\n            <span class=\"text-md font-semibold mr-1\">&#64;{{ comment.user.username }}</span>\n          }\n          <span class=\"text-sm opacity-70\">{{ comment.createdAt | time }}</span>\n        </a>\n\n        <div [innerText]=\"comment.content\"></div>\n        <rolatech-comment-action\n          (reply)=\"onCommentReply($event)\"\n          [data]=\"comment\"\n          (thumbsUp)=\"onThumbsUp()\"\n          (thumbsDown)=\"onThumbsDown()\"\n        ></rolatech-comment-action>\n      </div>\n      <div class=\"min-w-9\">\n        <button\n          class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n          [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n          [matMenuTriggerFor]=\"actionMenu\"\n          #memnu=\"matMenuTrigger\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div>\n      <rolatech-comment-replies\n        [total]=\"comment.repliesCount\"\n        [commentId]=\"comment.id!\"\n        [replies]=\"comment.replies!\"\n        (fetch)=\"onFetchReplies($event)\"\n      ></rolatech-comment-replies>\n    </div>\n  }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n  <button mat-menu-item>\n    <mat-icon>flag</mat-icon>\n    <span>\u4E3E\u62A5</span>\n  </button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { comment: [{
+                type: Input
+            }] } });
+
+class CommentsHeaderComponent {
+    constructor() {
+        this.commentService = inject(CommentService);
+        this.comments = [];
+        this.placeholder = '请输入评论内容';
+        this.total = 0;
+        this.comment = new EventEmitter();
+        this.content = '';
+        this.show = false;
+        this.loading = false;
+    }
+    ngOnInit() {
+        this.commentService.onComment.subscribe({
+            next: (res) => {
+                this.total++;
+            },
+        });
+    }
+    onFocus(event) {
+        this.show = true;
+    }
+    onCancel() {
+        this.show = false;
+        this.content = '';
+    }
+    onComment() {
+        this.loading = true;
+        this.comment.emit(this.content);
+        this.commentService.onCommentLoading.subscribe({
+            next: (res) => {
+                this.loading = res;
+                this.show = false;
+                this.content = '';
+            },
+        });
+    }
+    fetchByComments() { }
+    fetchByReplies() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: CommentsHeaderComponent, isStandalone: true, selector: "rolatech-comments-header", inputs: { comments: "comments", placeholder: "placeholder", total: "total" }, outputs: { comment: "comment" }, ngImport: i0, template: "<div class=\"my-2\">\n  <div class=\"flex items-center gap-3 py-2\">\n    <span class=\"text-lg font-bold\">\u8BC4\u8BBA({{ total }})</span>\n    <button mat-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon>sort</mat-icon>\n      <span>\u6392\u5E8F</span>\n    </button>\n  </div>\n\n  @if (loading) {\n    <div class=\"flex items-center justify-center h-20\">\n      <mat-spinner diameter=\"32\"></mat-spinner>\n    </div>\n  } @else {\n    <div class=\"mr-3\">\n      <mat-form-field>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          cdkAutosizeMaxRows=\"8\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"content\"\n          (focus)=\"onFocus($event)\"\n        ></textarea>\n      </mat-form-field>\n      @if (show) {\n        <div class=\"flex justify-end items-center gap-2 pr-2\">\n          <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n          <button mat-flat-button color=\"primary\" (click)=\"onComment()\">\n            <span class=\"text-white\">\u8BC4\u8BBA</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"fetchByReplies()\">\u6700\u591A\u56DE\u590D</button>\n  <button mat-menu-item (click)=\"fetchByComments()\">\u6700\u65B0\u8BC4\u8BBA</button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentsHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-comments-header', standalone: true, imports: [
+                        AngularCommonModule,
+                        CommentItemComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        CommentActionComponent,
+                        MatProgressSpinnerModule,
+                    ], template: "<div class=\"my-2\">\n  <div class=\"flex items-center gap-3 py-2\">\n    <span class=\"text-lg font-bold\">\u8BC4\u8BBA({{ total }})</span>\n    <button mat-button [matMenuTriggerFor]=\"menu\">\n      <mat-icon>sort</mat-icon>\n      <span>\u6392\u5E8F</span>\n    </button>\n  </div>\n\n  @if (loading) {\n    <div class=\"flex items-center justify-center h-20\">\n      <mat-spinner diameter=\"32\"></mat-spinner>\n    </div>\n  } @else {\n    <div class=\"mr-3\">\n      <mat-form-field>\n        <textarea\n          matInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          cdkAutosizeMaxRows=\"8\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"content\"\n          (focus)=\"onFocus($event)\"\n        ></textarea>\n      </mat-form-field>\n      @if (show) {\n        <div class=\"flex justify-end items-center gap-2 pr-2\">\n          <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n          <button mat-flat-button color=\"primary\" (click)=\"onComment()\">\n            <span class=\"text-white\">\u8BC4\u8BBA</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"fetchByReplies()\">\u6700\u591A\u56DE\u590D</button>\n  <button mat-menu-item (click)=\"fetchByComments()\">\u6700\u65B0\u8BC4\u8BBA</button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
+        }], propDecorators: { comments: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], comment: [{
+                type: Output
+            }] } });
+
+class CommentsComponent {
+    constructor() {
+        this.commentService = inject(CommentService);
+        this.authUserService = inject(AuthUserService);
+        this.comments = [];
+        this.itemId = '';
+        this.total = 0;
+        this.show = false;
+        this.content = '';
+    }
+    ngOnChanges(changes) {
+        const itemId = changes['itemId'].currentValue;
+        this.find(itemId);
+    }
+    find(itemId) {
+        this.commentService.findCommentsByItemId(itemId).subscribe({
+            next: (res) => {
+                this.total = res.meta?.pagination.count;
+                this.comments = res.data;
+            },
+        });
+    }
+    onComment(content) {
+        const data = {
+            itemId: this.itemId,
+            content,
+        };
+        this.commentService.createComment(data).subscribe({
+            next: (res) => {
+                this.comments = this.comments ? this.comments : [];
+                this.comments.unshift(res);
+                this.commentService.onCommentLoading.emit(false);
+                this.commentService.onComment.emit(true);
+            },
+            error: (error) => {
+                console.log(error);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: CommentsComponent, isStandalone: true, selector: "rolatech-comments", inputs: { comments: "comments", itemId: "itemId", total: "total" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\" id=\"comment\">\n  <rolatech-comments-header (comment)=\"onComment($event)\" [total]=\"total\"></rolatech-comments-header>\n  @for (item of comments; track $index) {\n    <rolatech-comment-item [comment]=\"item\"></rolatech-comment-item>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "component", type: CommentItemComponent, selector: "rolatech-comment-item", inputs: ["comment"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: CommentsHeaderComponent, selector: "rolatech-comments-header", inputs: ["comments", "placeholder", "total"], outputs: ["comment"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: CommentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-comments', standalone: true, imports: [AngularCommonModule, CommentItemComponent, MatButtonModule, CommentsHeaderComponent], template: "<div class=\"flex flex-col gap-3\" id=\"comment\">\n  <rolatech-comments-header (comment)=\"onComment($event)\" [total]=\"total\"></rolatech-comments-header>\n  @for (item of comments; track $index) {\n    <rolatech-comment-item [comment]=\"item\"></rolatech-comment-item>\n  }\n</div>\n" }]
+        }], propDecorators: { comments: [{
+                type: Input
+            }], itemId: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CommentItemComponent, CommentRepliesComponent, CommentService, CommentsComponent, ReplyItemComponent };
+//# sourceMappingURL=rolatech-angular-comment.mjs.map