@rolatech/angular-comment 19.0.0-beta.9 → 20.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/rolatech-angular-comment.mjs +27 -27
- package/fesm2022/rolatech-angular-comment.mjs.map +1 -1
- package/index.d.ts +140 -3
- package/package.json +4 -4
- package/themes/_default.scss +1 -1
- package/lib/components/comment-action/comment-action.component.d.ts +0 -20
- package/lib/components/comment-item/comment-item.component.d.ts +0 -21
- package/lib/components/comment-replies/comment-replies.component.d.ts +0 -18
- package/lib/components/comments/comments.component.d.ts +0 -19
- package/lib/components/comments-header/comments-header.component.d.ts +0 -20
- package/lib/components/index.d.ts +0 -4
- package/lib/components/reply-item/reply-item.component.d.ts +0 -17
- package/lib/interfaces/comment.interface.d.ts +0 -43
- package/lib/interfaces/index.d.ts +0 -1
- package/lib/services/comment.service.d.ts +0 -38
- package/lib/services/index.d.ts +0 -1
|
@@ -212,11 +212,11 @@ class CommentService extends BaseService {
|
|
|
212
212
|
withCredentials: true,
|
|
213
213
|
});
|
|
214
214
|
}
|
|
215
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
216
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
217
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
215
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentService, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
216
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: CommentService, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
|
|
217
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentService, providedIn: 'root' }); }
|
|
218
218
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentService, decorators: [{
|
|
220
220
|
type: Injectable,
|
|
221
221
|
args: [{ providedIn: 'root' }]
|
|
222
222
|
}, {
|
|
@@ -226,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
226
226
|
class CommentActionComponent {
|
|
227
227
|
constructor() {
|
|
228
228
|
this.commentService = inject(CommentService);
|
|
229
|
-
this.placeholder = input('
|
|
229
|
+
this.placeholder = input('Add a comment');
|
|
230
230
|
this.data = input.required();
|
|
231
231
|
this.reply = output();
|
|
232
232
|
this.thumbsUp = output();
|
|
@@ -254,12 +254,12 @@ class CommentActionComponent {
|
|
|
254
254
|
onThumbsDown() {
|
|
255
255
|
this.thumbsDown.emit();
|
|
256
256
|
}
|
|
257
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
258
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
257
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
258
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CommentActionComponent, isStandalone: true, selector: "rolatech-comment-action", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { reply: "reply", thumbsUp: "thumbsUp", thumbsDown: "thumbsDown" }, ngImport: i0, template: "<div>\n <div class=\"flex items-center -ml-2\">\n <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (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 mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (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 <button mat-button (click)=\"show = true\" class=\"max-w-8 max-h-8 ml-1\" i18n>Reply</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 class=\"max-h-9\" (click)=\"onCancel()\" i18n>Cancel</button>\n <button mat-flat-button class=\"max-h-9\" (click)=\"onReply()\" i18n>Reply</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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], 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"] }] }); }
|
|
259
259
|
}
|
|
260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
260
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentActionComponent, decorators: [{
|
|
261
261
|
type: Component,
|
|
262
|
-
args: [{ selector: 'rolatech-comment-action', imports: [AngularCommonModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule], template: "<div>\n <div class=\"flex items-center -ml-2\">\n <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (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 mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (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 <button mat-button (click)=\"show = true\" class=\"max-w-8 max-h-8 ml-1\"
|
|
262
|
+
args: [{ selector: 'rolatech-comment-action', imports: [AngularCommonModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule], template: "<div>\n <div class=\"flex items-center -ml-2\">\n <button mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (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 mat-icon-button class=\"max-w-8 max-h-8 !p-1\" (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 <button mat-button (click)=\"show = true\" class=\"max-w-8 max-h-8 ml-1\" i18n>Reply</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 class=\"max-h-9\" (click)=\"onCancel()\" i18n>Cancel</button>\n <button mat-flat-button class=\"max-h-9\" (click)=\"onReply()\" i18n>Reply</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"] }]
|
|
263
263
|
}] });
|
|
264
264
|
|
|
265
265
|
class ReplyItemComponent {
|
|
@@ -308,10 +308,10 @@ class ReplyItemComponent {
|
|
|
308
308
|
},
|
|
309
309
|
});
|
|
310
310
|
}
|
|
311
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
312
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ReplyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ReplyItemComponent, isStandalone: true, selector: "rolatech-reply-item", inputs: { commentId: { classPropertyName: "commentId", publicName: "commentId", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { replied: "replied" }, ngImport: i0, template: "<div class=\"block w-full\">\n @if (reply) {\n <div class=\"flex group\">\n <div class=\"bg-[--rt-brand-color] 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\" alt />\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\">@{{ 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-[--rt-10-percent-layer] 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"] }] }); }
|
|
313
313
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ReplyItemComponent, decorators: [{
|
|
315
315
|
type: Component,
|
|
316
316
|
args: [{ selector: 'rolatech-reply-item', 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-[--rt-brand-color] 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\" alt />\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\">@{{ 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-[--rt-10-percent-layer] 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" }]
|
|
317
317
|
}], ctorParameters: () => [] });
|
|
@@ -339,12 +339,12 @@ class CommentRepliesComponent {
|
|
|
339
339
|
this.total.set(this.total() + 1);
|
|
340
340
|
this.replies().push(reply);
|
|
341
341
|
}
|
|
342
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
343
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CommentRepliesComponent, isStandalone: true, selector: "rolatech-comment-replies", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, replies: { classPropertyName: "replies", publicName: "replies", isSignal: true, isRequired: false, transformFunction: null }, commentId: { classPropertyName: "commentId", publicName: "commentId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { total: "totalChange", replies: "repliesChange", replied: "replied", fetch: "fetch" }, ngImport: i0, template: "<div class=\"block ml-14\">\n @if (total() > 0) {\n <div>\n <button mat-button (click)=\"onFetch()\" class=\"max-h-9 mb-1\">\n <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n <span class=\"mr-2 text-sm text-[--rt-brand-color]\" i18n>Replies({{ 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()\" [item]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n }\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: ["commentId", "item"], outputs: ["replied"] }] }); }
|
|
344
344
|
}
|
|
345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentRepliesComponent, decorators: [{
|
|
346
346
|
type: Component,
|
|
347
|
-
args: [{ selector: 'rolatech-comment-replies', imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, ReplyItemComponent], template: "<div class=\"block ml-14\">\n @if (total() > 0) {\n <div>\n <button mat-button (click)=\"onFetch()\" class=\"max-h-9 mb-1\">\n <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n <span class=\"mr-2 text-sm text-[--rt-brand-color]\"
|
|
347
|
+
args: [{ selector: 'rolatech-comment-replies', imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, ReplyItemComponent], template: "<div class=\"block ml-14\">\n @if (total() > 0) {\n <div>\n <button mat-button (click)=\"onFetch()\" class=\"max-h-9 mb-1\">\n <mat-icon>{{ expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n <span class=\"mr-2 text-sm text-[--rt-brand-color]\" i18n>Replies({{ 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()\" [item]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n }\n }\n</div>\n" }]
|
|
348
348
|
}] });
|
|
349
349
|
|
|
350
350
|
class CommentItemComponent {
|
|
@@ -420,10 +420,10 @@ class CommentItemComponent {
|
|
|
420
420
|
},
|
|
421
421
|
});
|
|
422
422
|
}
|
|
423
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
423
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
424
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CommentItemComponent, isStandalone: true, selector: "rolatech-comment-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"block w-full\">\n @if (comment) {\n <div class=\"flex group\">\n <div class=\"bg-[--rt-brand-color] 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\" alt />\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\">@{{ 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-[--rt-10-percent-layer] 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: ["totalChange", "repliesChange", "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"] }] }); }
|
|
425
425
|
}
|
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentItemComponent, decorators: [{
|
|
427
427
|
type: Component,
|
|
428
428
|
args: [{ selector: 'rolatech-comment-item', imports: [
|
|
429
429
|
CommonModule,
|
|
@@ -442,7 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
442
442
|
class CommentsHeaderComponent {
|
|
443
443
|
constructor() {
|
|
444
444
|
this.commentService = inject(CommentService);
|
|
445
|
-
this.placeholder = input('
|
|
445
|
+
this.placeholder = input('Add a comment');
|
|
446
446
|
this.total = model(0);
|
|
447
447
|
this.comment = output();
|
|
448
448
|
this.content = '';
|
|
@@ -473,10 +473,10 @@ class CommentsHeaderComponent {
|
|
|
473
473
|
}
|
|
474
474
|
fetchByComments() { }
|
|
475
475
|
fetchByReplies() { }
|
|
476
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CommentsHeaderComponent, isStandalone: true, selector: "rolatech-comments-header", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { total: "totalChange", 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\" i18n>Comments({{ total() }})</span>\n <button mat-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>sort</mat-icon>\n <span i18n>Sort</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 class=\"max-h-9\" (click)=\"onCancel()\" i18n>Cancel</button>\n <button mat-flat-button class=\"max-h-9\" (click)=\"onComment()\" i18n>Comment</button>\n </div>\n }\n </div>\n }\n</div>\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"fetchByReplies()\" i18n>Top comments</button>\n <button mat-menu-item (click)=\"fetchByComments()\" i18n>Newest</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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], 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"] }] }); }
|
|
478
478
|
}
|
|
479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentsHeaderComponent, decorators: [{
|
|
480
480
|
type: Component,
|
|
481
481
|
args: [{ selector: 'rolatech-comments-header', imports: [
|
|
482
482
|
AngularCommonModule,
|
|
@@ -486,7 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
486
486
|
MatFormFieldModule,
|
|
487
487
|
MatInputModule,
|
|
488
488
|
MatProgressSpinnerModule,
|
|
489
|
-
], template: "<div class=\"my-2\">\n <div class=\"flex items-center gap-3 py-2\">\n <span class=\"text-lg font-bold\"
|
|
489
|
+
], template: "<div class=\"my-2\">\n <div class=\"flex items-center gap-3 py-2\">\n <span class=\"text-lg font-bold\" i18n>Comments({{ total() }})</span>\n <button mat-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>sort</mat-icon>\n <span i18n>Sort</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 class=\"max-h-9\" (click)=\"onCancel()\" i18n>Cancel</button>\n <button mat-flat-button class=\"max-h-9\" (click)=\"onComment()\" i18n>Comment</button>\n </div>\n }\n </div>\n }\n</div>\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"fetchByReplies()\" i18n>Top comments</button>\n <button mat-menu-item (click)=\"fetchByComments()\" i18n>Newest</button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
|
|
490
490
|
}] });
|
|
491
491
|
|
|
492
492
|
class CommentsComponent {
|
|
@@ -525,10 +525,10 @@ class CommentsComponent {
|
|
|
525
525
|
error: (error) => { },
|
|
526
526
|
});
|
|
527
527
|
}
|
|
528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
528
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: CommentsComponent, isStandalone: true, selector: "rolatech-comments", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null } }, 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 [item]=\"item\"></rolatech-comment-item>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "component", type: CommentItemComponent, selector: "rolatech-comment-item", inputs: ["item"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: CommentsHeaderComponent, selector: "rolatech-comments-header", inputs: ["placeholder", "total"], outputs: ["totalChange", "comment"] }] }); }
|
|
530
530
|
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CommentsComponent, decorators: [{
|
|
532
532
|
type: Component,
|
|
533
533
|
args: [{ selector: 'rolatech-comments', 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 [item]=\"item\"></rolatech-comment-item>\n }\n</div>\n" }]
|
|
534
534
|
}] });
|