@banta/sdk 4.0.17 → 4.0.18
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 +62 -15
- 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 +21 -9
- package/esm2015/lib/comments/comment-field/comment-field.component.js +25 -7
- package/fesm2015/banta-sdk.js +44 -14
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/comments/attachment-button/attachment-button.component.d.ts +3 -2
- package/lib/comments/comment-field/comment-field.component.d.ts +5 -1
- package/package.json +2 -2
package/bundles/banta-sdk.umd.js
CHANGED
|
@@ -9611,6 +9611,30 @@
|
|
|
9611
9611
|
if (window.innerWidth < 430)
|
|
9612
9612
|
alert(message);
|
|
9613
9613
|
};
|
|
9614
|
+
Object.defineProperty(CommentFieldComponent.prototype, "isValidMessage", {
|
|
9615
|
+
get: function () {
|
|
9616
|
+
return (this.text || this.chatMessageAttachments.length > 0);
|
|
9617
|
+
},
|
|
9618
|
+
enumerable: false,
|
|
9619
|
+
configurable: true
|
|
9620
|
+
});
|
|
9621
|
+
Object.defineProperty(CommentFieldComponent.prototype, "hasPendingAttachments", {
|
|
9622
|
+
get: function () {
|
|
9623
|
+
return this.chatMessageAttachments.some(function (x) { return x.transientState; });
|
|
9624
|
+
},
|
|
9625
|
+
enumerable: false,
|
|
9626
|
+
configurable: true
|
|
9627
|
+
});
|
|
9628
|
+
Object.defineProperty(CommentFieldComponent.prototype, "sendButtonEnabled", {
|
|
9629
|
+
get: function () {
|
|
9630
|
+
return this.canComment
|
|
9631
|
+
&& this.isValidMessage
|
|
9632
|
+
&& !this.hasPendingAttachments
|
|
9633
|
+
&& !this.sending;
|
|
9634
|
+
},
|
|
9635
|
+
enumerable: false,
|
|
9636
|
+
configurable: true
|
|
9637
|
+
});
|
|
9614
9638
|
CommentFieldComponent.prototype.autocomplete = function (replacement) {
|
|
9615
9639
|
return __awaiter(this, void 0, void 0, function () {
|
|
9616
9640
|
var el;
|
|
@@ -9766,7 +9790,7 @@
|
|
|
9766
9790
|
case 1:
|
|
9767
9791
|
_b.trys.push([1, , 7, 8]);
|
|
9768
9792
|
text = (this.text || '').trim();
|
|
9769
|
-
if (
|
|
9793
|
+
if (!this.isValidMessage)
|
|
9770
9794
|
return [2 /*return*/];
|
|
9771
9795
|
message = {
|
|
9772
9796
|
user: this.user,
|
|
@@ -9774,7 +9798,7 @@
|
|
|
9774
9798
|
url: location.href,
|
|
9775
9799
|
likes: 0,
|
|
9776
9800
|
message: text,
|
|
9777
|
-
attachments: this.chatMessageAttachments
|
|
9801
|
+
attachments: this.chatMessageAttachments.filter(function (x) { return x.url; })
|
|
9778
9802
|
};
|
|
9779
9803
|
_b.label = 2;
|
|
9780
9804
|
case 2:
|
|
@@ -9783,6 +9807,7 @@
|
|
|
9783
9807
|
case 3:
|
|
9784
9808
|
_b.sent();
|
|
9785
9809
|
this.text = '';
|
|
9810
|
+
this.chatMessageAttachments = [];
|
|
9786
9811
|
return [3 /*break*/, 6];
|
|
9787
9812
|
case 4:
|
|
9788
9813
|
e_1 = _b.sent();
|
|
@@ -9800,8 +9825,14 @@
|
|
|
9800
9825
|
});
|
|
9801
9826
|
});
|
|
9802
9827
|
};
|
|
9803
|
-
CommentFieldComponent.prototype.addedAttachment = function (
|
|
9804
|
-
this.chatMessageAttachments.push(
|
|
9828
|
+
CommentFieldComponent.prototype.addedAttachment = function (attachment) {
|
|
9829
|
+
this.chatMessageAttachments.push(attachment);
|
|
9830
|
+
};
|
|
9831
|
+
CommentFieldComponent.prototype.attachmentError = function (attachment) {
|
|
9832
|
+
var _this = this;
|
|
9833
|
+
setTimeout(function () {
|
|
9834
|
+
_this.chatMessageAttachments = _this.chatMessageAttachments.filter(function (x) { return x !== attachment; });
|
|
9835
|
+
}, 3000);
|
|
9805
9836
|
};
|
|
9806
9837
|
CommentFieldComponent.prototype.removeAttachment = function (index) {
|
|
9807
9838
|
this.chatMessageAttachments.splice(index, 1);
|
|
@@ -9816,8 +9847,8 @@
|
|
|
9816
9847
|
CommentFieldComponent.decorators = [
|
|
9817
9848
|
{ type: core.Component, args: [{
|
|
9818
9849
|
selector: 'banta-comment-field',
|
|
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)\"
|
|
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:20}.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}"]
|
|
9850
|
+
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 \r\n *ngIf=\"allowAttachments\"\r\n (addedAttachment)=\"addedAttachment($event)\"\r\n (attachmentError)=\"attachmentError($event)\"\r\n ></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\" [class.with-border]=\"!attachment.url\">\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 <ng-container *ngIf=\"attachment.transientState?.error\">\r\n <mat-icon class=\"error\">close</mat-icon>\r\n <em class=\"error\">{{attachment.transientState?.errorMessage || 'Error'}}</em>\r\n </ng-container>\r\n <ng-container *ngIf=\"!attachment.transientState?.error\">\r\n <ng-container *ngIf=\"attachment.transientState?.uploading\">\r\n <mat-spinner></mat-spinner>\r\n <em>Uploading...</em>\r\n </ng-container>\r\n <ng-container *ngIf=\"!attachment.transientState?.uploading\">\r\n <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n </ng-container>\r\n </ng-container>\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]=\"!sendButtonEnabled\"\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>",
|
|
9851
|
+
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:20}.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;text-align:center}.message-attachments-container .message-attachment.with-border{outline:1px solid #333;padding:1em 0}.message-attachments-container .message-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.message-attachments-container .message-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.message-attachments-container .message-attachment .error{color:#b76363}.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}"]
|
|
9821
9852
|
},] }
|
|
9822
9853
|
];
|
|
9823
9854
|
CommentFieldComponent.propDecorators = {
|
|
@@ -9890,11 +9921,15 @@
|
|
|
9890
9921
|
function AttachmentButtonComponent(cdnProvider) {
|
|
9891
9922
|
this.cdnProvider = cdnProvider;
|
|
9892
9923
|
this._addedAttachment = new rxjs.Subject();
|
|
9924
|
+
this._attachmentError = new rxjs.Subject();
|
|
9893
9925
|
}
|
|
9894
9926
|
Object.defineProperty(AttachmentButtonComponent.prototype, "addedAttachment", {
|
|
9895
|
-
get: function () {
|
|
9896
|
-
|
|
9897
|
-
|
|
9927
|
+
get: function () { return this._addedAttachment.asObservable(); },
|
|
9928
|
+
enumerable: false,
|
|
9929
|
+
configurable: true
|
|
9930
|
+
});
|
|
9931
|
+
Object.defineProperty(AttachmentButtonComponent.prototype, "attachmentError", {
|
|
9932
|
+
get: function () { return this._attachmentError.asObservable(); },
|
|
9898
9933
|
enumerable: false,
|
|
9899
9934
|
configurable: true
|
|
9900
9935
|
});
|
|
@@ -9903,7 +9938,7 @@
|
|
|
9903
9938
|
};
|
|
9904
9939
|
AttachmentButtonComponent.prototype.fileChange = function (event) {
|
|
9905
9940
|
return __awaiter(this, void 0, void 0, function () {
|
|
9906
|
-
var element, file, publicURL, e_1;
|
|
9941
|
+
var element, file, publicURL, attachment, e_1;
|
|
9907
9942
|
return __generator(this, function (_a) {
|
|
9908
9943
|
switch (_a.label) {
|
|
9909
9944
|
case 0:
|
|
@@ -9912,6 +9947,16 @@
|
|
|
9912
9947
|
console.log('[Banta] File Added to comment');
|
|
9913
9948
|
file = element.files[0];
|
|
9914
9949
|
publicURL = void 0;
|
|
9950
|
+
attachment = {
|
|
9951
|
+
type: file.type,
|
|
9952
|
+
url: undefined,
|
|
9953
|
+
transientState: {
|
|
9954
|
+
uploading: true,
|
|
9955
|
+
error: false,
|
|
9956
|
+
errorMessage: undefined
|
|
9957
|
+
}
|
|
9958
|
+
};
|
|
9959
|
+
this._addedAttachment.next(attachment);
|
|
9915
9960
|
_a.label = 1;
|
|
9916
9961
|
case 1:
|
|
9917
9962
|
_a.trys.push([1, 3, , 4]);
|
|
@@ -9921,19 +9966,20 @@
|
|
|
9921
9966
|
return [3 /*break*/, 4];
|
|
9922
9967
|
case 3:
|
|
9923
9968
|
e_1 = _a.sent();
|
|
9969
|
+
attachment.transientState.error = true;
|
|
9970
|
+
attachment.transientState.errorMessage = "Failed to upload";
|
|
9924
9971
|
console.error("[Banta] Caught an error while uploading image to CDN:");
|
|
9925
9972
|
console.error(e_1);
|
|
9926
9973
|
alert("Failed to upload image. Please try again later.");
|
|
9974
|
+
this._attachmentError.next(attachment);
|
|
9927
9975
|
return [2 /*return*/];
|
|
9928
9976
|
case 4:
|
|
9929
9977
|
// If no URL was returned, then an error must have occurred. Presumably the CDN
|
|
9930
9978
|
// provider has conveyed an error to the user.
|
|
9931
9979
|
if (!publicURL)
|
|
9932
9980
|
return [2 /*return*/];
|
|
9933
|
-
|
|
9934
|
-
|
|
9935
|
-
url: publicURL
|
|
9936
|
-
});
|
|
9981
|
+
attachment.url = publicURL;
|
|
9982
|
+
attachment.transientState = undefined;
|
|
9937
9983
|
_a.label = 5;
|
|
9938
9984
|
case 5: return [2 /*return*/];
|
|
9939
9985
|
}
|
|
@@ -9954,7 +10000,8 @@
|
|
|
9954
10000
|
]; };
|
|
9955
10001
|
AttachmentButtonComponent.propDecorators = {
|
|
9956
10002
|
fileInput: [{ type: core.ViewChild, args: ['fileUpload', { static: false },] }],
|
|
9957
|
-
addedAttachment: [{ type: core.Output }]
|
|
10003
|
+
addedAttachment: [{ type: core.Output }],
|
|
10004
|
+
attachmentError: [{ type: core.Output }]
|
|
9958
10005
|
};
|
|
9959
10006
|
|
|
9960
10007
|
var COMPONENTS$3 = [
|