@banta/sdk 4.0.15 → 4.0.16
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/bundles/banta-sdk.umd.js +57 -9
- package/bundles/banta-sdk.umd.js.map +1 -1
- package/bundles/banta-sdk.umd.min.js +1 -1
- package/bundles/banta-sdk.umd.min.js.map +1 -1
- package/esm2015/lib/comments/banta-comments/banta-comments.component.js +23 -5
- package/esm2015/lib/comments/comment-field/comment-field.component.js +1 -1
- package/esm2015/lib/emoji/emoji-selector-button.component.js +27 -22
- package/esm2015/lib/emoji/emoji-selector-panel/emoji-selector-panel.component.js +1 -1
- package/fesm2015/banta-sdk.js +49 -26
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/comments/banta-comments/banta-comments.component.d.ts +9 -3
- package/lib/emoji/emoji-selector-button.component.d.ts +3 -0
- package/package.json +1 -1
package/bundles/banta-sdk.umd.js
CHANGED
|
@@ -7097,7 +7097,7 @@
|
|
|
7097
7097
|
{ type: core.Component, args: [{
|
|
7098
7098
|
selector: 'emoji-selector-panel',
|
|
7099
7099
|
template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>",
|
|
7100
|
-
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)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s 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}}"]
|
|
7100
|
+
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:opacity .4s 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}"]
|
|
7101
7101
|
},] }
|
|
7102
7102
|
];
|
|
7103
7103
|
EmojiSelectorPanelComponent.ctorParameters = function () { return [
|
|
@@ -7107,6 +7107,7 @@
|
|
|
7107
7107
|
selected: [{ type: core.Output }]
|
|
7108
7108
|
};
|
|
7109
7109
|
|
|
7110
|
+
/// <reference types="@types/resize-observer-browser" />
|
|
7110
7111
|
var EmojiSelectorButtonComponent = /** @class */ (function () {
|
|
7111
7112
|
function EmojiSelectorButtonComponent(elementRef) {
|
|
7112
7113
|
this.elementRef = elementRef;
|
|
@@ -7124,6 +7125,11 @@
|
|
|
7124
7125
|
this.removeListener();
|
|
7125
7126
|
this.panelElement.nativeElement.remove();
|
|
7126
7127
|
};
|
|
7128
|
+
Object.defineProperty(EmojiSelectorButtonComponent.prototype, "widthConstrained", {
|
|
7129
|
+
get: function () { return this.width < 700; },
|
|
7130
|
+
enumerable: false,
|
|
7131
|
+
configurable: true
|
|
7132
|
+
});
|
|
7127
7133
|
EmojiSelectorButtonComponent.prototype.ngAfterViewInit = function () {
|
|
7128
7134
|
};
|
|
7129
7135
|
EmojiSelectorButtonComponent.prototype.putPanelAtRoot = function () {
|
|
@@ -7163,11 +7169,30 @@
|
|
|
7163
7169
|
this.showEmojiPanel = true;
|
|
7164
7170
|
//this.place();
|
|
7165
7171
|
setTimeout(function () {
|
|
7166
|
-
|
|
7172
|
+
var onResize = function () {
|
|
7167
7173
|
if (!_this.showEmojiPanel)
|
|
7168
7174
|
return;
|
|
7169
|
-
_this.
|
|
7175
|
+
_this.width = window.innerWidth;
|
|
7176
|
+
_this.height = window.innerHeight;
|
|
7177
|
+
var edgeOffset = 0;
|
|
7178
|
+
var commentField = _this.elementRef.nativeElement.closest("banta-comment-field");
|
|
7179
|
+
if (commentField) {
|
|
7180
|
+
var size = commentField.getBoundingClientRect();
|
|
7181
|
+
_this.width = size.width;
|
|
7182
|
+
edgeOffset = window.innerWidth - size.right;
|
|
7183
|
+
}
|
|
7184
|
+
var buttonRect = _this.buttonElement.nativeElement.getBoundingClientRect();
|
|
7185
|
+
var buttonRight = window.innerWidth - buttonRect.right - edgeOffset - 10;
|
|
7186
|
+
if (_this.width < 700) {
|
|
7187
|
+
_this.panelElement.nativeElement.style.right = -buttonRight + "px";
|
|
7188
|
+
}
|
|
7189
|
+
else {
|
|
7190
|
+
_this.panelElement.nativeElement.style.right = '';
|
|
7191
|
+
}
|
|
7192
|
+
_this.panelElement.nativeElement.style.maxWidth = _this.width - 15 + "px";
|
|
7170
7193
|
};
|
|
7194
|
+
_this.resizeListener = onResize;
|
|
7195
|
+
onResize();
|
|
7171
7196
|
_this.clickListener = function (ev) {
|
|
7172
7197
|
var parent = ev.target;
|
|
7173
7198
|
var isInDialog = false;
|
|
@@ -7194,7 +7219,7 @@
|
|
|
7194
7219
|
{ type: core.Component, args: [{
|
|
7195
7220
|
selector: 'emoji-selector-button',
|
|
7196
7221
|
template: "\n <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n <mat-icon>emoji_emotions</mat-icon>\n </button>\n <emoji-selector-panel \n #panel\n (selected)=\"insert($event)\"\n [class.visible]=\"showEmojiPanel\"\n ></emoji-selector-panel>\n ",
|
|
7197
|
-
styles: ["\n :host {\n display: block;\n position: relative;\n }\n\n emoji-selector-panel {\n position: absolute;\n top: 2.5em;\n right: 0;\n opacity: 0;\n pointer-events: none;\n z-index: 10;\n }\n\n emoji-selector-panel.visible {\n pointer-events: initial;\n opacity: 1;\n }\n\n button {\n color: #666\n }\n
|
|
7222
|
+
styles: ["\n :host {\n display: block;\n position: relative;\n }\n\n emoji-selector-panel {\n position: absolute;\n top: 2.5em;\n right: 0;\n opacity: 0;\n pointer-events: none;\n z-index: 10;\n }\n\n emoji-selector-panel.visible {\n pointer-events: initial;\n opacity: 1;\n }\n\n button {\n color: #666\n }\n "]
|
|
7198
7223
|
},] }
|
|
7199
7224
|
];
|
|
7200
7225
|
EmojiSelectorButtonComponent.ctorParameters = function () { return [
|
|
@@ -7203,7 +7228,8 @@
|
|
|
7203
7228
|
EmojiSelectorButtonComponent.propDecorators = {
|
|
7204
7229
|
selected: [{ type: core.Output }],
|
|
7205
7230
|
panelElement: [{ type: core.ViewChild, args: ['panel', { read: core.ElementRef },] }],
|
|
7206
|
-
buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }]
|
|
7231
|
+
buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }],
|
|
7232
|
+
widthConstrained: [{ type: core.HostBinding, args: ['class.width-constrained',] }]
|
|
7207
7233
|
};
|
|
7208
7234
|
|
|
7209
7235
|
var COMPONENTS$1 = [
|
|
@@ -8664,12 +8690,13 @@
|
|
|
8664
8690
|
* Comments component
|
|
8665
8691
|
*/
|
|
8666
8692
|
var BantaCommentsComponent = /** @class */ (function () {
|
|
8667
|
-
function BantaCommentsComponent(backend, elementRef, activatedRoute, matSnackBar) {
|
|
8693
|
+
function BantaCommentsComponent(backend, elementRef, activatedRoute, matSnackBar, ngZone) {
|
|
8668
8694
|
var _this = this;
|
|
8669
8695
|
this.backend = backend;
|
|
8670
8696
|
this.elementRef = elementRef;
|
|
8671
8697
|
this.activatedRoute = activatedRoute;
|
|
8672
8698
|
this.matSnackBar = matSnackBar;
|
|
8699
|
+
this.ngZone = ngZone;
|
|
8673
8700
|
// Loading Screen
|
|
8674
8701
|
this._loadingMessage = '';
|
|
8675
8702
|
this.loadingMessageVisible = false;
|
|
@@ -8813,8 +8840,27 @@
|
|
|
8813
8840
|
}
|
|
8814
8841
|
}
|
|
8815
8842
|
};
|
|
8843
|
+
Object.defineProperty(BantaCommentsComponent.prototype, "isMobileSized", {
|
|
8844
|
+
get: function () { return this.width < 500; },
|
|
8845
|
+
enumerable: false,
|
|
8846
|
+
configurable: true
|
|
8847
|
+
});
|
|
8848
|
+
BantaCommentsComponent.prototype.ngAfterViewInit = function () {
|
|
8849
|
+
var _this = this;
|
|
8850
|
+
var callback = function () {
|
|
8851
|
+
var size = _this.elementRef.nativeElement.getBoundingClientRect();
|
|
8852
|
+
_this.ngZone.run(function () {
|
|
8853
|
+
_this.width = size.width;
|
|
8854
|
+
_this.height = size.height;
|
|
8855
|
+
});
|
|
8856
|
+
};
|
|
8857
|
+
this.resizeObserver = new ResizeObserver(callback);
|
|
8858
|
+
this.resizeObserver.observe(this.elementRef.nativeElement);
|
|
8859
|
+
callback();
|
|
8860
|
+
};
|
|
8816
8861
|
BantaCommentsComponent.prototype.ngOnDestroy = function () {
|
|
8817
8862
|
this._subs.unsubscribe();
|
|
8863
|
+
this.resizeObserver.disconnect();
|
|
8818
8864
|
};
|
|
8819
8865
|
BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
|
|
8820
8866
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -9366,16 +9412,18 @@
|
|
|
9366
9412
|
{ type: core.Component, args: [{
|
|
9367
9413
|
selector: 'banta-comments',
|
|
9368
9414
|
template: "<ng-container *ngIf=\"loading\">\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>Loading Comments</h1>\r\n <div>\r\n <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n\r\n <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\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\r\n <banta-comment\r\n [message]=\"selectedMessage\"\r\n [liking]=\"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 [genericAvatarUrl]=\"genericAvatarUrl\"\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 (selected)=\"selectMessage(selectedMessage)\"\r\n (shared)=\"shareMessage($event)\"\r\n (deleted)=\"deleteMessage(selectedMessage)\"\r\n ></banta-comment>\r\n\r\n <div class=\"replies\">\r\n\r\n <ng-container *ngIf=\"!selectedMessageThread\">\r\n <div class=\"loading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedMessageThread\">\r\n <banta-comment-view\r\n [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"false\"\r\n [newestLast]=\"true\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n (unliked)=\"unlikeMessage(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 ></banta-comment-view>\r\n\r\n <banta-comment-field\r\n [sendLabel]=\"replyLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n (signInSelected)=\"showSignIn()\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n [source]=\"selectedMessageThread\"\r\n [canComment]=\"source?.permissions?.canPost\"\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-content select=\".reply-send-options\"></ng-content>\r\n </banta-comment-field>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main\" [class.hidden]=\"selectedMessage\">\r\n <banta-comment-field\r\n [source]=\"source\"\r\n [user]=\"user\"\r\n [sendLabel]=\"sendLabel\"\r\n [sendingLabel]=\"sendingLabel\"\r\n [signInLabel]=\"signInLabel\"\r\n [canComment]=\"source?.permissions?.canPost\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\r\n (editAvatarSelected)=\"showEditAvatar()\"\r\n (signInSelected)=\"showSignIn()\"\r\n [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n [submit]=\"sendMessage\"\r\n [allowAttachments]=\"allowAttachments\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n >\r\n \r\n </banta-comment-field>\r\n\r\n <banta-comment-sort\r\n [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n <banta-comment-view\r\n [class.faded]=\"selectedMessage\"\r\n [source]=\"source\"\r\n [fixedHeight]=\"fixedHeight\"\r\n [maxMessages]=\"maxMessages\"\r\n [maxVisibleMessages]=\"maxVisibleMessages\"\r\n [genericAvatarUrl]=\"genericAvatarUrl\"\r\n (userSelected)=\"selectMessageUser($event)\"\r\n (sortOrderChanged)=\"sortOrder = $event\"\r\n (selected)=\"selectMessage($event)\"\r\n (liked)=\"likeMessage(source, $event)\"\r\n (unliked)=\"unlikeMessage(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 (deleted)=\"deleteMessage($event)\"\r\n ></banta-comment-view>\r\n </div>\r\n</ng-container>\r\n",
|
|
9369
|
-
styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}
|
|
9415
|
+
styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.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:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}@media (max-width:500px){.focused .replies{margin-left:0}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}"]
|
|
9370
9416
|
},] }
|
|
9371
9417
|
];
|
|
9372
9418
|
BantaCommentsComponent.ctorParameters = function () { return [
|
|
9373
9419
|
{ type: ChatBackendBase },
|
|
9374
9420
|
{ type: core.ElementRef },
|
|
9375
9421
|
{ type: router.ActivatedRoute },
|
|
9376
|
-
{ type: snackBar.MatSnackBar }
|
|
9422
|
+
{ type: snackBar.MatSnackBar },
|
|
9423
|
+
{ type: core.NgZone }
|
|
9377
9424
|
]; };
|
|
9378
9425
|
BantaCommentsComponent.propDecorators = {
|
|
9426
|
+
isMobileSized: [{ type: core.HostBinding, args: ['class.banta-mobile',] }],
|
|
9379
9427
|
loadingMessages: [{ type: core.Input }],
|
|
9380
9428
|
signInLabel: [{ type: core.Input }],
|
|
9381
9429
|
sendLabel: [{ type: core.Input }],
|
|
@@ -9769,7 +9817,7 @@
|
|
|
9769
9817
|
{ type: core.Component, args: [{
|
|
9770
9818
|
selector: 'banta-comment-field',
|
|
9771
9819
|
template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n ></a>\r\n </div>\r\n <div class=\"text-container\">\r\n <div class=\"field-container\">\r\n <div class=\"field-row\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{label}}</mat-label>\r\n <textarea\r\n #textarea\r\n name=\"message\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n cdkTextareaAutosize\r\n (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"sending\"\r\n [(ngModel)]=\"text\"></textarea>\r\n </mat-form-field>\r\n <div class=\"options-line\">\r\n <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n {{sendError.message}}\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <div class=\"custom\">\r\n <ng-content></ng-content>\r\n </div>\r\n <banta-attachment-button (addedAttachment)=\"addedAttachment($event)\" *ngIf=\"allowAttachments\"></banta-attachment-button>\r\n <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-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 <a\r\n mat-button\r\n *ngFor=\"let option of autocompleteOptions; index as index\"\r\n (click)=\"activateAutoComplete(option)\"\r\n [class.active]=\"autoCompleteSelected === index\"\r\n >\r\n {{option.label}}\r\n </a>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"chatMessageAttachments && chatMessageAttachments.length\" class=\"message-attachments-container\">\r\n <div *ngFor=\"let attachment of chatMessageAttachments; index as attachmentIndex\"\r\n class=\"message-attachment\">\r\n <button (click)=\"removeAttachment(attachmentIndex)\" mat-mini-fab color=\"primary\" class=\"remove-img\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!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 </ng-container>\r\n <ng-container *ngIf=\"user\">\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"canComment && ((!text && !chatMessageAttachments.length) || sending)\"\r\n >\r\n <ng-container *ngIf=\"canComment\">\r\n <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n </ng-container>\r\n <span class=\"label\">\r\n <ng-container *ngIf=\"!canComment\">\r\n {{permissionDeniedLabel}}\r\n </ng-container>\r\n <ng-container *ngIf=\"canComment\">\r\n <ng-container *ngIf=\"!sending\">\r\n {{sendLabel}}\r\n </ng-container>\r\n <ng-container *ngIf=\"sending\">\r\n {{sendingLabel}}\r\n </ng-container>\r\n </ng-container>\r\n </span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</form>",
|
|
9772
|
-
styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative;z-index:
|
|
9820
|
+
styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative;z-index:10}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .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 .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 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:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}:host-context(.banta-mobile) button.send .label{display:none}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.message-attachments-container .message-attachment img{width:300px;border-radius:10px}.message-attachments-container .message-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row{position:relative}"]
|
|
9773
9821
|
},] }
|
|
9774
9822
|
];
|
|
9775
9823
|
CommentFieldComponent.propDecorators = {
|