@banta/sdk 7.0.0 → 7.0.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/banta-sdk.mjs +66 -21
- package/fesm2022/banta-sdk.mjs.map +1 -1
- package/index.d.ts +9 -5
- package/package.json +1 -1
package/fesm2022/banta-sdk.mjs
CHANGED
|
@@ -19,7 +19,7 @@ import * as i8 from '@angular/material/progress-spinner';
|
|
|
19
19
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
20
20
|
import * as i6 from '@angular/material/button';
|
|
21
21
|
import { MatButtonModule } from '@angular/material/button';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i3 from '@angular/forms';
|
|
23
23
|
import { FormsModule } from '@angular/forms';
|
|
24
24
|
import * as i4 from '@angular/material/form-field';
|
|
25
25
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
@@ -29,7 +29,7 @@ import * as i1$1 from '@angular/cdk/overlay';
|
|
|
29
29
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
30
30
|
import * as i4$1 from '@angular/cdk/portal';
|
|
31
31
|
import { PortalModule } from '@angular/cdk/portal';
|
|
32
|
-
import * as i2$
|
|
32
|
+
import * as i2$4 from '@angular/material/dialog';
|
|
33
33
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
34
34
|
import * as i7 from '@angular/material/menu';
|
|
35
35
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -43,12 +43,12 @@ import * as i13 from '@angular/material/radio';
|
|
|
43
43
|
import { MatRadioModule } from '@angular/material/radio';
|
|
44
44
|
import * as i6$1 from '@angular/material/badge';
|
|
45
45
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
46
|
-
import * as i2$
|
|
47
|
-
import * as i3 from '@angular/material/snack-bar';
|
|
46
|
+
import * as i2$3 from '@angular/router';
|
|
47
|
+
import * as i3$1 from '@angular/material/snack-bar';
|
|
48
48
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
49
49
|
import * as i1$3 from '@angular/cdk/text-field';
|
|
50
50
|
import { TextFieldModule } from '@angular/cdk/text-field';
|
|
51
|
-
import * as i2$
|
|
51
|
+
import * as i2$5 from '@angular/material/select';
|
|
52
52
|
import { MatSelectModule } from '@angular/material/select';
|
|
53
53
|
import { v4 } from 'uuid';
|
|
54
54
|
|
|
@@ -750,7 +750,7 @@ class EmojiSelectorPanelComponent {
|
|
|
750
750
|
this.allEmoji = this.categories.flatMap(cat => cat.items);
|
|
751
751
|
}
|
|
752
752
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmojiSelectorPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
753
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EmojiSelectorPanelComponent, isStandalone: false, selector: "emoji-selector-panel", outputs: { selected: "selected" }, ngImport: i0, template: "@if (searchVisible) {\r\n <div class=\"search-box\">\r\n <a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </a>\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Search for emoji</mat-label>\r\n <input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n </mat-form-field>\r\n </div>\r\n}\r\n\r\n<div class=\"selector\">\r\n @if (searchVisible) {\r\n <div class=\"emoji-list\">\r\n @for (emoji of searchResults; track emoji.unicode) {\r\n <a href=\"javascript:;\" (click)=\"select(emoji.char)\" [innerHtml]=\"emoji.html || ''\"></a>\r\n }\r\n </div>\r\n }\r\n @if (!searchVisible) {\r\n <div class=\"categories\">\r\n @if (!searchVisible) {\r\n @for (category of categories; track category.id) {\r\n <a [title]=\"humanize(category.title)\"\r\n [class.active]=\"activeCategory === category.id\"\r\n mat-icon-button\r\n (click)=\"activeCategory = category.id\">\r\n <mat-icon>{{category.icon}}</mat-icon>\r\n </a>\r\n }\r\n <a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n <mat-icon>search</mat-icon>\r\n </a>\r\n }\r\n </div>\r\n @for (category of categories; track category.id) {\r\n @if (activeCategory && activeCategory == category.id) {\r\n <div class=\"emoji-list\">\r\n @for (emoji of category.items; track emoji.unicode) {\r\n <a href=\"javascript:;\"\r\n (click)=\"select(emoji.string)\"\r\n [innerHtml]=\"emoji.html || ''\"></a>\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n</div>\r\n", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"], dependencies: [{ kind: "directive", type:
|
|
753
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EmojiSelectorPanelComponent, isStandalone: false, selector: "emoji-selector-panel", outputs: { selected: "selected" }, ngImport: i0, template: "@if (searchVisible) {\r\n <div class=\"search-box\">\r\n <a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </a>\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Search for emoji</mat-label>\r\n <input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n </mat-form-field>\r\n </div>\r\n}\r\n\r\n<div class=\"selector\">\r\n @if (searchVisible) {\r\n <div class=\"emoji-list\">\r\n @for (emoji of searchResults; track emoji.unicode) {\r\n <a href=\"javascript:;\" (click)=\"select(emoji.char)\" [innerHtml]=\"emoji.html || ''\"></a>\r\n }\r\n </div>\r\n }\r\n @if (!searchVisible) {\r\n <div class=\"categories\">\r\n @if (!searchVisible) {\r\n @for (category of categories; track category.id) {\r\n <a [title]=\"humanize(category.title)\"\r\n [class.active]=\"activeCategory === category.id\"\r\n mat-icon-button\r\n (click)=\"activeCategory = category.id\">\r\n <mat-icon>{{category.icon}}</mat-icon>\r\n </a>\r\n }\r\n <a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n <mat-icon>search</mat-icon>\r\n </a>\r\n }\r\n </div>\r\n @for (category of categories; track category.id) {\r\n @if (activeCategory && activeCategory == category.id) {\r\n <div class=\"emoji-list\">\r\n @for (emoji of category.items; track emoji.unicode) {\r\n <a href=\"javascript:;\"\r\n (click)=\"select(emoji.string)\"\r\n [innerHtml]=\"emoji.html || ''\"></a>\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n</div>\r\n", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { 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"] }] }); }
|
|
754
754
|
}
|
|
755
755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmojiSelectorPanelComponent, decorators: [{
|
|
756
756
|
type: Component,
|
|
@@ -1074,7 +1074,7 @@ class CommentComponent {
|
|
|
1074
1074
|
});
|
|
1075
1075
|
}
|
|
1076
1076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1077
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommentComponent, isStandalone: false, selector: "banta-comment", inputs: { busy: "busy", message: "message", customMenuItems: "customMenuItems", showReplyAction: "showReplyAction", maxLength: "maxLength", permissions: "permissions", mine: "mine", editing: "editing", genericAvatarUrl: "genericAvatarUrl", readonly: "readonly" }, outputs: { liked: "liked", unliked: "unliked", selected: "selected", edited: "edited", deleted: "deleted", editStarted: "editStarted", editEnded: "editEnded", shared: "shared", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", reported: "reported", loaded: "loaded", pinned: "pinned", unpinned: "unpinned" }, host: { properties: { "attr.data-comment-id": "this.commentId", "class.new": "this.isNew", "class.highlighted": "this.isHighlighted", "class.visible": "this.visible", "class.pinned": "this.isPinned" } }, ngImport: i0, template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n @if (permissions.canPin) {\r\n @if (isPinned) {\r\n <button mat-menu-item (click)=\"unpin()\">\r\n <mat-icon>push_pin</mat-icon>\r\n Unpin\r\n </button>\r\n } @else {\r\n <button mat-menu-item (click)=\"showPinForm()\">\r\n <mat-icon>push_pin</mat-icon>\r\n Pin\r\n </button>\r\n }\r\n <mat-divider />\r\n }\r\n <button mat-menu-item (click)=\"share()\">\r\n <mat-icon>share</mat-icon>\r\n Share\r\n </button>\r\n @if (!mine) {\r\n <button mat-menu-item (click)=\"report()\">\r\n <mat-icon>warning</mat-icon>\r\n Report\r\n </button>\r\n }\r\n @if (mine) {\r\n <button [disabled]=\"!permissions?.canEdit || readonly\" mat-menu-item (click)=\"startEdit()\">\r\n <mat-icon>edit</mat-icon>\r\n Edit\r\n </button>\r\n }\r\n @if (mine) {\r\n <button [disabled]=\"!permissions?.canDelete || readonly\" mat-menu-item (click)=\"delete()\">\r\n <mat-icon>delete</mat-icon>\r\n Delete\r\n </button>\r\n }\r\n\r\n @for (menuItem of customMenuItems; track menuItem) {\r\n <button mat-menu-item (click)=\"menuItem.action(message)\">\r\n <mat-icon>{{menuItem.icon}}</mat-icon>\r\n {{menuItem.label}}\r\n </button>\r\n }\r\n\r\n</mat-menu>\r\n\r\n<div class=\"banta-message-content-container\">\r\n <div class=\"banta-user\">\r\n <div class=\"banta-user-1\">\r\n <a\r\n href=\"javascript:;\"\r\n class=\"banta-avatar\"\r\n (click)=\"selectAvatar(message.user)\"\r\n [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n <div class=\"banta-user-identity\">\r\n <a href=\"javascript:;\" class=\"banta-display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n <a href=\"javascript:;\" class=\"banta-username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n </div>\r\n </div>\r\n <div class=\"banta-user-2\">\r\n @if (message.user.tag) {\r\n <span class=\"banta-user-tag\">{{message.user.tag}}</span>\r\n }\r\n <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n <span class=\"spacer\"></span>\r\n </div>\r\n <div class=\"spacer\"></div>\r\n </div>\r\n @if (!editing) {\r\n <div class=\"banta-content\">\r\n <span class=\"banta-message-content\" [innerHTML]=\"message.message | mentionLinker: message.mentionLinks | bantaMarkdownToHtml\"></span>\r\n <banta-attachments\r\n [attachments]=\"message.attachments\"\r\n (loaded)=\"markAttachmentsLoaded()\"\r\n ></banta-attachments>\r\n <ul class=\"message-facts\">\r\n @if (message.edits?.length > 0) {\r\n <li>(Edited)</li>\r\n }\r\n </ul>\r\n @if (pinFormVisible) {\r\n <div class=\"banta-pin-form\">\r\n <div class=\"banta-pin-form-header\">\r\n <div class=\"banta-pin-form-header-title\">\r\n Pin message?\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <!-- <div class=\"banta-pin-form-auth-explanation\">\r\n <mat-icon>lock</mat-icon> Only available to authorized users.\r\n </div> -->\r\n <button mat-icon-button (click)=\"pinFormVisible = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <p>\r\n Pinning this message will cause it to appear at the top of the discussion for all users.\r\n </p>\r\n <mat-radio-group [(ngModel)]=\"pinMode\">\r\n <div>\r\n <mat-radio-button value=\"forever\">Pin indefinitely</mat-radio-button>\r\n </div>\r\n <div>\r\n <mat-radio-button value=\"until\">Pin until a specific time:</mat-radio-button>\r\n </div>\r\n <div class=\"banta-pin-form-until\" [class.banta-pin-form-until-disabled]=\"pinMode !== 'until'\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Date</mat-label>\r\n <input\r\n matInput\r\n [min]=\"today\"\r\n [matDatepicker]=\"datepicker\"\r\n [(ngModel)]=\"pinUntilDate\"\r\n [disabled]=\"pinMode !== 'until'\"\r\n />\r\n <mat-datepicker #datepicker/>\r\n <mat-datepicker-toggle [for]=\"datepicker\" matSuffix/>\r\n </mat-form-field>\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Time</mat-label>\r\n <input matInput\r\n type=\"time\"\r\n [(ngModel)]=\"pinUntilTime\"\r\n [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n [disabled]=\"pinMode !== 'until'\"\r\n />\r\n <!-- <mat-timepicker #timepicker/>\r\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix/> -->\r\n </mat-form-field>\r\n </div>\r\n </mat-radio-group>\r\n <div class=\"banta-pin-form-actions\">\r\n <button mat-button (click)=\"pinFormVisible = false\">\r\n Cancel\r\n </button>\r\n <button mat-raised-button color=\"primary\" (click)=\"submitPin()\" [disabled]=\"!pinFormValid\">\r\n Pin\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (editing) {\r\n <div class=\"banta-content\" style=\"padding-bottom: 2em;\">\r\n <div>\r\n <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n <mat-label>Edit Message</mat-label>\r\n <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n <button mat-raised-button (click)=\"saveEdit()\">Save</button> \r\n <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n </div>\r\n }\r\n\r\n\r\n <div class=\"banta-actions\">\r\n @if (isPinned) {\r\n <div class=\"pin-indicator\">\r\n <mat-icon>push_pin</mat-icon> Pinned\r\n @if (message.pinnedUntil) {\r\n until <time [attr.datetime]=\"message.pinnedUntil | date: 'full'\">{{ message.pinnedUntil | date: 'short' }}</time>\r\n }\r\n </div>\r\n }\r\n <div class=\"spacer\"></div>\r\n @if (showReplyAction) {\r\n <div class=\"banta-counted-action\">\r\n <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n <mat-icon>comment</mat-icon>\r\n <span class=\"banta-count-indicator\">\r\n {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"banta-counted-action\" [class.active]=\"message.userState?.liked\">\r\n @if (message.transientState?.liking) {\r\n <button\r\n mat-icon-button\r\n [disabled]=\"true\"\r\n [matTooltip]=\"busy ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\"\r\n matTooltipPosition=\"below\"\r\n >\r\n <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n </button>\r\n }\r\n @if (!message.transientState?.liking) {\r\n <button\r\n mat-button\r\n [disabled]=\"readonly\"\r\n [matTooltip]=\"permissions?.canLike ? busy ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\"\r\n matTooltipPosition=\"below\"\r\n (click)=\"message.userState?.liked ? unlike() : like()\"\r\n >\r\n <mat-icon>thumb_up</mat-icon>\r\n @if (message.likes > 0) {\r\n <span class=\"banta-count-indicator\">\r\n {{message.likes}}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n", styles: ["@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;animation-name:comment-appear;animation-duration:.25s;animation-fill-mode:both}:host.pinned{background-color:#1c1c1c;border:1px solid #057eb1;border-radius:5px}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .banta-message-content-container .banta-content{margin-left:60px;margin-right:.5em}:host .banta-message-content-container .attachments-row{margin-top:15px;display:flex;gap:10px}:host .banta-message-content-container .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;object-fit:cover}:host.abbreviated .banta-message-content-container .banta-content{text-overflow:ellipsis;overflow-y:hidden}:host .banta-actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .banta-actions button{color:#666;flex-shrink:0}banta-timestamp{color:#666;font-size:10pt;flex-shrink:0;margin-left:1em;text-align:right}.banta-user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.banta-user .banta-user-1,.banta-user .banta-user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.banta-user .banta-user-2{margin:1em 0}.banta-user .banta-user-identity{display:flex;flex-direction:column;min-width:0}.banta-user .banta-display-name,.banta-user .banta-username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.banta-user .banta-display-name.banta-username.banta-username.banta-username,.banta-user .banta-username.banta-username.banta-username.banta-username{color:#666}.banta-avatar{height:48px;width:48px;background-position:center;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.banta-counted-action{display:flex;align-items:center}.banta-counted-action.active button,.banta-counted-action.active .banta-count-indicator{color:#00a5ff}.banta-counted-action button .banta-count-indicator{margin-left:.5em}.banta-count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .banta-count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .banta-user .banta-display-name,:host-context(.mat-dark-theme) .banta-user .banta-username{color:#fff}.banta-user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666;display:flex;align-items:center}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em;display:flex;align-items:center}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width: 400px){.banta-avatar{height:32px;width:32px}:host .banta-actions{margin-left:0;margin-top:.5em}:host .banta-message-content-container .banta-content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .banta-avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .banta-actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .banta-message-content-container .banta-content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}::ng-deep .banta-message-content img.emoji{height:1.5em;vertical-align:middle}.banta-pin-form{border:1px solid #333;border-radius:4px;padding:1em}.banta-pin-form .banta-pin-form-header{display:flex;flex-direction:row;align-items:center}.banta-pin-form .banta-pin-form-header .banta-pin-form-header-title{font-size:150%;margin-bottom:.5em}.banta-pin-form .banta-pin-form-auth-explanation{opacity:.25;font-size:80%;margin-bottom:.5em;display:flex;align-items:center;gap:.5em}.banta-pin-form .banta-pin-form-until{display:flex;align-items:baseline;gap:1em;margin:1em 0 1em 2em}.banta-pin-form .banta-pin-form-until.banta-pin-form-until-disabled{pointer-events:none;opacity:.5}.banta-pin-form .banta-pin-form-actions{display:flex;align-items:baseline;justify-content:flex-end;gap:1em}.pin-indicator{font-size:80%;display:flex;align-items:center;margin-right:2em;opacity:.5;gap:.5em}.pin-indicator mat-icon{width:16px;height:16px;font-size:16px}\n"], dependencies: [{ kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i13.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: BantaMarkdownToHtmlPipe, name: "bantaMarkdownToHtml" }, { kind: "pipe", type: BantaMentionLinkerPipe, name: "mentionLinker" }] }); }
|
|
1077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommentComponent, isStandalone: false, selector: "banta-comment", inputs: { busy: "busy", message: "message", customMenuItems: "customMenuItems", showReplyAction: "showReplyAction", maxLength: "maxLength", permissions: "permissions", mine: "mine", editing: "editing", genericAvatarUrl: "genericAvatarUrl", readonly: "readonly" }, outputs: { liked: "liked", unliked: "unliked", selected: "selected", edited: "edited", deleted: "deleted", editStarted: "editStarted", editEnded: "editEnded", shared: "shared", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", reported: "reported", loaded: "loaded", pinned: "pinned", unpinned: "unpinned" }, host: { properties: { "attr.data-comment-id": "this.commentId", "class.new": "this.isNew", "class.highlighted": "this.isHighlighted", "class.visible": "this.visible", "class.pinned": "this.isPinned" } }, ngImport: i0, template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n @if (permissions.canPin) {\r\n @if (isPinned) {\r\n <button mat-menu-item (click)=\"unpin()\">\r\n <mat-icon>push_pin</mat-icon>\r\n Unpin\r\n </button>\r\n } @else {\r\n <button mat-menu-item (click)=\"showPinForm()\">\r\n <mat-icon>push_pin</mat-icon>\r\n Pin\r\n </button>\r\n }\r\n <mat-divider />\r\n }\r\n <button mat-menu-item (click)=\"share()\">\r\n <mat-icon>share</mat-icon>\r\n Share\r\n </button>\r\n @if (!mine) {\r\n <button mat-menu-item (click)=\"report()\">\r\n <mat-icon>warning</mat-icon>\r\n Report\r\n </button>\r\n }\r\n @if (mine) {\r\n <button [disabled]=\"!permissions?.canEdit || readonly\" mat-menu-item (click)=\"startEdit()\">\r\n <mat-icon>edit</mat-icon>\r\n Edit\r\n </button>\r\n }\r\n @if (mine) {\r\n <button [disabled]=\"!permissions?.canDelete || readonly\" mat-menu-item (click)=\"delete()\">\r\n <mat-icon>delete</mat-icon>\r\n Delete\r\n </button>\r\n }\r\n\r\n @for (menuItem of customMenuItems; track menuItem) {\r\n <button mat-menu-item (click)=\"menuItem.action(message)\">\r\n <mat-icon>{{menuItem.icon}}</mat-icon>\r\n {{menuItem.label}}\r\n </button>\r\n }\r\n\r\n</mat-menu>\r\n\r\n<div class=\"banta-message-content-container\">\r\n <div class=\"banta-user\">\r\n <div class=\"banta-user-1\">\r\n <a\r\n href=\"javascript:;\"\r\n class=\"banta-avatar\"\r\n (click)=\"selectAvatar(message.user)\"\r\n [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n <div class=\"banta-user-identity\">\r\n <a href=\"javascript:;\" class=\"banta-display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n <a href=\"javascript:;\" class=\"banta-username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n </div>\r\n </div>\r\n <div class=\"banta-user-2\">\r\n @if (message.user.tag) {\r\n <span class=\"banta-user-tag\">{{message.user.tag}}</span>\r\n }\r\n <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n <span class=\"spacer\"></span>\r\n </div>\r\n <div class=\"spacer\"></div>\r\n </div>\r\n @if (!editing) {\r\n <div class=\"banta-content\">\r\n <span class=\"banta-message-content\" [innerHTML]=\"message.message | mentionLinker: message.mentionLinks | bantaMarkdownToHtml\"></span>\r\n <banta-attachments\r\n [attachments]=\"message.attachments\"\r\n (loaded)=\"markAttachmentsLoaded()\"\r\n ></banta-attachments>\r\n <ul class=\"message-facts\">\r\n @if (message.edits?.length > 0) {\r\n <li>(Edited)</li>\r\n }\r\n </ul>\r\n @if (pinFormVisible) {\r\n <div class=\"banta-pin-form\">\r\n <div class=\"banta-pin-form-header\">\r\n <div class=\"banta-pin-form-header-title\">\r\n Pin message?\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <!-- <div class=\"banta-pin-form-auth-explanation\">\r\n <mat-icon>lock</mat-icon> Only available to authorized users.\r\n </div> -->\r\n <button mat-icon-button (click)=\"pinFormVisible = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <p>\r\n Pinning this message will cause it to appear at the top of the discussion for all users.\r\n </p>\r\n <mat-radio-group [(ngModel)]=\"pinMode\">\r\n <div>\r\n <mat-radio-button value=\"forever\">Pin indefinitely</mat-radio-button>\r\n </div>\r\n <div>\r\n <mat-radio-button value=\"until\">Pin until a specific time:</mat-radio-button>\r\n </div>\r\n <div class=\"banta-pin-form-until\" [class.banta-pin-form-until-disabled]=\"pinMode !== 'until'\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Date</mat-label>\r\n <input\r\n matInput\r\n [min]=\"today\"\r\n [matDatepicker]=\"datepicker\"\r\n [(ngModel)]=\"pinUntilDate\"\r\n [disabled]=\"pinMode !== 'until'\"\r\n />\r\n <mat-datepicker #datepicker/>\r\n <mat-datepicker-toggle [for]=\"datepicker\" matSuffix/>\r\n </mat-form-field>\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Time</mat-label>\r\n <input matInput\r\n type=\"time\"\r\n [(ngModel)]=\"pinUntilTime\"\r\n [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n [disabled]=\"pinMode !== 'until'\"\r\n />\r\n <!-- <mat-timepicker #timepicker/>\r\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix/> -->\r\n </mat-form-field>\r\n </div>\r\n </mat-radio-group>\r\n <div class=\"banta-pin-form-actions\">\r\n <button mat-button (click)=\"pinFormVisible = false\">\r\n Cancel\r\n </button>\r\n <button mat-raised-button color=\"primary\" (click)=\"submitPin()\" [disabled]=\"!pinFormValid\">\r\n Pin\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n @if (editing) {\r\n <div class=\"banta-content\" style=\"padding-bottom: 2em;\">\r\n <div>\r\n <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n <mat-label>Edit Message</mat-label>\r\n <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n </mat-form-field>\r\n </div>\r\n <button mat-raised-button (click)=\"saveEdit()\">Save</button> \r\n <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n </div>\r\n }\r\n\r\n\r\n <div class=\"banta-actions\">\r\n @if (isPinned) {\r\n <div class=\"pin-indicator\">\r\n <mat-icon>push_pin</mat-icon> Pinned\r\n @if (message.pinnedUntil) {\r\n until <time [attr.datetime]=\"message.pinnedUntil | date: 'full'\">{{ message.pinnedUntil | date: 'short' }}</time>\r\n }\r\n </div>\r\n }\r\n <div class=\"spacer\"></div>\r\n @if (showReplyAction) {\r\n <div class=\"banta-counted-action\">\r\n <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n <mat-icon>comment</mat-icon>\r\n <span class=\"banta-count-indicator\">\r\n {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n </span>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"banta-counted-action\" [class.active]=\"message.userState?.liked\">\r\n @if (message.transientState?.liking) {\r\n <button\r\n mat-icon-button\r\n [disabled]=\"true\"\r\n [matTooltip]=\"busy ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\"\r\n matTooltipPosition=\"below\"\r\n >\r\n <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n </button>\r\n }\r\n @if (!message.transientState?.liking) {\r\n <button\r\n mat-button\r\n [disabled]=\"readonly\"\r\n [matTooltip]=\"permissions?.canLike ? busy ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\"\r\n matTooltipPosition=\"below\"\r\n (click)=\"message.userState?.liked ? unlike() : like()\"\r\n >\r\n <mat-icon>thumb_up</mat-icon>\r\n @if (message.likes > 0) {\r\n <span class=\"banta-count-indicator\">\r\n {{message.likes}}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n", styles: ["@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;animation-name:comment-appear;animation-duration:.25s;animation-fill-mode:both}:host.pinned{background-color:#1c1c1c;border:1px solid #057eb1;border-radius:5px}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .banta-message-content-container .banta-content{margin-left:60px;margin-right:.5em}:host .banta-message-content-container .attachments-row{margin-top:15px;display:flex;gap:10px}:host .banta-message-content-container .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;object-fit:cover}:host.abbreviated .banta-message-content-container .banta-content{text-overflow:ellipsis;overflow-y:hidden}:host .banta-actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .banta-actions button{color:#666;flex-shrink:0}banta-timestamp{color:#666;font-size:10pt;flex-shrink:0;margin-left:1em;text-align:right}.banta-user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.banta-user .banta-user-1,.banta-user .banta-user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.banta-user .banta-user-2{margin:1em 0}.banta-user .banta-user-identity{display:flex;flex-direction:column;min-width:0}.banta-user .banta-display-name,.banta-user .banta-username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.banta-user .banta-display-name.banta-username.banta-username.banta-username,.banta-user .banta-username.banta-username.banta-username.banta-username{color:#666}.banta-avatar{height:48px;width:48px;background-position:center;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.banta-counted-action{display:flex;align-items:center}.banta-counted-action.active button,.banta-counted-action.active .banta-count-indicator{color:#00a5ff}.banta-counted-action button .banta-count-indicator{margin-left:.5em}.banta-count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .banta-count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .banta-user .banta-display-name,:host-context(.mat-dark-theme) .banta-user .banta-username{color:#fff}.banta-user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666;display:flex;align-items:center}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em;display:flex;align-items:center}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width: 400px){.banta-avatar{height:32px;width:32px}:host .banta-actions{margin-left:0;margin-top:.5em}:host .banta-message-content-container .banta-content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .banta-avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .banta-actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .banta-message-content-container .banta-content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}::ng-deep .banta-message-content img.emoji{height:1.5em;vertical-align:middle}.banta-pin-form{border:1px solid #333;border-radius:4px;padding:1em}.banta-pin-form .banta-pin-form-header{display:flex;flex-direction:row;align-items:center}.banta-pin-form .banta-pin-form-header .banta-pin-form-header-title{font-size:150%;margin-bottom:.5em}.banta-pin-form .banta-pin-form-auth-explanation{opacity:.25;font-size:80%;margin-bottom:.5em;display:flex;align-items:center;gap:.5em}.banta-pin-form .banta-pin-form-until{display:flex;align-items:baseline;gap:1em;margin:1em 0 1em 2em}.banta-pin-form .banta-pin-form-until.banta-pin-form-until-disabled{pointer-events:none;opacity:.5}.banta-pin-form .banta-pin-form-actions{display:flex;align-items:baseline;justify-content:flex-end;gap:1em}.pin-indicator{font-size:80%;display:flex;align-items:center;margin-right:2em;opacity:.5;gap:.5em}.pin-indicator mat-icon{width:16px;height:16px;font-size:16px}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i13.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: BantaMarkdownToHtmlPipe, name: "bantaMarkdownToHtml" }, { kind: "pipe", type: BantaMentionLinkerPipe, name: "mentionLinker" }] }); }
|
|
1078
1078
|
}
|
|
1079
1079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentComponent, decorators: [{
|
|
1080
1080
|
type: Component,
|
|
@@ -1849,11 +1849,11 @@ class CommentViewComponent {
|
|
|
1849
1849
|
return false;
|
|
1850
1850
|
}
|
|
1851
1851
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentViewComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1852
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommentViewComponent, isStandalone: false, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", collapsePins: "collapsePins", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", emptyStateMessage: "emptyStateMessage", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", pinned: "pinned", unpinned: "unpinned", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, queries: [{ propertyName: "inlineRepliesTemplate", first: true, predicate: BantaInlineRepliesDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n @if (!collapsePins) {\r\n @for (message of pinnedMessages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n } @empty {\r\n @if (showEmptyState) {\r\n <div class=\"banta-empty-state\">\r\n {{ emptyStateMessage }}\r\n </div>\r\n }\r\n }\r\n\r\n <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_more</mat-icon>\r\n {{ nextLabel }}\r\n </button>\r\n\r\n <div class=\"banta-nav-point banta-bottom-sticky\">\r\n @if (newestLast) {\r\n <button\r\n [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n matBadgePosition=\"after\" matBadgeSize=\"large\"\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_download</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (isLoadingMore) {\r\n <div class=\"banta-loading-more\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showDebug) {\r\n <div style=\"color: #666\">\r\n ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n dir={{newestLast ? '-1' : '1'}}\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div>\r\n }\r\n\r\n <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n </div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}::ng-deep .banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["busy", "message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
|
|
1852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommentViewComponent, isStandalone: false, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", collapsePins: "collapsePins", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", emptyStateMessage: "emptyStateMessage", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", pinned: "pinned", unpinned: "unpinned", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, queries: [{ propertyName: "inlineRepliesTemplate", first: true, predicate: BantaInlineRepliesDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n @if (!collapsePins) {\r\n @for (message of pinnedMessages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n } @empty {\r\n @if (showEmptyState) {\r\n <div class=\"banta-empty-state\">\r\n {{ emptyStateMessage }}\r\n </div>\r\n }\r\n }\r\n\r\n <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_more</mat-icon>\r\n {{ nextLabel }}\r\n </button>\r\n\r\n <div class=\"banta-nav-point banta-bottom-sticky\">\r\n @if (newestLast) {\r\n <button\r\n [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n matBadgePosition=\"after\" matBadgeSize=\"large\"\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_download</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (isLoadingMore) {\r\n <div class=\"banta-loading-more\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showDebug) {\r\n <div style=\"color: #666\">\r\n ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n dir={{newestLast ? '-1' : '1'}}\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div>\r\n }\r\n\r\n <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n </div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 2.5em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}::ng-deep .banta-empty-state{text-align:center;margin:.2em 3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["busy", "message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
|
|
1853
1853
|
}
|
|
1854
1854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentViewComponent, decorators: [{
|
|
1855
1855
|
type: Component,
|
|
1856
|
-
args: [{ selector: 'banta-comment-view', standalone: false, template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n @if (!collapsePins) {\r\n @for (message of pinnedMessages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n } @empty {\r\n @if (showEmptyState) {\r\n <div class=\"banta-empty-state\">\r\n {{ emptyStateMessage }}\r\n </div>\r\n }\r\n }\r\n\r\n <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_more</mat-icon>\r\n {{ nextLabel }}\r\n </button>\r\n\r\n <div class=\"banta-nav-point banta-bottom-sticky\">\r\n @if (newestLast) {\r\n <button\r\n [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n matBadgePosition=\"after\" matBadgeSize=\"large\"\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_download</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (isLoadingMore) {\r\n <div class=\"banta-loading-more\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showDebug) {\r\n <div style=\"color: #666\">\r\n ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n dir={{newestLast ? '-1' : '1'}}\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div>\r\n }\r\n\r\n <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n </div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em
|
|
1856
|
+
args: [{ selector: 'banta-comment-view', standalone: false, template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n @if (!collapsePins) {\r\n @for (message of pinnedMessages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\r\n class=\"abbreviated\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"allowReplies\"\r\n [editing]=\"message.transientState.editing\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = true\"\r\n (editStarted)=\"startEditing(message)\"\r\n (deleted)=\"deleteMessage(message)\"\r\n (editEnded)=\"message.transientState.editing = false\"\r\n (edited)=\"saveEdit(message, $event)\"\r\n (userSelected)=\"selectMessageUser(message)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(message)\"\r\n (pinned)=\"pinMessage(message, $event.options)\"\r\n (unpinned)=\"unpinMessage(message)\"\r\n (unliked)=\"unlikeMessage(message)\"\r\n (reported)=\"reportMessage(message)\"\r\n (selected)=\"selectMessage(message)\"\r\n (shared)=\"sharedMessage($event)\"\r\n />\r\n @if (selectedMessage === message) {\r\n <div class=\"banta-inline-replies-container\">\r\n <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n </div>\r\n }\r\n }\r\n } @empty {\r\n @if (showEmptyState) {\r\n <div class=\"banta-empty-state\">\r\n {{ emptyStateMessage }}\r\n </div>\r\n }\r\n }\r\n\r\n <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_more</mat-icon>\r\n {{ nextLabel }}\r\n </button>\r\n\r\n <div class=\"banta-nav-point banta-bottom-sticky\">\r\n @if (newestLast) {\r\n <button\r\n [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n matBadgePosition=\"after\" matBadgeSize=\"large\"\r\n mat-button\r\n class=\"banta-nav\"\r\n [class.visible]=\"shouldShowNewMessageIndicator\"\r\n href=\"javascript:;\"\r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_download</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (isLoadingMore) {\r\n <div class=\"banta-loading-more\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n\r\n @if (showDebug) {\r\n <div style=\"color: #666\">\r\n ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n dir={{newestLast ? '-1' : '1'}}\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div>\r\n }\r\n\r\n <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n </div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 2.5em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}::ng-deep .banta-empty-state{text-align:center;margin:.2em 3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"] }]
|
|
1857
1857
|
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }], propDecorators: { source: [{
|
|
1858
1858
|
type: Input
|
|
1859
1859
|
}], maxMessages: [{
|
|
@@ -2146,6 +2146,9 @@ class CommentFieldComponent {
|
|
|
2146
2146
|
root.appendChild(this.autocompleteEl.nativeElement);
|
|
2147
2147
|
}
|
|
2148
2148
|
}
|
|
2149
|
+
ngOnDestroy() {
|
|
2150
|
+
this.autocompleteEl.nativeElement.remove();
|
|
2151
|
+
}
|
|
2149
2152
|
get source() { return this._source; }
|
|
2150
2153
|
set source(value) { this.setSource(value); }
|
|
2151
2154
|
get permissionDeniedError() { return this._permissionDeniedError; }
|
|
@@ -2461,7 +2464,7 @@ class CommentFieldComponent {
|
|
|
2461
2464
|
alert(this.sendError.message);
|
|
2462
2465
|
}
|
|
2463
2466
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommentFieldComponent, isStandalone: false, selector: "banta-comment-field", inputs: { source: "source", user: "user", canComment: "canComment", signInState: "signInState", allowAttachments: "allowAttachments", transientMessage: "transientMessage", sendLabel: "sendLabel", signingInLabel: "signingInLabel", sendingLabel: "sendingLabel", label: "label", permissionDeniedLabel: "permissionDeniedLabel", signInLabel: "signInLabel", maxLength: "maxLength", placeholder: "placeholder", shouldInterceptMessageSend: "shouldInterceptMessageSend", hashtags: "hashtags", participants: "participants", genericAvatarUrl: "genericAvatarUrl", url: "url", submit: "submit", readonly: "readonly", allowServerInfoRequest: "allowServerInfoRequest" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", focusChange: "focusChange", textChanged: "textChanged", serverInfoRequested: "serverInfoRequested", reconnectRequested: "reconnectRequested", permissionDeniedError: "permissionDeniedError" }, host: { properties: { "class.can-comment": "this.canComment" } }, viewQueries: [{ propertyName: "autocompleteEl", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autocompleteContainerEl", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "textareaEl", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"banta-avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"banta-avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n ></a>\r\n </div>\r\n <div class=\"banta-text-container\">\r\n <div class=\"banta-field-container\">\r\n <div class=\"banta-field-row\">\r\n <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{label}}</mat-label>\r\n <textarea\r\n #textarea\r\n name=\"message\"\r\n attachmentScraper\r\n [(attachments)]=\"chatMessageAttachments\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n cdkTextareaAutosize\r\n [maxlength]=\"maxLength\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"sending || readonly\"\r\n [(ngModel)]=\"text\"\r\n autocomplete=\"off\"\r\n ></textarea>\r\n </mat-form-field>\r\n <div class=\"banta-options-line\">\r\n @if (indicatorState === 'transient') {\r\n <div class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n <mat-spinner [diameter]=\"15\"></mat-spinner>\r\n {{transientMessage}}\r\n </div>\r\n }\r\n @if (indicatorState === 'sending') {\r\n <div class=\"banta-transient-message\" [class.expanded]=\"true\" (click)=\"alertError()\">\r\n <mat-spinner [diameter]=\"15\"></mat-spinner>\r\n {{sendingLabel}}...\r\n </div>\r\n }\r\n @if (indicatorState === 'error') {\r\n <div class=\"banta-error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n @if (sendError) {\r\n <mat-icon>error</mat-icon>\r\n }\r\n {{sendError.message}}\r\n </div>\r\n }\r\n\r\n\r\n <div class=\"spacer\"></div>\r\n <div class=\"custom\">\r\n <ng-content></ng-content>\r\n </div>\r\n @if (allowAttachments) {\r\n <banta-attachment-button\r\n [disabled]=\"readonly\"\r\n (addedAttachment)=\"addedAttachment($event)\"\r\n (attachmentError)=\"attachmentError($event)\"\r\n ></banta-attachment-button>\r\n }\r\n <emoji-selector-button [disabled]=\"readonly\" (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n <mat-menu #overflowMenu>\r\n <button mat-menu-item (click)=\"reconnectRequested.next()\">\r\n <mat-icon>refresh</mat-icon>\r\n Reconnect\r\n </button>\r\n @if (allowServerInfoRequest) {\r\n <button mat-menu-item (click)=\"serverInfoRequested.next()\">\r\n <mat-icon>code</mat-icon>\r\n Server Information\r\n </button>\r\n }\r\n </mat-menu>\r\n <button mat-icon-button [mat-menu-trigger-for]=\"overflowMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <div #autocompleteContainer class=\"autocomplete-container\">\r\n <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n <div>\r\n <strong>{{completionPrefix}}</strong>...\r\n </div>\r\n @for (option of autocompleteOptions; track option; let index = $index) {\r\n <a\r\n mat-button\r\n (click)=\"activateAutoComplete(option)\"\r\n [class.active]=\"autoCompleteSelected === index\"\r\n >\r\n {{option.label}}\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n\r\n <banta-attachments\r\n [attachments]=\"chatMessageAttachments\"\r\n [editing]=\"true\"\r\n (remove)=\"removeAttachment($event)\"\r\n ></banta-attachments>\r\n </div>\r\n </div>\r\n <div class=\"banta-actions\">\r\n @if (!user) {\r\n <button\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n (click)=\"showSignIn()\"\r\n >{{signInLabel}}</button>\r\n }\r\n @if (user) {\r\n @if (buttonState === 'send') {\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!sendButtonEnabled\"\r\n >\r\n <mat-icon>chevron_right</mat-icon>\r\n <span class=\"label\">{{sendLabel}}</span>\r\n </button>\r\n }\r\n @if (buttonState === 'sending' || buttonState === 'signing-in') {\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!sendButtonEnabled\"\r\n >\r\n <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n <span class=\"label\">\r\n @if (buttonState === 'sending') {\r\n {{sendingLabel}}\r\n }\r\n @if (buttonState === 'signing-in') {\r\n {{signingInLabel}}\r\n }\r\n </span>\r\n </button>\r\n }\r\n @if (buttonState === 'permission-denied') {\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!sendButtonEnabled\"\r\n >\r\n {{permissionDeniedLabel}}\r\n </button>\r\n }\r\n }\r\n </div>\r\n</form>\r\n", styles: ["@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;animation-name:comment-field-appear;animation-duration:.8s;animation-delay:.4s;animation-fill-mode:both;position:relative;z-index:20}.banta-avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.banta-avatar-container .banta-avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .banta-text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .banta-text-container textarea{font-size:14pt;width:100%}form .banta-text-container textarea[disabled]{opacity:.5}form .banta-text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .banta-text-container .banta-options-line{display:flex;align-items:center}form .banta-text-container .banta-options-line>*{flex-shrink:0}form .banta-text-container .banta-options-line .banta-transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .banta-text-container .banta-options-line .banta-error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:2s max-width ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .banta-text-container .banta-options-line .banta-error-message.expanded,form .banta-text-container .banta-options-line .banta-error-message:hover{max-width:100%}form .banta-text-container .banta-options-line .banta-error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .banta-actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .banta-field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message .banta-actions button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:initial}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.banta-field-row,.card-attachment{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width: 500px){:host{margin:0}.banta-avatar-container{display:none;width:auto;flex-shrink:0}.banta-avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host:not(.can-comment) mat-form-field.message-field{display:none}:host:not(.can-comment) .banta-text-container{display:none}:host.can-comment button.send .label{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .banta-avatar-container{display:none;width:auto;flex-shrink:0}:host-context(.banta-mobile) .banta-avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) :host:not(.can-comment) .banta-text-container{display:none}:host-context(.banta-mobile) :host.can-comment button.send .label{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { 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: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "component", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["disabled", "overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AttachmentButtonComponent, selector: "banta-attachment-button", inputs: ["disabled"], outputs: ["addedAttachment", "attachmentError"] }, { kind: "directive", type: AttachmentScraperDirective, selector: "[attachmentScraper]", inputs: ["attachments"], outputs: ["attachmentsChange"] }] }); }
|
|
2467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommentFieldComponent, isStandalone: false, selector: "banta-comment-field", inputs: { source: "source", user: "user", canComment: "canComment", signInState: "signInState", allowAttachments: "allowAttachments", transientMessage: "transientMessage", sendLabel: "sendLabel", signingInLabel: "signingInLabel", sendingLabel: "sendingLabel", label: "label", permissionDeniedLabel: "permissionDeniedLabel", signInLabel: "signInLabel", maxLength: "maxLength", placeholder: "placeholder", shouldInterceptMessageSend: "shouldInterceptMessageSend", hashtags: "hashtags", participants: "participants", genericAvatarUrl: "genericAvatarUrl", url: "url", submit: "submit", readonly: "readonly", allowServerInfoRequest: "allowServerInfoRequest" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", focusChange: "focusChange", textChanged: "textChanged", serverInfoRequested: "serverInfoRequested", reconnectRequested: "reconnectRequested", permissionDeniedError: "permissionDeniedError" }, host: { properties: { "class.can-comment": "this.canComment" } }, viewQueries: [{ propertyName: "autocompleteEl", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autocompleteContainerEl", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "textareaEl", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"banta-avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"banta-avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n ></a>\r\n </div>\r\n <div class=\"banta-text-container\">\r\n <div class=\"banta-field-container\">\r\n <div class=\"banta-field-row\">\r\n <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{label}}</mat-label>\r\n <textarea\r\n #textarea\r\n name=\"message\"\r\n attachmentScraper\r\n [(attachments)]=\"chatMessageAttachments\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n cdkTextareaAutosize\r\n [maxlength]=\"maxLength\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"sending || readonly\"\r\n [(ngModel)]=\"text\"\r\n autocomplete=\"off\"\r\n ></textarea>\r\n </mat-form-field>\r\n <div class=\"banta-options-line\">\r\n @if (indicatorState === 'transient') {\r\n <div class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n <mat-spinner [diameter]=\"15\"></mat-spinner>\r\n {{transientMessage}}\r\n </div>\r\n }\r\n @if (indicatorState === 'sending') {\r\n <div class=\"banta-transient-message\" [class.expanded]=\"true\" (click)=\"alertError()\">\r\n <mat-spinner [diameter]=\"15\"></mat-spinner>\r\n {{sendingLabel}}...\r\n </div>\r\n }\r\n @if (indicatorState === 'error') {\r\n <div class=\"banta-error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n @if (sendError) {\r\n <mat-icon>error</mat-icon>\r\n }\r\n {{sendError.message}}\r\n </div>\r\n }\r\n\r\n\r\n <div class=\"spacer\"></div>\r\n <div class=\"custom\">\r\n <ng-content></ng-content>\r\n </div>\r\n @if (allowAttachments) {\r\n <banta-attachment-button\r\n [disabled]=\"readonly\"\r\n (addedAttachment)=\"addedAttachment($event)\"\r\n (attachmentError)=\"attachmentError($event)\"\r\n ></banta-attachment-button>\r\n }\r\n <emoji-selector-button [disabled]=\"readonly\" (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n <mat-menu #overflowMenu>\r\n <button mat-menu-item (click)=\"reconnectRequested.next()\">\r\n <mat-icon>refresh</mat-icon>\r\n Reconnect\r\n </button>\r\n @if (allowServerInfoRequest) {\r\n <button mat-menu-item (click)=\"serverInfoRequested.next()\">\r\n <mat-icon>code</mat-icon>\r\n Server Information\r\n </button>\r\n }\r\n </mat-menu>\r\n <button mat-icon-button [mat-menu-trigger-for]=\"overflowMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <div #autocompleteContainer class=\"autocomplete-container\">\r\n <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n <div>\r\n <strong>{{completionPrefix}}</strong>...\r\n </div>\r\n @for (option of autocompleteOptions; track option; let index = $index) {\r\n <a\r\n mat-button\r\n (click)=\"activateAutoComplete(option)\"\r\n [class.active]=\"autoCompleteSelected === index\"\r\n >\r\n {{option.label}}\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n\r\n <banta-attachments\r\n [attachments]=\"chatMessageAttachments\"\r\n [editing]=\"true\"\r\n (remove)=\"removeAttachment($event)\"\r\n ></banta-attachments>\r\n </div>\r\n </div>\r\n <div class=\"banta-actions\">\r\n @if (!user) {\r\n <button\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n (click)=\"showSignIn()\"\r\n >{{signInLabel}}</button>\r\n }\r\n @if (user) {\r\n @if (buttonState === 'send') {\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!sendButtonEnabled\"\r\n >\r\n <mat-icon>chevron_right</mat-icon>\r\n <span class=\"label\">{{sendLabel}}</span>\r\n </button>\r\n }\r\n @if (buttonState === 'sending' || buttonState === 'signing-in') {\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!sendButtonEnabled\"\r\n >\r\n <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n <span class=\"label\">\r\n @if (buttonState === 'sending') {\r\n {{sendingLabel}}\r\n }\r\n @if (buttonState === 'signing-in') {\r\n {{signingInLabel}}\r\n }\r\n </span>\r\n </button>\r\n }\r\n @if (buttonState === 'permission-denied') {\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"!sendButtonEnabled\"\r\n >\r\n {{permissionDeniedLabel}}\r\n </button>\r\n }\r\n }\r\n </div>\r\n</form>\r\n", styles: ["@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;animation-name:comment-field-appear;animation-duration:.8s;animation-delay:.4s;animation-fill-mode:both;position:relative;z-index:20}.banta-avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.banta-avatar-container .banta-avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .banta-text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .banta-text-container textarea{font-size:14pt;width:100%}form .banta-text-container textarea[disabled]{opacity:.5}form .banta-text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .banta-text-container .banta-options-line{display:flex;align-items:center}form .banta-text-container .banta-options-line>*{flex-shrink:0}form .banta-text-container .banta-options-line .banta-transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .banta-text-container .banta-options-line .banta-error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:2s max-width ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .banta-text-container .banta-options-line .banta-error-message.expanded,form .banta-text-container .banta-options-line .banta-error-message:hover{max-width:100%}form .banta-text-container .banta-options-line .banta-error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .banta-actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .banta-field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message .banta-actions button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:initial}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.banta-field-row,.card-attachment{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width: 500px){:host{margin:0}.banta-avatar-container{display:none;width:auto;flex-shrink:0}.banta-avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host:not(.can-comment) mat-form-field.message-field{display:none}:host:not(.can-comment) .banta-text-container{display:none}:host.can-comment button.send .label{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .banta-avatar-container{display:none;width:auto;flex-shrink:0}:host-context(.banta-mobile) .banta-avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) :host:not(.can-comment) .banta-text-container{display:none}:host-context(.banta-mobile) :host.can-comment button.send .label{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { 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: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "component", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["disabled", "overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AttachmentButtonComponent, selector: "banta-attachment-button", inputs: ["disabled"], outputs: ["addedAttachment", "attachmentError"] }, { kind: "directive", type: AttachmentScraperDirective, selector: "[attachmentScraper]", inputs: ["attachments"], outputs: ["attachmentsChange"] }] }); }
|
|
2465
2468
|
}
|
|
2466
2469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentFieldComponent, decorators: [{
|
|
2467
2470
|
type: Component,
|
|
@@ -3238,13 +3241,13 @@ class BantaCommentsComponent {
|
|
|
3238
3241
|
this.handleBackendExceptionAsAlert(e, `Could not edit message: `);
|
|
3239
3242
|
}
|
|
3240
3243
|
}
|
|
3241
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaCommentsComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }, { token: i2$
|
|
3244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaCommentsComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }, { token: i2$3.ActivatedRoute }, { token: i3$1.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3242
3245
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BantaCommentsComponent, isStandalone: false, selector: "banta-comments", inputs: { customMenuItems: "customMenuItems", url: "url", maxCommentLength: "maxCommentLength", loadingMessages: "loadingMessages", useInlineReplies: "useInlineReplies", signInLabel: "signInLabel", sendLabel: "sendLabel", signingInLabel: "signingInLabel", replyLabel: "replyLabel", sendingLabel: "sendingLabel", permissionDeniedLabel: "permissionDeniedLabel", postCommentLabel: "postCommentLabel", postReplyLabel: "postReplyLabel", allowAttachments: "allowAttachments", allowServerInfoRequest: "allowServerInfoRequest", fixedHeight: "fixedHeight", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", genericAvatarUrl: "genericAvatarUrl", shouldInterceptMessageSend: "shouldInterceptMessageSend", participants: "participants", source: "source", hashtags: "hashtags", topicID: "topicID", sortOrder: "sortOrder", filterMode: "filterMode", initialMessageCount: "initialMessageCount", metadata: "metadata" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", permissionDeniedError: "permissionDeniedError", upvoted: "upvoted", reported: "reported", selected: "selected", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", reconnectRequested: "reconnectRequested" }, host: { properties: { "class.banta-mobile": "this.isMobileSized" } }, queries: [{ propertyName: "sendReplyOptionsTemplate", first: true, predicate: BantaReplySendOptionsDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "commentView", first: true, predicate: ["commentView"], descendants: true }, { propertyName: "threadViewQuery", predicate: CommentViewComponent, descendants: true }], ngImport: i0, template: "@if (loading) {\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>{{loadingTitle}}</h1>\r\n <div>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n </div>\r\n}\r\n@if (!loading) {\r\n @if (selectedMessage && !useInlineReplies) {\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\">\r\n <div>\r\n <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Latest Comments\r\n </a>\r\n </div>\r\n <banta-comment\r\n [message]=\"selectedMessage\"\r\n [busy]=\"selectedMessage.transientState.liking\"\r\n [mine]=\"user?.id === selectedMessage.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"false\"\r\n [editing]=\"selectedMessage.transientState.editing\"\r\n [maxLength]=\"maxCommentLength\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (editStarted)=\"startEditing(selectedMessage)\"\r\n (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n (edited)=\"saveEdit(selectedMessage, $event)\"\r\n (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(source, selectedMessage)\"\r\n (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n (reported)=\"reportMessage(selectedMessage)\"\r\n (pinned)=\"pinMessage(source, selectedMessage, $event.options)\"\r\n (unpinned)=\"unpinMessage(source, selectedMessage)\"\r\n (selected)=\"toggleSelectedMessage(selectedMessage)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage(selectedMessage)\"\r\n ></banta-comment>\r\n <div class=\"replies\">\r\n @if (!selectedMessageThread) {\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n @if (selectedMessageThread) {\r\n <banta-comment-view\r\n class=\"replies\"\r\n #threadView\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"true\"\r\n emptyStateMessage=\"Be the first to reply!\"\r\n [newestLast]=\"true\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n [customMenuItems]=\"customMenuItems\"\r\n ></banta-comment-view>\r\n <banta-comment-field\r\n [url]=\"url\"\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signingInLabel]=\"signingInLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [readonly]=\"source?.readonly\"\r\n (signInSelected)=\"showSignIn()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n [source]=\"selectedMessageThread\"\r\n [maxLength]=\"maxCommentLength\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [signInState]=\"source?.signInState\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\r\n [submit]=\"sendReply\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n </banta-comment-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n <banta-comment-field\r\n [url]=\"url\"\r\n [source]=\"source\"\r\n [user]=\"user\"\r\n [sendLabel]=\"sendLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signingInLabel]=\"signingInLabel\"\r\n [signInLabel]=\"signInLabel\"\r\n [signInState]=\"source?.signInState\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\r\n [maxLength]=\"maxCommentLength\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [submit]=\"sendMessage\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n (serverInfoRequested)=\"showServerInfo()\"\r\n (reconnectRequested)=\"reconnect()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (signInSelected)=\"showSignIn()\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n >\r\n </banta-comment-field>\r\n @if (serverInfoVisible) {\r\n <div class=\"server-info\">\r\n <div class=\"server-info-header\">\r\n Server Info\r\n <div class=\"spacer\"></div>\r\n <button mat-icon-button matTooltip=\"Reload\" (click)=\"showServerInfo()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n <button mat-icon-button matTooltip=\"Hide\" (click)=\"serverInfoVisible = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n @if (serverInfoLoading) {\r\n <mat-spinner />\r\n } @else {\r\n <pre>{{ serverInfo | json }}</pre>\r\n }\r\n </div>\r\n }\r\n <mat-menu #filterMenu=\"matMenu\">\r\n @for (filter of filterModes; track filter) {\r\n <button mat-menu-item (click)=\"filterMode = filter\">\r\n {{filterModeLabels[filter]}}\r\n </button>\r\n }\r\n </mat-menu>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n @for (sort of sortOrders; track sort) {\r\n <button mat-menu-item (click)=\"sortOrder = sort\">\r\n {{sortOrderLabels[sort]}}\r\n </button>\r\n }\r\n </mat-menu>\r\n <div class=\"settings\">\r\n <button mat-button [matMenuTriggerFor]=\"filterMenu\">\r\n <mat-icon>filter_list</mat-icon>\r\n {{filterModeLabels[filterMode]}}\r\n </button>\r\n <button mat-button [matMenuTriggerFor]=\"sortMenu\">\r\n <mat-icon>sort</mat-icon>\r\n {{sortOrderLabels[sortOrder]}}\r\n </button>\r\n </div>\r\n @if (loadingSharedComment) {\r\n <div class=\"loading-comment\">\r\n <h1>Loading the comment you linked to...</h1>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n <p>\r\n If there are a lot of comments, this might take awhile!\r\n </p>\r\n </div>\r\n }\r\n @if (!loadingSharedComment && lastSharedCommentID) {\r\n <div class=\"loading-comment\">\r\n @if (sharedCommentMissing) {\r\n <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n <mat-icon>close</mat-icon>\r\n </a>\r\n <h1>\r\n <mat-icon>error</mat-icon>\r\n Uh oh!\r\n </h1>\r\n <p>The comment you linked to can't be found! It may have been removed.</p>\r\n }\r\n @if (!sharedCommentMissing) {\r\n <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n <mat-icon>close</mat-icon>\r\n </a>\r\n <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n <mat-icon>move_down</mat-icon> Jump to shared comment\r\n </button>\r\n }\r\n </div>\r\n }\r\n <banta-comment-view\r\n #commentView\r\n [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n [source]=\"source\"\r\n [fixedHeight]=\"fixedHeight\"\r\n [maxMessages]=\"maxMessages\"\r\n [maxVisibleMessages]=\"maxVisibleMessages\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [holdNewMessages]=\"selectedMessageVisible\"\r\n (userSelected)=\"selectMessageUser($event)\"\r\n (sortOrderChanged)=\"sortOrder = $event\"\r\n (filterModeChanged)=\"filterMode = $event\"\r\n (selected)=\"toggleSelectedMessage($event)\"\r\n (liked)=\"likeMessage(source, $event)\"\r\n (unliked)=\"unlikeMessage(source, $event)\"\r\n (pinned)=\"pinMessage(source, $event.message, $event.options)\"\r\n (unpinned)=\"unpinMessage(source, $event)\"\r\n (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n [selectedMessage]=\"selectedMessage\"\r\n (deleted)=\"deleteMessage($event)\"\r\n >\r\n <div class=\"inline-replies\" *bantaInlineReplies>\r\n @if (selectedMessage) {\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\">\r\n <div class=\"replies\">\r\n @if (!selectedMessageThread) {\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n @if (selectedMessageThread) {\r\n <banta-comment-view\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"true\"\r\n emptyStateMessage=\"Be the first to reply!\"\r\n [newestLast]=\"true\"\r\n [enableHoldOnClick]=\"false\"\r\n [holdNewMessages]=\"replyFieldFocused\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n />\r\n <banta-comment-field\r\n [url]=\"url\"\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signingInLabel]=\"signingInLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n (signInSelected)=\"showSignIn()\"\r\n [maxLength]=\"maxCommentLength\"\r\n [source]=\"selectedMessageThread\"\r\n [signInState]=\"source?.signInState\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n [readonly]=\"source?.readonly\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\r\n [submit]=\"sendReply\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (focusChange)=\"replyFieldFocused = $event\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n </banta-comment-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </banta-comment-view>\r\n </div>\r\n @if (connectionState === 'lost') {\r\n <div class=\"reconnecting\">\r\n <strong>Connection to Live Comments lost.</strong> Reconnecting...\r\n </div>\r\n }\r\n }\r\n", styles: [":host{display:flex;flex-direction:column}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:.4s opacity ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:.25s ease-in-out opacity}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:.25s ease-in-out opacity;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}.reconnecting{position:sticky;bottom:1em;background:#380a39;color:#926893;padding:1em;z-index:10;border-radius:4px;text-align:center}.settings{display:flex}.server-info{border:1px solid #0089ff;padding:0 .5em;border-radius:4px;margin:.5em 0}.server-info .server-info-header{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["busy", "message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "emptyStateMessage", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: CommentFieldComponent, selector: "banta-comment-field", inputs: ["source", "user", "canComment", "signInState", "allowAttachments", "transientMessage", "sendLabel", "signingInLabel", "sendingLabel", "label", "permissionDeniedLabel", "signInLabel", "maxLength", "placeholder", "shouldInterceptMessageSend", "hashtags", "participants", "genericAvatarUrl", "url", "submit", "readonly", "allowServerInfoRequest"], outputs: ["signInSelected", "editAvatarSelected", "focusChange", "textChanged", "serverInfoRequested", "reconnectRequested", "permissionDeniedError"] }, { kind: "directive", type: BantaInlineRepliesDirective, selector: "[bantaInlineReplies]" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }] }); }
|
|
3243
3246
|
}
|
|
3244
3247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaCommentsComponent, decorators: [{
|
|
3245
3248
|
type: Component,
|
|
3246
3249
|
args: [{ selector: 'banta-comments', standalone: false, template: "@if (loading) {\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>{{loadingTitle}}</h1>\r\n <div>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n </div>\r\n}\r\n@if (!loading) {\r\n @if (selectedMessage && !useInlineReplies) {\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\">\r\n <div>\r\n <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Latest Comments\r\n </a>\r\n </div>\r\n <banta-comment\r\n [message]=\"selectedMessage\"\r\n [busy]=\"selectedMessage.transientState.liking\"\r\n [mine]=\"user?.id === selectedMessage.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n [showReplyAction]=\"false\"\r\n [editing]=\"selectedMessage.transientState.editing\"\r\n [maxLength]=\"maxCommentLength\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n (editStarted)=\"startEditing(selectedMessage)\"\r\n (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n (edited)=\"saveEdit(selectedMessage, $event)\"\r\n (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (liked)=\"likeMessage(source, selectedMessage)\"\r\n (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n (reported)=\"reportMessage(selectedMessage)\"\r\n (pinned)=\"pinMessage(source, selectedMessage, $event.options)\"\r\n (unpinned)=\"unpinMessage(source, selectedMessage)\"\r\n (selected)=\"toggleSelectedMessage(selectedMessage)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage(selectedMessage)\"\r\n ></banta-comment>\r\n <div class=\"replies\">\r\n @if (!selectedMessageThread) {\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n @if (selectedMessageThread) {\r\n <banta-comment-view\r\n class=\"replies\"\r\n #threadView\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"true\"\r\n emptyStateMessage=\"Be the first to reply!\"\r\n [newestLast]=\"true\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n [customMenuItems]=\"customMenuItems\"\r\n ></banta-comment-view>\r\n <banta-comment-field\r\n [url]=\"url\"\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signingInLabel]=\"signingInLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [readonly]=\"source?.readonly\"\r\n (signInSelected)=\"showSignIn()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n [source]=\"selectedMessageThread\"\r\n [maxLength]=\"maxCommentLength\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [signInState]=\"source?.signInState\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\r\n [submit]=\"sendReply\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n </banta-comment-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n <banta-comment-field\r\n [url]=\"url\"\r\n [source]=\"source\"\r\n [user]=\"user\"\r\n [sendLabel]=\"sendLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signingInLabel]=\"signingInLabel\"\r\n [signInLabel]=\"signInLabel\"\r\n [signInState]=\"source?.signInState\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\r\n [maxLength]=\"maxCommentLength\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [submit]=\"sendMessage\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [readonly]=\"source?.readonly\"\r\n [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n (serverInfoRequested)=\"showServerInfo()\"\r\n (reconnectRequested)=\"reconnect()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (signInSelected)=\"showSignIn()\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n >\r\n </banta-comment-field>\r\n @if (serverInfoVisible) {\r\n <div class=\"server-info\">\r\n <div class=\"server-info-header\">\r\n Server Info\r\n <div class=\"spacer\"></div>\r\n <button mat-icon-button matTooltip=\"Reload\" (click)=\"showServerInfo()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n <button mat-icon-button matTooltip=\"Hide\" (click)=\"serverInfoVisible = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n @if (serverInfoLoading) {\r\n <mat-spinner />\r\n } @else {\r\n <pre>{{ serverInfo | json }}</pre>\r\n }\r\n </div>\r\n }\r\n <mat-menu #filterMenu=\"matMenu\">\r\n @for (filter of filterModes; track filter) {\r\n <button mat-menu-item (click)=\"filterMode = filter\">\r\n {{filterModeLabels[filter]}}\r\n </button>\r\n }\r\n </mat-menu>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n @for (sort of sortOrders; track sort) {\r\n <button mat-menu-item (click)=\"sortOrder = sort\">\r\n {{sortOrderLabels[sort]}}\r\n </button>\r\n }\r\n </mat-menu>\r\n <div class=\"settings\">\r\n <button mat-button [matMenuTriggerFor]=\"filterMenu\">\r\n <mat-icon>filter_list</mat-icon>\r\n {{filterModeLabels[filterMode]}}\r\n </button>\r\n <button mat-button [matMenuTriggerFor]=\"sortMenu\">\r\n <mat-icon>sort</mat-icon>\r\n {{sortOrderLabels[sortOrder]}}\r\n </button>\r\n </div>\r\n @if (loadingSharedComment) {\r\n <div class=\"loading-comment\">\r\n <h1>Loading the comment you linked to...</h1>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n <p>\r\n If there are a lot of comments, this might take awhile!\r\n </p>\r\n </div>\r\n }\r\n @if (!loadingSharedComment && lastSharedCommentID) {\r\n <div class=\"loading-comment\">\r\n @if (sharedCommentMissing) {\r\n <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n <mat-icon>close</mat-icon>\r\n </a>\r\n <h1>\r\n <mat-icon>error</mat-icon>\r\n Uh oh!\r\n </h1>\r\n <p>The comment you linked to can't be found! It may have been removed.</p>\r\n }\r\n @if (!sharedCommentMissing) {\r\n <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n <mat-icon>close</mat-icon>\r\n </a>\r\n <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n <mat-icon>move_down</mat-icon> Jump to shared comment\r\n </button>\r\n }\r\n </div>\r\n }\r\n <banta-comment-view\r\n #commentView\r\n [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n [source]=\"source\"\r\n [fixedHeight]=\"fixedHeight\"\r\n [maxMessages]=\"maxMessages\"\r\n [maxVisibleMessages]=\"maxVisibleMessages\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n [customMenuItems]=\"customMenuItems\"\r\n [holdNewMessages]=\"selectedMessageVisible\"\r\n (userSelected)=\"selectMessageUser($event)\"\r\n (sortOrderChanged)=\"sortOrder = $event\"\r\n (filterModeChanged)=\"filterMode = $event\"\r\n (selected)=\"toggleSelectedMessage($event)\"\r\n (liked)=\"likeMessage(source, $event)\"\r\n (unliked)=\"unlikeMessage(source, $event)\"\r\n (pinned)=\"pinMessage(source, $event.message, $event.options)\"\r\n (unpinned)=\"unpinMessage(source, $event)\"\r\n (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n [selectedMessage]=\"selectedMessage\"\r\n (deleted)=\"deleteMessage($event)\"\r\n >\r\n <div class=\"inline-replies\" *bantaInlineReplies>\r\n @if (selectedMessage) {\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\">\r\n <div class=\"replies\">\r\n @if (!selectedMessageThread) {\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n }\r\n @if (selectedMessageThread) {\r\n <banta-comment-view\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"true\"\r\n emptyStateMessage=\"Be the first to reply!\"\r\n [newestLast]=\"true\"\r\n [enableHoldOnClick]=\"false\"\r\n [holdNewMessages]=\"replyFieldFocused\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n (reported)=\"reportMessage($event)\"\r\n (usernameSelected)=\"selectUsername($event)\"\r\n (avatarSelected)=\"selectAvatar($event)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage($event)\"\r\n />\r\n <banta-comment-field\r\n [url]=\"url\"\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signingInLabel]=\"signingInLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n (signInSelected)=\"showSignIn()\"\r\n [maxLength]=\"maxCommentLength\"\r\n [source]=\"selectedMessageThread\"\r\n [signInState]=\"source?.signInState\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [signInLabel]=\"signInLabel\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n [readonly]=\"source?.readonly\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [user]=\"user\"\r\n [label]=\"postReplyLabel\"\r\n [submit]=\"sendReply\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (focusChange)=\"replyFieldFocused = $event\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n </banta-comment-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </banta-comment-view>\r\n </div>\r\n @if (connectionState === 'lost') {\r\n <div class=\"reconnecting\">\r\n <strong>Connection to Live Comments lost.</strong> Reconnecting...\r\n </div>\r\n }\r\n }\r\n", styles: [":host{display:flex;flex-direction:column}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:.4s opacity ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:.25s ease-in-out opacity}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:.25s ease-in-out opacity;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}.reconnecting{position:sticky;bottom:1em;background:#380a39;color:#926893;padding:1em;z-index:10;border-radius:4px;text-align:center}.settings{display:flex}.server-info{border:1px solid #0089ff;padding:0 .5em;border-radius:4px;margin:.5em 0}.server-info .server-info-header{display:flex;align-items:center}\n"] }]
|
|
3247
|
-
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }, { type: i2$
|
|
3250
|
+
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }, { type: i2$3.ActivatedRoute }, { type: i3$1.MatSnackBar }, { type: i0.NgZone }], propDecorators: { isMobileSized: [{
|
|
3248
3251
|
type: HostBinding,
|
|
3249
3252
|
args: ['class.banta-mobile']
|
|
3250
3253
|
}], sendReplyOptionsTemplate: [{
|
|
@@ -3556,8 +3559,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3556
3559
|
* Chat component
|
|
3557
3560
|
*/
|
|
3558
3561
|
class BantaChatComponent {
|
|
3559
|
-
constructor(backend) {
|
|
3562
|
+
constructor(backend, matSnackBar) {
|
|
3560
3563
|
this.backend = backend;
|
|
3564
|
+
this.matSnackBar = matSnackBar;
|
|
3561
3565
|
this._subs = new Subscription();
|
|
3562
3566
|
this.user = null;
|
|
3563
3567
|
this._metadata = {};
|
|
@@ -3636,6 +3640,29 @@ class BantaChatComponent {
|
|
|
3636
3640
|
onReceived(message) {
|
|
3637
3641
|
this._received.next(message);
|
|
3638
3642
|
}
|
|
3643
|
+
handleBackendExceptionAsSnack(e, prefix = '') {
|
|
3644
|
+
try {
|
|
3645
|
+
this.handleBackendException(e, prefix);
|
|
3646
|
+
}
|
|
3647
|
+
catch (e) {
|
|
3648
|
+
console.log(`[Banta/Comments] Showed user error (via snack): '${e.message}'`);
|
|
3649
|
+
console.error(e);
|
|
3650
|
+
this.matSnackBar.open(e.message, undefined, { duration: 3000 });
|
|
3651
|
+
}
|
|
3652
|
+
}
|
|
3653
|
+
handleBackendException(e, prefix = '') {
|
|
3654
|
+
let errorMessage = e.message;
|
|
3655
|
+
if (errorMessage.startsWith('permission-denied|')) {
|
|
3656
|
+
errorMessage = errorMessage.replace(/^permission-denied\|/, '');
|
|
3657
|
+
if (errorMessage.startsWith(`app-handle|`)) {
|
|
3658
|
+
// If this is an error during authorizeAction on the backend, pass control to the user-provided
|
|
3659
|
+
// permission-denied handler.
|
|
3660
|
+
this.sendPermissionError(errorMessage.replace(/^app-handle\|/, ''));
|
|
3661
|
+
return;
|
|
3662
|
+
}
|
|
3663
|
+
}
|
|
3664
|
+
throw new Error(`${prefix}${errorMessage}`);
|
|
3665
|
+
}
|
|
3639
3666
|
showSignIn() {
|
|
3640
3667
|
this._signInSelected.next();
|
|
3641
3668
|
}
|
|
@@ -3663,8 +3690,23 @@ class BantaChatComponent {
|
|
|
3663
3690
|
this._reported.next(message);
|
|
3664
3691
|
}
|
|
3665
3692
|
async upvote(message) {
|
|
3666
|
-
|
|
3693
|
+
if (!this.user) {
|
|
3694
|
+
this.showSignIn();
|
|
3695
|
+
return;
|
|
3696
|
+
}
|
|
3667
3697
|
this._upvoted.next(message);
|
|
3698
|
+
message.transientState ??= {};
|
|
3699
|
+
message.transientState.liking = true;
|
|
3700
|
+
try {
|
|
3701
|
+
await this.source.likeMessage(message.id);
|
|
3702
|
+
}
|
|
3703
|
+
catch (e) {
|
|
3704
|
+
this.handleBackendExceptionAsSnack(e, 'Could not like this message: ');
|
|
3705
|
+
}
|
|
3706
|
+
finally {
|
|
3707
|
+
await new Promise(resolve => setTimeout(() => resolve(), 250));
|
|
3708
|
+
message.transientState.liking = false;
|
|
3709
|
+
}
|
|
3668
3710
|
}
|
|
3669
3711
|
get canChat() {
|
|
3670
3712
|
if (!this.user)
|
|
@@ -3704,13 +3746,13 @@ class BantaChatComponent {
|
|
|
3704
3746
|
console.error(e);
|
|
3705
3747
|
}
|
|
3706
3748
|
}
|
|
3707
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaChatComponent, deps: [{ token: ChatBackendBase }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3708
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BantaChatComponent, isStandalone: false, selector: "banta-chat", inputs: { shouldInterceptMessageSend: "shouldInterceptMessageSend", url: "url", source: "source", topicID: "topicID", metadata: "metadata", signInLabel: "signInLabel", sendLabel: "sendLabel", permissionDeniedLabel: "permissionDeniedLabel", messageFieldPlaceholder: "messageFieldPlaceholder", emptyLabel: "emptyLabel" }, outputs: { selected: "selected", reported: "reported", upvoted: "upvoted", userSelected: "userSelected", permissionDeniedError: "permissionDeniedError", signInSelected: "signInSelected", received: "received" }, viewQueries: [{ propertyName: "chatView", first: true, predicate: ["chatView"], descendants: true }, { propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<banta-chat-view\r\n #chatView\r\n [source]=\"source\"\r\n [emptyLabel]=\"emptyLabel\"\r\n (upvoted)=\"upvote($event)\"\r\n (reported)=\"report($event)\"\r\n (selected)=\"select($event)\"\r\n (received)=\"onReceived($event)\"\r\n (userSelected)=\"selectUser($event)\"\r\n></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n\r\n <div class=\"entry-container\">\r\n <input\r\n #input\r\n type=\"text\"\r\n name=\"message\"\r\n autocomplete=\"off\"\r\n enterkeyhint=\"send\"\r\n [placeholder]=\"messageFieldPlaceholder\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"newMessage.message\" />\r\n\r\n <emoji-selector-button\r\n (selected)=\"insertEmoji($event)\"\r\n overlayY=\"bottom\"\r\n overlayX=\"end\"\r\n originY=\"top\"\r\n ></emoji-selector-button>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n\r\n @if (!user) {\r\n <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n }\r\n @if (user) {\r\n @if (canChat) {\r\n <button [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n }\r\n @if (!canChat) {\r\n <button type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n }\r\n }\r\n </div>\r\n </form>", styles: [":host{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt;min-height:1px}.entry-container{display:flex;flex-direction:row;flex-grow:1;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:hover,.entry-container input:-webkit-autofill:focus{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0px 1000px #211e07 inset;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:initial}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#fff;color:#000;border:1px solid #ccc;width:100%;height:3.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:#000;color:#fff;border:1px solid #333}\n"], dependencies: [{ kind: "directive", type:
|
|
3749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaChatComponent, deps: [{ token: ChatBackendBase }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3750
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BantaChatComponent, isStandalone: false, selector: "banta-chat", inputs: { shouldInterceptMessageSend: "shouldInterceptMessageSend", url: "url", source: "source", topicID: "topicID", metadata: "metadata", signInLabel: "signInLabel", sendLabel: "sendLabel", permissionDeniedLabel: "permissionDeniedLabel", messageFieldPlaceholder: "messageFieldPlaceholder", emptyLabel: "emptyLabel" }, outputs: { selected: "selected", reported: "reported", upvoted: "upvoted", userSelected: "userSelected", permissionDeniedError: "permissionDeniedError", signInSelected: "signInSelected", received: "received" }, viewQueries: [{ propertyName: "chatView", first: true, predicate: ["chatView"], descendants: true }, { propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<banta-chat-view\r\n #chatView\r\n [source]=\"source\"\r\n [emptyLabel]=\"emptyLabel\"\r\n (upvoted)=\"upvote($event)\"\r\n (reported)=\"report($event)\"\r\n (selected)=\"select($event)\"\r\n (received)=\"onReceived($event)\"\r\n (userSelected)=\"selectUser($event)\"\r\n></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n\r\n <div class=\"entry-container\">\r\n <input\r\n #input\r\n type=\"text\"\r\n name=\"message\"\r\n autocomplete=\"off\"\r\n enterkeyhint=\"send\"\r\n [placeholder]=\"messageFieldPlaceholder\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"newMessage.message\" />\r\n\r\n <emoji-selector-button\r\n (selected)=\"insertEmoji($event)\"\r\n overlayY=\"bottom\"\r\n overlayX=\"end\"\r\n originY=\"top\"\r\n ></emoji-selector-button>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n\r\n @if (!user) {\r\n <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n }\r\n @if (user) {\r\n @if (canChat) {\r\n <button [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n }\r\n @if (!canChat) {\r\n <button type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n }\r\n }\r\n </div>\r\n </form>", styles: [":host{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt;min-height:1px}.entry-container{display:flex;flex-direction:row;flex-grow:1;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:hover,.entry-container input:-webkit-autofill:focus{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0px 1000px #211e07 inset;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:initial}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#fff;color:#000;border:1px solid #ccc;width:100%;height:3.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:#000;color:#fff;border:1px solid #333}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.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: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["disabled", "overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "component", type: ChatViewComponent, selector: "banta-chat-view", inputs: ["source", "maxMessages", "emptyLabel"], outputs: ["selected", "userSelected", "reported", "upvoted", "received"] }] }); }
|
|
3709
3751
|
}
|
|
3710
3752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaChatComponent, decorators: [{
|
|
3711
3753
|
type: Component,
|
|
3712
3754
|
args: [{ selector: 'banta-chat', standalone: false, template: "<banta-chat-view\r\n #chatView\r\n [source]=\"source\"\r\n [emptyLabel]=\"emptyLabel\"\r\n (upvoted)=\"upvote($event)\"\r\n (reported)=\"report($event)\"\r\n (selected)=\"select($event)\"\r\n (received)=\"onReceived($event)\"\r\n (userSelected)=\"selectUser($event)\"\r\n></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n\r\n <div class=\"entry-container\">\r\n <input\r\n #input\r\n type=\"text\"\r\n name=\"message\"\r\n autocomplete=\"off\"\r\n enterkeyhint=\"send\"\r\n [placeholder]=\"messageFieldPlaceholder\"\r\n (keydown)=\"onKeyDown($event)\"\r\n [(ngModel)]=\"newMessage.message\" />\r\n\r\n <emoji-selector-button\r\n (selected)=\"insertEmoji($event)\"\r\n overlayY=\"bottom\"\r\n overlayX=\"end\"\r\n originY=\"top\"\r\n ></emoji-selector-button>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n\r\n @if (!user) {\r\n <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n }\r\n @if (user) {\r\n @if (canChat) {\r\n <button [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n }\r\n @if (!canChat) {\r\n <button type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n }\r\n }\r\n </div>\r\n </form>", styles: [":host{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt;min-height:1px}.entry-container{display:flex;flex-direction:row;flex-grow:1;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:hover,.entry-container input:-webkit-autofill:focus{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0px 1000px #211e07 inset;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:initial}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#fff;color:#000;border:1px solid #ccc;width:100%;height:3.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:#000;color:#fff;border:1px solid #333}\n"] }]
|
|
3713
|
-
}], ctorParameters: () => [{ type: ChatBackendBase }], propDecorators: { shouldInterceptMessageSend: [{
|
|
3755
|
+
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i3$1.MatSnackBar }], propDecorators: { shouldInterceptMessageSend: [{
|
|
3714
3756
|
type: Input
|
|
3715
3757
|
}], url: [{
|
|
3716
3758
|
type: Input
|
|
@@ -4166,13 +4208,13 @@ class BantaComponent {
|
|
|
4166
4208
|
notifIsNotice(notif) { return notif.type === 'notice'; }
|
|
4167
4209
|
notifIsMention(notif) { return notif.type === 'mention'; }
|
|
4168
4210
|
notifIsReply(notif) { return notif.type === 'reply'; }
|
|
4169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaComponent, deps: [{ token: ChatBackendBase }, { token: i2$
|
|
4170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BantaComponent, isStandalone: false, selector: "banta", inputs: { topicID: "topicID", chatLabel: "chatLabel", commentsLabel: "commentsLabel", allowServerInfoRequest: "allowServerInfoRequest" }, outputs: { signInSelected: "signInSelected" }, host: { properties: { "class.point-focus": "this.hasPoint" } }, viewQueries: [{ propertyName: "firehose", first: true, predicate: ["firehose"], descendants: true, static: true }], ngImport: i0, template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n @if (currentUser) {\r\n <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n }\r\n @if (!currentUser) {\r\n <button mat-menu-item>Sign In</button>\r\n }\r\n <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n <div>\r\n <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <div>\r\n @if (currentUser) {\r\n <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n @{{currentUser.username}}\r\n </button>\r\n <button mat-icon-button (click)=\"showNotifications()\">\r\n <mat-icon>notification_important</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (!currentUser) {\r\n <button mat-button (click)=\"showSignIn()\">\r\n Sign In\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n <header>\r\n <div>\r\n <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n <div class=\"spacer\"></div>\r\n\r\n @if (currentUser) {\r\n <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n @{{currentUser.username}}\r\n </button>\r\n <button mat-icon-button (click)=\"showNotifications()\">\r\n <mat-icon>notification_important</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (!currentUser) {\r\n <button mat-button (click)=\"showSignIn()\">\r\n Sign In\r\n </button>\r\n }\r\n </div>\r\n </header>\r\n <banta-chat\r\n #firehose\r\n [source]=\"firehoseSource\"\r\n (signInSelected)=\"showSignIn()\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n (reported)=\"reportMessage($event)\"\r\n ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n <header>\r\n <div>\r\n <label>{{auxTitle}}</label>\r\n <div class=\"spacer\"></div>\r\n <button mat-icon-button (click)=\"auxOpen = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </header>\r\n <div class=\"aux-contents\">\r\n @if (auxMode === 'profile') {\r\n @if (profileUser) {\r\n <div>\r\n <strong style=\"font-size: 125%;\">\r\n {{profileUser.displayName}}\r\n </strong>\r\n @{{profileUser.username}}\r\n </div>\r\n <br/>\r\n <strong>Top Messages</strong>\r\n <div>\r\n <em>Not yet available</em>\r\n </div>\r\n <br/>\r\n <strong>Recent Messages</strong>\r\n <div>\r\n <em>Not yet available</em>\r\n </div>\r\n }\r\n }\r\n\r\n @if (auxMode === 'report') {\r\n <p>Are you sure you want to report this message?</p>\r\n <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n <div style=\"text-align: center;\">\r\n <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n \r\n <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n </div>\r\n }\r\n\r\n @if (auxMode === 'notifications') {\r\n @if (!notifications || notifications.length === 0) {\r\n <div>\r\n <em>You do not have any notifications yet</em>\r\n </div>\r\n }\r\n <div class=\"notifications\">\r\n @for (notif of notifications; track notif) {\r\n <div class=\"notification\">\r\n <div>\r\n @if (notifIsUpvote(notif)) {\r\n @{{notif.message?.user?.username}} upvoted your post\r\n <banta-live-message\r\n [message]=\"notif.message\"\r\n (upvoted)=\"upvoteMessage(notif.message)\"\r\n (reported)=\"reportMessage(notif.message)\"\r\n (selected)=\"goToMessage(notif.message)\">\r\n </banta-live-message>\r\n } @else if (notifIsNotice(notif)) {\r\n <div>\r\n {{notif.message}}\r\n </div>\r\n <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n {{notif.actionLabel}}\r\n </a>\r\n } @else if (notifIsMention(notif)) {\r\n You were mentioned by @{{notif.message?.user?.username}}\r\n <banta-live-message\r\n [message]=\"notif.message\"\r\n (upvoted)=\"upvoteMessage(notif.message)\"\r\n (reported)=\"reportMessage(notif.message)\"\r\n (selected)=\"goToMessage(notif.message)\">\r\n </banta-live-message>\r\n } @else if (notifIsReply(notif)) {\r\n @{{notif.replyMessage?.user?.username}} replied to your post\r\n <banta-live-message\r\n [message]=\"notif.replyMessage\"\r\n (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n (reported)=\"reportMessage(notif.replyMessage)\"\r\n (selected)=\"goToMessage(notif.replyMessage)\">\r\n </banta-live-message>\r\n }\r\n </div>\r\n <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n <header>\r\n <div>\r\n <label>{{commentsLabel}}</label>\r\n </div>\r\n </header>\r\n <div class=\"point-focus\">\r\n <div class=\"actions\">\r\n <button mat-button (click)=\"pointUnfocus()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Back\r\n </button>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n @if (pointOpen) {\r\n <div class=\"counted-action\">\r\n <div class=\"count-indicator\">\r\n {{pointOpen.likes}}\r\n </div>\r\n <button mat-icon-button>\r\n <mat-icon>thumb_up</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!pointSubChat) {\r\n <div>\r\n Error: No subchat\r\n </div>\r\n }\r\n\r\n @if (pointSubChat) {\r\n <banta-comment-view\r\n class=\"subcomments\"\r\n [newestLast]=\"true\"\r\n [allowReplies]=\"false\"\r\n [source]=\"pointSubChat\"\r\n (reported)=\"reportMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n >\r\n @if (pointOpen) {\r\n <banta-comment\r\n class=\"focused-comment\"\r\n data-before\r\n [showReplyAction]=\"false\"\r\n [message]=\"pointOpen\"\r\n [readonly]=\"pointSubChat?.readonly\"\r\n (upvoted)=\"upvoteMessage(pointOpen)\"\r\n (userSelected)=\"showProfile(pointOpen.user)\"\r\n (reported)=\"reportMessage(pointOpen)\"\r\n ></banta-comment>\r\n }\r\n <div class=\"message reply\">\r\n Reply:\r\n <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n <textarea\r\n name=\"message\"\r\n [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n <div class=\"actions\">\r\n <button [disabled]=\"!newPointSubMessage.message\"\r\n mat-raised-button color=\"primary\">Send</button>\r\n </div>\r\n </form>\r\n </div>\r\n </banta-comment-view>\r\n }\r\n </div>\r\n <div class=\"points-section\">\r\n <banta-comments\r\n [source]=\"pointSource\"\r\n [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n (signInSelected)=\"showSignIn()\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (reported)=\"reportMessage($event)\"\r\n (selected)=\"goToMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n ></banta-comments>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:row;padding:.5em;height:40em;position:relative}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #333}header{position:relative;margin-bottom:1em}header div{display:flex;align-items:center;height:30px}header button{color:#666}header label{text-transform:uppercase;z-index:1;font-size:12pt;letter-spacing:2px;font-weight:100;color:#333;margin:0 auto 0 0;display:block;width:fit-content;position:relative;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after{content:\"\";border:1px solid;border-color:#ccc;height:0px;width:100%;display:block;position:relative;z-index:0}.points{width:33%;max-width:50em;display:flex;flex-direction:column}:host.point-focus .points{width:66%;max-width:50em}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:initial}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{width:33%;margin-left:.5em;font-size:12pt;flex-shrink:0;max-width:30em;transition:.2s width ease-in,.2s max-width ease-in;position:relative}.points .points-section{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in;z-index:2}.points .point-focus{position:absolute;width:100%;inset:1.75em 0 0;padding:.5em;opacity:0;transition:.2s opacity ease-in;flex-grow:1;display:flex;flex-direction:column}.firehose{flex-grow:1;font-size:10pt;display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{width:0px;min-width:0px;overflow-x:hidden;transition:.4s width ease-out,.4s min-width ease-out;display:flex;flex-direction:column}.aux.open{width:30em;min-width:18em}.aux .aux-contents{width:30em;min-width:10em;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{display:block;text-align:right;font-size:9pt;color:#999}.message.reply{padding:1em}.tabs{display:none}@media (max-width: 1015px){:host{flex-direction:column}.tabs{display:flex;position:absolute;top:0;left:0;right:0;width:100%;z-index:10;backdrop-filter:blur(10px);background:#00000080}.points{width:100%;max-width:100%;margin-left:0}header{display:none}:host.point-focus .points{width:100%;max-width:100%}.aux{width:100%;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:#000}.points.focus,.firehose.focus,.aux.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}\n"], dependencies: [{ kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["busy", "message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "emptyStateMessage", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: BantaCommentsComponent, selector: "banta-comments", inputs: ["customMenuItems", "url", "maxCommentLength", "loadingMessages", "useInlineReplies", "signInLabel", "sendLabel", "signingInLabel", "replyLabel", "sendingLabel", "permissionDeniedLabel", "postCommentLabel", "postReplyLabel", "allowAttachments", "allowServerInfoRequest", "fixedHeight", "maxMessages", "maxVisibleMessages", "genericAvatarUrl", "shouldInterceptMessageSend", "participants", "source", "hashtags", "topicID", "sortOrder", "filterMode", "initialMessageCount", "metadata"], outputs: ["signInSelected", "editAvatarSelected", "permissionDeniedError", "upvoted", "reported", "selected", "userSelected", "usernameSelected", "avatarSelected", "shared", "reconnectRequested"] }, { kind: "component", type: BantaChatComponent, selector: "banta-chat", inputs: ["shouldInterceptMessageSend", "url", "source", "topicID", "metadata", "signInLabel", "sendLabel", "permissionDeniedLabel", "messageFieldPlaceholder", "emptyLabel"], outputs: ["selected", "reported", "upvoted", "userSelected", "permissionDeniedError", "signInSelected", "received"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: LiveMessageComponent, selector: "banta-live-message", inputs: ["message"], outputs: ["upvoted", "reported", "selected"] }] }); }
|
|
4211
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaComponent, deps: [{ token: ChatBackendBase }, { token: i2$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BantaComponent, isStandalone: false, selector: "banta", inputs: { topicID: "topicID", chatLabel: "chatLabel", commentsLabel: "commentsLabel", allowServerInfoRequest: "allowServerInfoRequest" }, outputs: { signInSelected: "signInSelected" }, host: { properties: { "class.point-focus": "this.hasPoint" } }, viewQueries: [{ propertyName: "firehose", first: true, predicate: ["firehose"], descendants: true, static: true }], ngImport: i0, template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n @if (currentUser) {\r\n <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n }\r\n @if (!currentUser) {\r\n <button mat-menu-item>Sign In</button>\r\n }\r\n <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n <div>\r\n <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <div>\r\n @if (currentUser) {\r\n <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n @{{currentUser.username}}\r\n </button>\r\n <button mat-icon-button (click)=\"showNotifications()\">\r\n <mat-icon>notification_important</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (!currentUser) {\r\n <button mat-button (click)=\"showSignIn()\">\r\n Sign In\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n <header>\r\n <div>\r\n <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n <div class=\"spacer\"></div>\r\n\r\n @if (currentUser) {\r\n <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n @{{currentUser.username}}\r\n </button>\r\n <button mat-icon-button (click)=\"showNotifications()\">\r\n <mat-icon>notification_important</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (!currentUser) {\r\n <button mat-button (click)=\"showSignIn()\">\r\n Sign In\r\n </button>\r\n }\r\n </div>\r\n </header>\r\n <banta-chat\r\n #firehose\r\n [source]=\"firehoseSource\"\r\n (signInSelected)=\"showSignIn()\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n (reported)=\"reportMessage($event)\"\r\n ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n <header>\r\n <div>\r\n <label>{{auxTitle}}</label>\r\n <div class=\"spacer\"></div>\r\n <button mat-icon-button (click)=\"auxOpen = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </header>\r\n <div class=\"aux-contents\">\r\n @if (auxMode === 'profile') {\r\n @if (profileUser) {\r\n <div>\r\n <strong style=\"font-size: 125%;\">\r\n {{profileUser.displayName}}\r\n </strong>\r\n @{{profileUser.username}}\r\n </div>\r\n <br/>\r\n <strong>Top Messages</strong>\r\n <div>\r\n <em>Not yet available</em>\r\n </div>\r\n <br/>\r\n <strong>Recent Messages</strong>\r\n <div>\r\n <em>Not yet available</em>\r\n </div>\r\n }\r\n }\r\n\r\n @if (auxMode === 'report') {\r\n <p>Are you sure you want to report this message?</p>\r\n <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n <div style=\"text-align: center;\">\r\n <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n \r\n <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n </div>\r\n }\r\n\r\n @if (auxMode === 'notifications') {\r\n @if (!notifications || notifications.length === 0) {\r\n <div>\r\n <em>You do not have any notifications yet</em>\r\n </div>\r\n }\r\n <div class=\"notifications\">\r\n @for (notif of notifications; track notif) {\r\n <div class=\"notification\">\r\n <div>\r\n @if (notifIsUpvote(notif)) {\r\n @{{notif.message?.user?.username}} upvoted your post\r\n <banta-live-message\r\n [message]=\"notif.message\"\r\n (upvoted)=\"upvoteMessage(notif.message)\"\r\n (reported)=\"reportMessage(notif.message)\"\r\n (selected)=\"goToMessage(notif.message)\">\r\n </banta-live-message>\r\n } @else if (notifIsNotice(notif)) {\r\n <div>\r\n {{notif.message}}\r\n </div>\r\n <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n {{notif.actionLabel}}\r\n </a>\r\n } @else if (notifIsMention(notif)) {\r\n You were mentioned by @{{notif.message?.user?.username}}\r\n <banta-live-message\r\n [message]=\"notif.message\"\r\n (upvoted)=\"upvoteMessage(notif.message)\"\r\n (reported)=\"reportMessage(notif.message)\"\r\n (selected)=\"goToMessage(notif.message)\">\r\n </banta-live-message>\r\n } @else if (notifIsReply(notif)) {\r\n @{{notif.replyMessage?.user?.username}} replied to your post\r\n <banta-live-message\r\n [message]=\"notif.replyMessage\"\r\n (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n (reported)=\"reportMessage(notif.replyMessage)\"\r\n (selected)=\"goToMessage(notif.replyMessage)\">\r\n </banta-live-message>\r\n }\r\n </div>\r\n <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n <header>\r\n <div>\r\n <label>{{commentsLabel}}</label>\r\n </div>\r\n </header>\r\n <div class=\"point-focus\">\r\n <div class=\"actions\">\r\n <button mat-button (click)=\"pointUnfocus()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Back\r\n </button>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n @if (pointOpen) {\r\n <div class=\"counted-action\">\r\n <div class=\"count-indicator\">\r\n {{pointOpen.likes}}\r\n </div>\r\n <button mat-icon-button>\r\n <mat-icon>thumb_up</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!pointSubChat) {\r\n <div>\r\n Error: No subchat\r\n </div>\r\n }\r\n\r\n @if (pointSubChat) {\r\n <banta-comment-view\r\n class=\"subcomments\"\r\n [newestLast]=\"true\"\r\n [allowReplies]=\"false\"\r\n [source]=\"pointSubChat\"\r\n (reported)=\"reportMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n >\r\n @if (pointOpen) {\r\n <banta-comment\r\n class=\"focused-comment\"\r\n data-before\r\n [showReplyAction]=\"false\"\r\n [message]=\"pointOpen\"\r\n [readonly]=\"pointSubChat?.readonly\"\r\n (upvoted)=\"upvoteMessage(pointOpen)\"\r\n (userSelected)=\"showProfile(pointOpen.user)\"\r\n (reported)=\"reportMessage(pointOpen)\"\r\n ></banta-comment>\r\n }\r\n <div class=\"message reply\">\r\n Reply:\r\n <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n <textarea\r\n name=\"message\"\r\n [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n <div class=\"actions\">\r\n <button [disabled]=\"!newPointSubMessage.message\"\r\n mat-raised-button color=\"primary\">Send</button>\r\n </div>\r\n </form>\r\n </div>\r\n </banta-comment-view>\r\n }\r\n </div>\r\n <div class=\"points-section\">\r\n <banta-comments\r\n [source]=\"pointSource\"\r\n [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n (signInSelected)=\"showSignIn()\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (reported)=\"reportMessage($event)\"\r\n (selected)=\"goToMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n ></banta-comments>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:row;padding:.5em;height:40em;position:relative}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #333}header{position:relative;margin-bottom:1em}header div{display:flex;align-items:center;height:30px}header button{color:#666}header label{text-transform:uppercase;z-index:1;font-size:12pt;letter-spacing:2px;font-weight:100;color:#333;margin:0 auto 0 0;display:block;width:fit-content;position:relative;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after{content:\"\";border:1px solid;border-color:#ccc;height:0px;width:100%;display:block;position:relative;z-index:0}.points{width:33%;max-width:50em;display:flex;flex-direction:column}:host.point-focus .points{width:66%;max-width:50em}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:initial}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{width:33%;margin-left:.5em;font-size:12pt;flex-shrink:0;max-width:30em;transition:.2s width ease-in,.2s max-width ease-in;position:relative}.points .points-section{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in;z-index:2}.points .point-focus{position:absolute;width:100%;inset:1.75em 0 0;padding:.5em;opacity:0;transition:.2s opacity ease-in;flex-grow:1;display:flex;flex-direction:column}.firehose{flex-grow:1;font-size:10pt;display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{width:0px;min-width:0px;overflow-x:hidden;transition:.4s width ease-out,.4s min-width ease-out;display:flex;flex-direction:column}.aux.open{width:30em;min-width:18em}.aux .aux-contents{width:30em;min-width:10em;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{display:block;text-align:right;font-size:9pt;color:#999}.message.reply{padding:1em}.tabs{display:none}@media (max-width: 1015px){:host{flex-direction:column}.tabs{display:flex;position:absolute;top:0;left:0;right:0;width:100%;z-index:10;backdrop-filter:blur(10px);background:#00000080}.points{width:100%;max-width:100%;margin-left:0}header{display:none}:host.point-focus .points{width:100%;max-width:100%}.aux{width:100%;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:#000}.points.focus,.firehose.focus,.aux.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["busy", "message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "emptyStateMessage", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: BantaCommentsComponent, selector: "banta-comments", inputs: ["customMenuItems", "url", "maxCommentLength", "loadingMessages", "useInlineReplies", "signInLabel", "sendLabel", "signingInLabel", "replyLabel", "sendingLabel", "permissionDeniedLabel", "postCommentLabel", "postReplyLabel", "allowAttachments", "allowServerInfoRequest", "fixedHeight", "maxMessages", "maxVisibleMessages", "genericAvatarUrl", "shouldInterceptMessageSend", "participants", "source", "hashtags", "topicID", "sortOrder", "filterMode", "initialMessageCount", "metadata"], outputs: ["signInSelected", "editAvatarSelected", "permissionDeniedError", "upvoted", "reported", "selected", "userSelected", "usernameSelected", "avatarSelected", "shared", "reconnectRequested"] }, { kind: "component", type: BantaChatComponent, selector: "banta-chat", inputs: ["shouldInterceptMessageSend", "url", "source", "topicID", "metadata", "signInLabel", "sendLabel", "permissionDeniedLabel", "messageFieldPlaceholder", "emptyLabel"], outputs: ["selected", "reported", "upvoted", "userSelected", "permissionDeniedError", "signInSelected", "received"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: LiveMessageComponent, selector: "banta-live-message", inputs: ["message"], outputs: ["upvoted", "reported", "selected"] }] }); }
|
|
4171
4213
|
}
|
|
4172
4214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BantaComponent, decorators: [{
|
|
4173
4215
|
type: Component,
|
|
4174
4216
|
args: [{ selector: `banta`, standalone: false, template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n @if (currentUser) {\r\n <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{currentUser.username}})</button>\r\n }\r\n @if (!currentUser) {\r\n <button mat-menu-item>Sign In</button>\r\n }\r\n <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n <div>\r\n <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <div>\r\n @if (currentUser) {\r\n <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n @{{currentUser.username}}\r\n </button>\r\n <button mat-icon-button (click)=\"showNotifications()\">\r\n <mat-icon>notification_important</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (!currentUser) {\r\n <button mat-button (click)=\"showSignIn()\">\r\n Sign In\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n <header>\r\n <div>\r\n <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n <div class=\"spacer\"></div>\r\n\r\n @if (currentUser) {\r\n <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n @{{currentUser.username}}\r\n </button>\r\n <button mat-icon-button (click)=\"showNotifications()\">\r\n <mat-icon>notification_important</mat-icon>\r\n </button>\r\n }\r\n\r\n @if (!currentUser) {\r\n <button mat-button (click)=\"showSignIn()\">\r\n Sign In\r\n </button>\r\n }\r\n </div>\r\n </header>\r\n <banta-chat\r\n #firehose\r\n [source]=\"firehoseSource\"\r\n (signInSelected)=\"showSignIn()\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n (reported)=\"reportMessage($event)\"\r\n ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n <header>\r\n <div>\r\n <label>{{auxTitle}}</label>\r\n <div class=\"spacer\"></div>\r\n <button mat-icon-button (click)=\"auxOpen = false\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </header>\r\n <div class=\"aux-contents\">\r\n @if (auxMode === 'profile') {\r\n @if (profileUser) {\r\n <div>\r\n <strong style=\"font-size: 125%;\">\r\n {{profileUser.displayName}}\r\n </strong>\r\n @{{profileUser.username}}\r\n </div>\r\n <br/>\r\n <strong>Top Messages</strong>\r\n <div>\r\n <em>Not yet available</em>\r\n </div>\r\n <br/>\r\n <strong>Recent Messages</strong>\r\n <div>\r\n <em>Not yet available</em>\r\n </div>\r\n }\r\n }\r\n\r\n @if (auxMode === 'report') {\r\n <p>Are you sure you want to report this message?</p>\r\n <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n <div style=\"text-align: center;\">\r\n <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n \r\n <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n </div>\r\n }\r\n\r\n @if (auxMode === 'notifications') {\r\n @if (!notifications || notifications.length === 0) {\r\n <div>\r\n <em>You do not have any notifications yet</em>\r\n </div>\r\n }\r\n <div class=\"notifications\">\r\n @for (notif of notifications; track notif) {\r\n <div class=\"notification\">\r\n <div>\r\n @if (notifIsUpvote(notif)) {\r\n @{{notif.message?.user?.username}} upvoted your post\r\n <banta-live-message\r\n [message]=\"notif.message\"\r\n (upvoted)=\"upvoteMessage(notif.message)\"\r\n (reported)=\"reportMessage(notif.message)\"\r\n (selected)=\"goToMessage(notif.message)\">\r\n </banta-live-message>\r\n } @else if (notifIsNotice(notif)) {\r\n <div>\r\n {{notif.message}}\r\n </div>\r\n <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n {{notif.actionLabel}}\r\n </a>\r\n } @else if (notifIsMention(notif)) {\r\n You were mentioned by @{{notif.message?.user?.username}}\r\n <banta-live-message\r\n [message]=\"notif.message\"\r\n (upvoted)=\"upvoteMessage(notif.message)\"\r\n (reported)=\"reportMessage(notif.message)\"\r\n (selected)=\"goToMessage(notif.message)\">\r\n </banta-live-message>\r\n } @else if (notifIsReply(notif)) {\r\n @{{notif.replyMessage?.user?.username}} replied to your post\r\n <banta-live-message\r\n [message]=\"notif.replyMessage\"\r\n (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n (reported)=\"reportMessage(notif.replyMessage)\"\r\n (selected)=\"goToMessage(notif.replyMessage)\">\r\n </banta-live-message>\r\n }\r\n </div>\r\n <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n <header>\r\n <div>\r\n <label>{{commentsLabel}}</label>\r\n </div>\r\n </header>\r\n <div class=\"point-focus\">\r\n <div class=\"actions\">\r\n <button mat-button (click)=\"pointUnfocus()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n Back\r\n </button>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n @if (pointOpen) {\r\n <div class=\"counted-action\">\r\n <div class=\"count-indicator\">\r\n {{pointOpen.likes}}\r\n </div>\r\n <button mat-icon-button>\r\n <mat-icon>thumb_up</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!pointSubChat) {\r\n <div>\r\n Error: No subchat\r\n </div>\r\n }\r\n\r\n @if (pointSubChat) {\r\n <banta-comment-view\r\n class=\"subcomments\"\r\n [newestLast]=\"true\"\r\n [allowReplies]=\"false\"\r\n [source]=\"pointSubChat\"\r\n (reported)=\"reportMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n >\r\n @if (pointOpen) {\r\n <banta-comment\r\n class=\"focused-comment\"\r\n data-before\r\n [showReplyAction]=\"false\"\r\n [message]=\"pointOpen\"\r\n [readonly]=\"pointSubChat?.readonly\"\r\n (upvoted)=\"upvoteMessage(pointOpen)\"\r\n (userSelected)=\"showProfile(pointOpen.user)\"\r\n (reported)=\"reportMessage(pointOpen)\"\r\n ></banta-comment>\r\n }\r\n <div class=\"message reply\">\r\n Reply:\r\n <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n <textarea\r\n name=\"message\"\r\n [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n <div class=\"actions\">\r\n <button [disabled]=\"!newPointSubMessage.message\"\r\n mat-raised-button color=\"primary\">Send</button>\r\n </div>\r\n </form>\r\n </div>\r\n </banta-comment-view>\r\n }\r\n </div>\r\n <div class=\"points-section\">\r\n <banta-comments\r\n [source]=\"pointSource\"\r\n [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n (signInSelected)=\"showSignIn()\"\r\n (upvoted)=\"upvoteMessage($event)\"\r\n (reported)=\"reportMessage($event)\"\r\n (selected)=\"goToMessage($event)\"\r\n (userSelected)=\"showProfile($event.user)\"\r\n ></banta-comments>\r\n </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:row;padding:.5em;height:40em;position:relative}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #333}header{position:relative;margin-bottom:1em}header div{display:flex;align-items:center;height:30px}header button{color:#666}header label{text-transform:uppercase;z-index:1;font-size:12pt;letter-spacing:2px;font-weight:100;color:#333;margin:0 auto 0 0;display:block;width:fit-content;position:relative;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after{content:\"\";border:1px solid;border-color:#ccc;height:0px;width:100%;display:block;position:relative;z-index:0}.points{width:33%;max-width:50em;display:flex;flex-direction:column}:host.point-focus .points{width:66%;max-width:50em}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:initial}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{width:33%;margin-left:.5em;font-size:12pt;flex-shrink:0;max-width:30em;transition:.2s width ease-in,.2s max-width ease-in;position:relative}.points .points-section{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in;z-index:2}.points .point-focus{position:absolute;width:100%;inset:1.75em 0 0;padding:.5em;opacity:0;transition:.2s opacity ease-in;flex-grow:1;display:flex;flex-direction:column}.firehose{flex-grow:1;font-size:10pt;display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{width:0px;min-width:0px;overflow-x:hidden;transition:.4s width ease-out,.4s min-width ease-out;display:flex;flex-direction:column}.aux.open{width:30em;min-width:18em}.aux .aux-contents{width:30em;min-width:10em;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{display:block;text-align:right;font-size:9pt;color:#999}.message.reply{padding:1em}.tabs{display:none}@media (max-width: 1015px){:host{flex-direction:column}.tabs{display:flex;position:absolute;top:0;left:0;right:0;width:100%;z-index:10;backdrop-filter:blur(10px);background:#00000080}.points{width:100%;max-width:100%;margin-left:0}header{display:none}:host.point-focus .points{width:100%;max-width:100%}.aux{width:100%;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:#000}.points.focus,.firehose.focus,.aux.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}\n"] }]
|
|
4175
|
-
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i2$
|
|
4217
|
+
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i2$4.MatDialog }], propDecorators: { firehose: [{
|
|
4176
4218
|
type: ViewChild,
|
|
4177
4219
|
args: ['firehose', { static: true }]
|
|
4178
4220
|
}], topicID: [{
|
|
@@ -4214,6 +4256,7 @@ class ChatModule {
|
|
|
4214
4256
|
FormsModule,
|
|
4215
4257
|
MatIconModule,
|
|
4216
4258
|
MatButtonModule,
|
|
4259
|
+
MatSnackBarModule,
|
|
4217
4260
|
EmojiModule], exports: [ChatMessageComponent,
|
|
4218
4261
|
LiveChatMessageComponent,
|
|
4219
4262
|
ChatViewComponent,
|
|
@@ -4222,6 +4265,7 @@ class ChatModule {
|
|
|
4222
4265
|
FormsModule,
|
|
4223
4266
|
MatIconModule,
|
|
4224
4267
|
MatButtonModule,
|
|
4268
|
+
MatSnackBarModule,
|
|
4225
4269
|
EmojiModule] }); }
|
|
4226
4270
|
}
|
|
4227
4271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatModule, decorators: [{
|
|
@@ -4233,6 +4277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4233
4277
|
FormsModule,
|
|
4234
4278
|
MatIconModule,
|
|
4235
4279
|
MatButtonModule,
|
|
4280
|
+
MatSnackBarModule,
|
|
4236
4281
|
EmojiModule
|
|
4237
4282
|
],
|
|
4238
4283
|
exports: COMPONENTS$1
|
|
@@ -4258,7 +4303,7 @@ class CommentSortComponent {
|
|
|
4258
4303
|
return this._sortChange.asObservable();
|
|
4259
4304
|
}
|
|
4260
4305
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4261
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CommentSortComponent, isStandalone: false, selector: "banta-comment-sort", inputs: { sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Sort</mat-label>\r\n <mat-select [(value)]=\"sort\" >\r\n <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n </mat-select>\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$
|
|
4306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CommentSortComponent, isStandalone: false, selector: "banta-comment-sort", inputs: { sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Sort</mat-label>\r\n <mat-select [(value)]=\"sort\" >\r\n <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n </mat-select>\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
|
|
4262
4307
|
}
|
|
4263
4308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommentSortComponent, decorators: [{
|
|
4264
4309
|
type: Component,
|