@rolatech/angular-comment 17.2.8 → 19.0.0-beta.0
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 +30 -35
- package/fesm2022/rolatech-angular-comment.mjs.map +1 -1
- package/lib/services/comment.service.d.ts +1 -1
- package/package.json +8 -6
- package/themes/_default.scss +1 -1
- package/esm2022/index.mjs +0 -4
- package/esm2022/lib/components/comment-action/comment-action.component.mjs +0 -55
- package/esm2022/lib/components/comment-item/comment-item.component.mjs +0 -108
- package/esm2022/lib/components/comment-replies/comment-replies.component.mjs +0 -41
- package/esm2022/lib/components/comments/comments.component.mjs +0 -54
- package/esm2022/lib/components/comments-header/comments-header.component.mjs +0 -72
- package/esm2022/lib/components/index.mjs +0 -5
- package/esm2022/lib/components/reply-item/reply-item.component.mjs +0 -67
- package/esm2022/lib/interfaces/comment.interface.mjs +0 -6
- package/esm2022/lib/interfaces/index.mjs +0 -2
- package/esm2022/lib/services/comment.service.mjs +0 -206
- package/esm2022/lib/services/index.mjs +0 -2
- package/esm2022/rolatech-angular-comment.mjs +0 -5
|
@@ -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: "19.0.3", ngImport: i0, type: CommentService, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
216
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: CommentService, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
|
|
217
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.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: "19.0.3", ngImport: i0, type: CommentService, decorators: [{
|
|
220
220
|
type: Injectable,
|
|
221
221
|
args: [{ providedIn: 'root' }]
|
|
222
222
|
}, {
|
|
@@ -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: "19.0.3", ngImport: i0, type: CommentActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
258
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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\">\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 class=\"max-h-9\" (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" class=\"max-h-9\" (click)=\"onReply()\">\u56DE\u590D</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: "component", type: i2.MatIconButton, selector: "button[mat-icon-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", "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: "19.0.3", ngImport: i0, type: CommentActionComponent, decorators: [{
|
|
261
261
|
type: Component,
|
|
262
|
-
args: [{ selector: 'rolatech-comment-action',
|
|
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\">\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 class=\"max-h-9\" (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" class=\"max-h-9\" (click)=\"onReply()\">\u56DE\u590D</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 {
|
|
@@ -285,7 +285,6 @@ class ReplyItemComponent {
|
|
|
285
285
|
},
|
|
286
286
|
error: (error) => {
|
|
287
287
|
this.commentService.onCommentLoading.emit(false);
|
|
288
|
-
console.log(error);
|
|
289
288
|
},
|
|
290
289
|
});
|
|
291
290
|
}
|
|
@@ -309,12 +308,12 @@ class ReplyItemComponent {
|
|
|
309
308
|
},
|
|
310
309
|
});
|
|
311
310
|
}
|
|
312
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ReplyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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"] }] }); }
|
|
314
313
|
}
|
|
315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ReplyItemComponent, decorators: [{
|
|
316
315
|
type: Component,
|
|
317
|
-
args: [{ selector: 'rolatech-reply-item',
|
|
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" }]
|
|
318
317
|
}], ctorParameters: () => [] });
|
|
319
318
|
|
|
320
319
|
class CommentRepliesComponent {
|
|
@@ -340,12 +339,12 @@ class CommentRepliesComponent {
|
|
|
340
339
|
this.total.set(this.total() + 1);
|
|
341
340
|
this.replies().push(reply);
|
|
342
341
|
}
|
|
343
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
344
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
343
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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]\">\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()\" [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[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: 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"] }] }); }
|
|
345
344
|
}
|
|
346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentRepliesComponent, decorators: [{
|
|
347
346
|
type: Component,
|
|
348
|
-
args: [{ selector: 'rolatech-comment-replies',
|
|
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]\">\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()\" [item]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n }\n }\n</div>\n" }]
|
|
349
348
|
}] });
|
|
350
349
|
|
|
351
350
|
class CommentItemComponent {
|
|
@@ -421,12 +420,12 @@ class CommentItemComponent {
|
|
|
421
420
|
},
|
|
422
421
|
});
|
|
423
422
|
}
|
|
424
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
425
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
423
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
424
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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"] }] }); }
|
|
426
425
|
}
|
|
427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentItemComponent, decorators: [{
|
|
428
427
|
type: Component,
|
|
429
|
-
args: [{ selector: 'rolatech-comment-item',
|
|
428
|
+
args: [{ selector: 'rolatech-comment-item', imports: [
|
|
430
429
|
CommonModule,
|
|
431
430
|
MatButtonModule,
|
|
432
431
|
MatIconModule,
|
|
@@ -437,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
437
436
|
CommentActionComponent,
|
|
438
437
|
TimePipe,
|
|
439
438
|
MatMenuModule,
|
|
440
|
-
], template: "<div class=\"block w-full\">\n @if (comment) {\n <div class=\"flex group\">\n <div class=\"bg-
|
|
439
|
+
], 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"] }]
|
|
441
440
|
}], ctorParameters: () => [] });
|
|
442
441
|
|
|
443
442
|
class CommentsHeaderComponent {
|
|
@@ -474,20 +473,18 @@ class CommentsHeaderComponent {
|
|
|
474
473
|
}
|
|
475
474
|
fetchByComments() { }
|
|
476
475
|
fetchByReplies() { }
|
|
477
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
478
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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\">\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 class=\"max-h-9\" (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" class=\"max-h-9\" (click)=\"onComment()\">\u8BC4\u8BBA</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", "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"] }] }); }
|
|
479
478
|
}
|
|
480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentsHeaderComponent, decorators: [{
|
|
481
480
|
type: Component,
|
|
482
|
-
args: [{ selector: 'rolatech-comments-header',
|
|
481
|
+
args: [{ selector: 'rolatech-comments-header', imports: [
|
|
483
482
|
AngularCommonModule,
|
|
484
|
-
CommentItemComponent,
|
|
485
483
|
MatButtonModule,
|
|
486
484
|
MatIconModule,
|
|
487
485
|
MatMenuModule,
|
|
488
486
|
MatFormFieldModule,
|
|
489
487
|
MatInputModule,
|
|
490
|
-
CommentActionComponent,
|
|
491
488
|
MatProgressSpinnerModule,
|
|
492
489
|
], 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 class=\"max-h-9\" (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" class=\"max-h-9\" (click)=\"onComment()\">\u8BC4\u8BBA</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"] }]
|
|
493
490
|
}] });
|
|
@@ -525,17 +522,15 @@ class CommentsComponent {
|
|
|
525
522
|
this.commentService.onCommentLoading.emit(false);
|
|
526
523
|
this.commentService.onComment.emit(true);
|
|
527
524
|
},
|
|
528
|
-
error: (error) => {
|
|
529
|
-
console.log(error);
|
|
530
|
-
},
|
|
525
|
+
error: (error) => { },
|
|
531
526
|
});
|
|
532
527
|
}
|
|
533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
528
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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"] }] }); }
|
|
535
530
|
}
|
|
536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CommentsComponent, decorators: [{
|
|
537
532
|
type: Component,
|
|
538
|
-
args: [{
|
|
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" }]
|
|
539
534
|
}] });
|
|
540
535
|
|
|
541
536
|
/**
|