@banta/sdk 4.0.5 → 4.0.8
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 +55 -46
- 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/attachment-button/attachment-button.component.js +58 -0
- package/esm2015/lib/comments/banta-comments/banta-comments.component.js +1 -1
- package/esm2015/lib/comments/comment/comment.component.js +2 -2
- package/esm2015/lib/comments/comment-field/comment-field.component.js +16 -5
- package/esm2015/lib/comments/comment-sort/comment-sort.component.js +3 -3
- package/esm2015/lib/comments/comments.module.js +3 -5
- package/esm2015/lib/comments/index.js +2 -2
- package/esm2015/lib/common/index.js +2 -1
- package/esm2015/lib/common/lightbox/lightbox.component.js +1 -1
- package/fesm2015/banta-sdk.js +43 -37
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/comments/{attachment/attachment.component.d.ts → attachment-button/attachment-button.component.d.ts} +1 -1
- package/lib/comments/comment-field/comment-field.component.d.ts +1 -0
- package/lib/comments/index.d.ts +1 -1
- package/lib/common/index.d.ts +1 -0
- package/package.json +12 -12
- package/esm2015/lib/comments/attachment/attachment.component.js +0 -45
- package/esm2015/lib/common/safe-url.pipe.js +0 -19
- package/lib/common/safe-url.pipe.d.ts +0 -7
package/bundles/banta-sdk.umd.js
CHANGED
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
{ type: core.Component, args: [{
|
|
145
145
|
selector: 'banta-lightbox',
|
|
146
146
|
template: "<div \r\n class=\"banta-lightbox-container\" \r\n #container\r\n [class.open]=\"isOpen\"\r\n >\r\n\r\n <a class=\"underlay\" (click)=\"close()\" href=\"javascript:;\"></a>\r\n\r\n <a class=\"close-button\" href=\"javascript:;\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </a>\r\n\r\n <img [src]=\"currentImage\" />\r\n</div>\r\n",
|
|
147
|
-
styles: ["::ng-deep .banta-lightbox-container{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:rgba(0,0,0,.75);color:#fff;z-index:10000;transition:opacity .25s ease-in-out;display:flex;align-items:center;justify-content:center}::ng-deep .banta-lightbox-container a.underlay{z-index:0;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}::ng-deep .banta-lightbox-container img{z-index:10}::ng-deep .banta-lightbox-container.open{opacity:1;pointer-events:auto}::ng-deep .banta-lightbox-container a.close-button{position:absolute;top:0;right:0;padding:.75em;z-index:20}"]
|
|
147
|
+
styles: ["::ng-deep .banta-lightbox-container{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:rgba(0,0,0,.75);color:#fff;z-index:10000;transition:opacity .25s ease-in-out;display:flex;align-items:center;justify-content:center}::ng-deep .banta-lightbox-container a.underlay{z-index:0;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}::ng-deep .banta-lightbox-container img{z-index:10;max-width:95%}::ng-deep .banta-lightbox-container.open{opacity:1;pointer-events:auto}::ng-deep .banta-lightbox-container a.close-button{position:absolute;top:0;right:0;padding:.75em;z-index:20}"]
|
|
148
148
|
},] }
|
|
149
149
|
];
|
|
150
150
|
LightboxComponent.propDecorators = {
|
|
@@ -8304,7 +8304,7 @@
|
|
|
8304
8304
|
CommentComponent.decorators = [
|
|
8305
8305
|
{ type: core.Component, args: [{
|
|
8306
8306
|
selector: 'banta-comment',
|
|
8307
|
-
template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n <div class=\"user\">\r\n <a\r\n href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"selectAvatar(message.user)\"\r\n [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n <span class=\"spacer\"></span>\r\n </div>\r\n <div class=\"content\" *ngIf=\"!editing\">\r\n {{message.message}}\r\n\r\n <ng-container *ngIf=\"message.attachments?.length > 0\">\r\n <banta-lightbox #lightbox></banta-lightbox>\r\n <div class=\"attachments-row\" [class.single]=\"message.attachments?.length === 1\">\r\n <a \r\n href=\"javascript:;\" \r\n (click)=\"showLightbox(attachment)\"\r\n *ngFor=\"let attachment of message.attachments\" \r\n >\r\n <img [src]=\"attachment.url
|
|
8307
|
+
template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n <div class=\"user\">\r\n <a\r\n href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"selectAvatar(message.user)\"\r\n [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n <span class=\"spacer\"></span>\r\n </div>\r\n <div class=\"content\" *ngIf=\"!editing\">\r\n {{message.message}}\r\n\r\n <ng-container *ngIf=\"message.attachments?.length > 0\">\r\n <banta-lightbox #lightbox></banta-lightbox>\r\n <div class=\"attachments-row\" [class.single]=\"message.attachments?.length === 1\">\r\n <a \r\n href=\"javascript:;\" \r\n (click)=\"showLightbox(attachment)\"\r\n *ngFor=\"let attachment of message.attachments\" \r\n >\r\n <img [src]=\"attachment.url\" alt=\"\">\r\n </a>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"content\" *ngIf=\"editing\" 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\"></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 <div class=\"actions\">\r\n <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n <ul class=\"message-facts\">\r\n <li *ngIf=\"message.edits?.length > 0\">Edited</li>\r\n </ul>\r\n <div class=\"spacer\"></div>\r\n <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n <div class=\"count-indicator\">\r\n {{message.submessages?.length || message.submessageCount || 0}}\r\n </div>\r\n <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n <mat-icon [inline]=\"true\">comment</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n <div class=\"count-indicator\">\r\n {{message.likes}}\r\n </div>\r\n <button \r\n *ngIf=\"message.transientState?.liking\"\r\n mat-icon-button \r\n [disabled]=\"true\" \r\n [matTooltip]=\"upvoting ? '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 <button \r\n *ngIf=\"!message.transientState?.liking\"\r\n mat-icon-button \r\n [disabled]=\"!permissions?.canLike\" \r\n [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \r\n matTooltipPosition=\"below\" \r\n (click)=\"message.userState?.liked ? unlike() : like()\" \r\n >\r\n <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"counted-action\">\r\n <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n <mat-icon [inline]=\"true\" >share</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n",
|
|
8308
8308
|
styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{position:relative;margin:1em 0 0;display:flex;align-items:center}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active .count-indicator,.counted-action.active button{color:#00a5ff}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}.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}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em}"]
|
|
8309
8309
|
},] }
|
|
8310
8310
|
];
|
|
@@ -9334,7 +9334,7 @@
|
|
|
9334
9334
|
{ type: core.Component, args: [{
|
|
9335
9335
|
selector: 'banta-comments',
|
|
9336
9336
|
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 (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 (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 >\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 >\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",
|
|
9337
|
-
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}@media (max-width:500px){.focused .replies{margin-left:0}}.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}"]
|
|
9337
|
+
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}@media (max-width:500px){.focused .replies{margin-left:0}}.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:450px){banta-comment-sort{margin:0;width:100%}}"]
|
|
9338
9338
|
},] }
|
|
9339
9339
|
];
|
|
9340
9340
|
BantaCommentsComponent.ctorParameters = function () { return [
|
|
@@ -9518,6 +9518,9 @@
|
|
|
9518
9518
|
_this.expandError = false;
|
|
9519
9519
|
}, 5 * 1000);
|
|
9520
9520
|
}, 100);
|
|
9521
|
+
// On mobile, just show an alert dialog
|
|
9522
|
+
if (window.innerWidth < 430)
|
|
9523
|
+
alert(message);
|
|
9521
9524
|
};
|
|
9522
9525
|
CommentFieldComponent.prototype.autocomplete = function (replacement) {
|
|
9523
9526
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -9684,6 +9687,11 @@
|
|
|
9684
9687
|
message: text,
|
|
9685
9688
|
attachments: this.chatMessageAttachments
|
|
9686
9689
|
};
|
|
9690
|
+
// this.sendError = new Error('Could not send: This has been a test of the emergency broadcast system.');
|
|
9691
|
+
// this.expandError = true;
|
|
9692
|
+
this.indicateError('Could not send: This has been a test of the emergency broadcast system.');
|
|
9693
|
+
if (1)
|
|
9694
|
+
return [2 /*return*/];
|
|
9687
9695
|
_a.label = 2;
|
|
9688
9696
|
case 2:
|
|
9689
9697
|
_a.trys.push([2, 4, , 6]);
|
|
@@ -9714,13 +9722,18 @@
|
|
|
9714
9722
|
CommentFieldComponent.prototype.removeAttachment = function (index) {
|
|
9715
9723
|
this.chatMessageAttachments.splice(index, 1);
|
|
9716
9724
|
};
|
|
9725
|
+
CommentFieldComponent.prototype.alertError = function () {
|
|
9726
|
+
if (!this.sendError)
|
|
9727
|
+
return;
|
|
9728
|
+
alert(this.sendError.message);
|
|
9729
|
+
};
|
|
9717
9730
|
return CommentFieldComponent;
|
|
9718
9731
|
}());
|
|
9719
9732
|
CommentFieldComponent.decorators = [
|
|
9720
9733
|
{ type: core.Component, args: [{
|
|
9721
9734
|
selector: 'banta-comment-field',
|
|
9722
|
-
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(' + user?.avatarUrl + ')'\"\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
|
|
9723
|
-
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}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end}.avatar-container .avatar{width:48px;height:48px;background:pink;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}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-
|
|
9735
|
+
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(' + user?.avatarUrl + ')'\"\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>",
|
|
9736
|
+
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}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:pink;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}}.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}"]
|
|
9724
9737
|
},] }
|
|
9725
9738
|
];
|
|
9726
9739
|
CommentFieldComponent.propDecorators = {
|
|
@@ -9730,8 +9743,6 @@
|
|
|
9730
9743
|
allowAttachments: [{ type: core.Input }],
|
|
9731
9744
|
signInSelected: [{ type: core.Output }],
|
|
9732
9745
|
editAvatarSelected: [{ type: core.Output }],
|
|
9733
|
-
sendError: [{ type: core.Input }],
|
|
9734
|
-
expandError: [{ type: core.Input }],
|
|
9735
9746
|
sendLabel: [{ type: core.Input }],
|
|
9736
9747
|
sendingLabel: [{ type: core.Input }],
|
|
9737
9748
|
label: [{ type: core.Input }],
|
|
@@ -9781,8 +9792,8 @@
|
|
|
9781
9792
|
CommentSortComponent.decorators = [
|
|
9782
9793
|
{ type: core.Component, args: [{
|
|
9783
9794
|
selector: 'banta-comment-sort',
|
|
9784
|
-
template: "<
|
|
9785
|
-
styles: ["
|
|
9795
|
+
template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>Sort by</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>",
|
|
9796
|
+
styles: ["mat-form-field{width:100%}"]
|
|
9786
9797
|
},] }
|
|
9787
9798
|
];
|
|
9788
9799
|
CommentSortComponent.propDecorators = {
|
|
@@ -9790,79 +9801,77 @@
|
|
|
9790
9801
|
sortChange: [{ type: core.Output }]
|
|
9791
9802
|
};
|
|
9792
9803
|
|
|
9793
|
-
var
|
|
9794
|
-
function
|
|
9804
|
+
var AttachmentButtonComponent = /** @class */ (function () {
|
|
9805
|
+
function AttachmentButtonComponent(cdnProvider) {
|
|
9795
9806
|
this.cdnProvider = cdnProvider;
|
|
9796
9807
|
this._addedAttachment = new rxjs.Subject();
|
|
9797
9808
|
}
|
|
9798
|
-
Object.defineProperty(
|
|
9809
|
+
Object.defineProperty(AttachmentButtonComponent.prototype, "addedAttachment", {
|
|
9799
9810
|
get: function () {
|
|
9800
9811
|
return this._addedAttachment.asObservable();
|
|
9801
9812
|
},
|
|
9802
9813
|
enumerable: false,
|
|
9803
9814
|
configurable: true
|
|
9804
9815
|
});
|
|
9805
|
-
|
|
9816
|
+
AttachmentButtonComponent.prototype.show = function () {
|
|
9806
9817
|
this.fileInput.nativeElement.click();
|
|
9807
9818
|
};
|
|
9808
|
-
|
|
9819
|
+
AttachmentButtonComponent.prototype.fileChange = function (event) {
|
|
9809
9820
|
return __awaiter(this, void 0, void 0, function () {
|
|
9810
|
-
var element, file, publicURL;
|
|
9821
|
+
var element, file, publicURL, e_1;
|
|
9811
9822
|
return __generator(this, function (_a) {
|
|
9812
9823
|
switch (_a.label) {
|
|
9813
9824
|
case 0:
|
|
9814
9825
|
element = event.currentTarget;
|
|
9815
|
-
if (!element.files.length) return [3 /*break*/,
|
|
9826
|
+
if (!element.files.length) return [3 /*break*/, 5];
|
|
9816
9827
|
console.log('[Banta] File Added to comment');
|
|
9817
9828
|
file = element.files[0];
|
|
9818
|
-
|
|
9829
|
+
publicURL = void 0;
|
|
9830
|
+
_a.label = 1;
|
|
9819
9831
|
case 1:
|
|
9832
|
+
_a.trys.push([1, 3, , 4]);
|
|
9833
|
+
return [4 /*yield*/, this.cdnProvider.uploadImage(file)];
|
|
9834
|
+
case 2:
|
|
9820
9835
|
publicURL = _a.sent();
|
|
9836
|
+
return [3 /*break*/, 4];
|
|
9837
|
+
case 3:
|
|
9838
|
+
e_1 = _a.sent();
|
|
9839
|
+
console.error("[Banta] Caught an error while uploading image to CDN:");
|
|
9840
|
+
console.error(e_1);
|
|
9841
|
+
alert("Failed to upload image. Please try again later.");
|
|
9842
|
+
return [2 /*return*/];
|
|
9843
|
+
case 4:
|
|
9844
|
+
// If no URL was returned, then an error must have occurred. Presumably the CDN
|
|
9845
|
+
// provider has conveyed an error to the user.
|
|
9846
|
+
if (!publicURL)
|
|
9847
|
+
return [2 /*return*/];
|
|
9821
9848
|
this._addedAttachment.next({
|
|
9822
9849
|
type: file.type,
|
|
9823
9850
|
url: publicURL
|
|
9824
9851
|
});
|
|
9825
|
-
_a.label =
|
|
9826
|
-
case
|
|
9852
|
+
_a.label = 5;
|
|
9853
|
+
case 5: return [2 /*return*/];
|
|
9827
9854
|
}
|
|
9828
9855
|
});
|
|
9829
9856
|
});
|
|
9830
9857
|
};
|
|
9831
|
-
return
|
|
9858
|
+
return AttachmentButtonComponent;
|
|
9832
9859
|
}());
|
|
9833
|
-
|
|
9860
|
+
AttachmentButtonComponent.decorators = [
|
|
9834
9861
|
{ type: core.Component, args: [{
|
|
9835
|
-
selector: '
|
|
9862
|
+
selector: 'banta-attachment-button',
|
|
9836
9863
|
template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\" (change)=\"fileChange($event)\" type=\"file\" >",
|
|
9837
|
-
styles: ["
|
|
9864
|
+
styles: [""]
|
|
9838
9865
|
},] }
|
|
9839
9866
|
];
|
|
9840
|
-
|
|
9867
|
+
AttachmentButtonComponent.ctorParameters = function () { return [
|
|
9841
9868
|
{ type: common$1.CDNProvider }
|
|
9842
9869
|
]; };
|
|
9843
|
-
|
|
9870
|
+
AttachmentButtonComponent.propDecorators = {
|
|
9844
9871
|
fileInput: [{ type: core.ViewChild, args: ['fileUpload', { static: false },] }],
|
|
9845
9872
|
addedAttachment: [{ type: core.Output }]
|
|
9846
9873
|
};
|
|
9847
9874
|
|
|
9848
|
-
var SafeURLPipe = /** @class */ (function () {
|
|
9849
|
-
function SafeURLPipe(sanitizer) {
|
|
9850
|
-
this.sanitizer = sanitizer;
|
|
9851
|
-
}
|
|
9852
|
-
SafeURLPipe.prototype.transform = function (value) {
|
|
9853
|
-
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
|
|
9854
|
-
};
|
|
9855
|
-
return SafeURLPipe;
|
|
9856
|
-
}());
|
|
9857
|
-
SafeURLPipe.decorators = [
|
|
9858
|
-
{ type: core.Pipe, args: [{
|
|
9859
|
-
name: 'safeURL'
|
|
9860
|
-
},] }
|
|
9861
|
-
];
|
|
9862
|
-
SafeURLPipe.ctorParameters = function () { return [
|
|
9863
|
-
{ type: platformBrowser.DomSanitizer }
|
|
9864
|
-
]; };
|
|
9865
|
-
|
|
9866
9875
|
var COMPONENTS$3 = [
|
|
9867
9876
|
CommentComponent,
|
|
9868
9877
|
CommentViewComponent,
|
|
@@ -9870,8 +9879,7 @@
|
|
|
9870
9879
|
LiveCommentComponent,
|
|
9871
9880
|
CommentFieldComponent,
|
|
9872
9881
|
CommentSortComponent,
|
|
9873
|
-
|
|
9874
|
-
SafeURLPipe
|
|
9882
|
+
AttachmentButtonComponent
|
|
9875
9883
|
];
|
|
9876
9884
|
var CommentsModule = /** @class */ (function () {
|
|
9877
9885
|
function CommentsModule() {
|
|
@@ -10316,7 +10324,7 @@
|
|
|
10316
10324
|
* Generated bundle index. Do not edit.
|
|
10317
10325
|
*/
|
|
10318
10326
|
|
|
10319
|
-
exports.
|
|
10327
|
+
exports.AttachmentButtonComponent = AttachmentButtonComponent;
|
|
10320
10328
|
exports.BANTA_SDK_OPTIONS = BANTA_SDK_OPTIONS;
|
|
10321
10329
|
exports.BantaChatComponent = BantaChatComponent;
|
|
10322
10330
|
exports.BantaCommentsComponent = BantaCommentsComponent;
|
|
@@ -10339,6 +10347,7 @@
|
|
|
10339
10347
|
exports.EmojiModule = EmojiModule;
|
|
10340
10348
|
exports.EmojiSelectorButtonComponent = EmojiSelectorButtonComponent;
|
|
10341
10349
|
exports.EmojiSelectorPanelComponent = EmojiSelectorPanelComponent;
|
|
10350
|
+
exports.LightboxComponent = LightboxComponent;
|
|
10342
10351
|
exports.LiveChatMessageComponent = LiveChatMessageComponent;
|
|
10343
10352
|
exports.LiveCommentComponent = LiveCommentComponent;
|
|
10344
10353
|
exports.LiveMessageComponent = LiveMessageComponent;
|