@sd-angular/core 1.3.73 → 1.3.74

package/esm2015/comment/src/lib/comment.component.js

@@ -1,13 +1,17 @@
-var _items, _send, _load;
-import { __awaiter, __classPrivateFieldGet } from "tslib";
+var _items, _send, _timerReload, _load, _scrollToBottom;
+import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { Component, Input, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { SdTextarea } from '@sd-angular/core/textarea';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { SdLoadingService } from '@sd-angular/core/loading';
 export class SdComment {
-    constructor() {
+    constructor(loadingService) {
+        this.loadingService = loadingService;
         _items.set(this, new BehaviorSubject([]));
         _send.set(this, new BehaviorSubject(''));
+        _timerReload.set(this, void 0);
+        this.isReloading = false;
         this.fullCommentStyles = {
             'min-height': '150px'
         };
@@ -28,11 +32,33 @@ export class SdComment {
             return results;
         }));
         this.reload = () => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            this.loadingService.start('.c-comment-loading');
             __classPrivateFieldGet(this, _items).next(yield __classPrivateFieldGet(this, _load).call(this));
+            this.loadingService.stop('.c-comment-loading');
+            __classPrivateFieldGet(this, _scrollToBottom).call(this);
+            if ((_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.autoReload) === null || _b === void 0 ? void 0 : _b.timerMs) {
+                clearInterval(__classPrivateFieldGet(this, _timerReload));
+                __classPrivateFieldSet(this, _timerReload, setInterval(() => __awaiter(this, void 0, void 0, function* () {
+                    this.loadingService.start('.c-comment-loading');
+                    __classPrivateFieldGet(this, _items).next(yield __classPrivateFieldGet(this, _load).call(this));
+                    this.loadingService.stop('.c-comment-loading');
+                    __classPrivateFieldGet(this, _scrollToBottom).call(this);
+                }), this.commentOption.autoReload.timerMs));
+            }
         });
         this.clearAllData = () => {
             this.message = '';
         };
+        _scrollToBottom.set(this, () => {
+            try {
+                setTimeout(() => {
+                    this.commentScroll.nativeElement.scrollTop = this.commentScroll.nativeElement.scrollHeight;
+                }, 500);
+            }
+            catch (err) {
+            }
+        });
     }
     set option(option) {
         this.commentOption = option;
@@ -49,22 +75,29 @@ export class SdComment {
         this.count = this.items.pipe(map(items => items.length));
     }
     ngOnDestroy() {
+        var _a, _b;
+        if ((_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.autoReload) === null || _b === void 0 ? void 0 : _b.timerMs) {
+            clearInterval(__classPrivateFieldGet(this, _timerReload));
+        }
     }
     ngAfterViewInit() {
     }
 }
-_items = new WeakMap(), _send = new WeakMap(), _load = new WeakMap();
+_items = new WeakMap(), _send = new WeakMap(), _timerReload = new WeakMap(), _load = new WeakMap(), _scrollToBottom = new WeakMap();
 SdComment.decorators = [
     { type: Component, args: [{
                 selector: 'sd-comment',
-                template: "<div class=\"c-container\">\r\n  <div class=\"c-header\">\r\n    <div class=\"c-title\">{{'Comments' | sdTranslate}} <a href=\"javascript:;\">({{count | async}})</a></div>\r\n  </div>\r\n  <div class=\"c-body\" *ngIf=\"commentOption?.style==='basic'\">\r\n    <ng-container *ngFor=\"let item of items | async\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment\">\r\n          <div class=\"c-info mb-4\">\r\n            {{'By' | sdTranslate}}\r\n            <span class=\"c-creator ml-2\">\r\n              {{item.creator}}\r\n            </span>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <span class=\"mx-4\">\u2022</span>\r\n              <span\r\n                [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy HH:mm'\">{{item.createdDate | sdTimeDifferent:'dd/MM/yyyy HH:mm':'hour' | async}}</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-body-style1\" *ngIf=\"commentOption?.style==='style1'\" sdScroll>\r\n    <ng-container *ngFor=\"let item of items | async; let i = index\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment {{i + 1 === (count | async) ? 'c-comment-border': ''}}\">\r\n          <div class=\"c-info mb-4\">\r\n            <div class=\"c-col-left\">\r\n              <div class=\"c-creator\">\r\n                {{item.creator}}\r\n              </div>\r\n              <div class=\"c-email\">\r\n                {{item.email}}\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <div class=\"c-col-right\"\r\n                   [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy H:mm'\">{{item.createdDate | date:'dd/MM/yyyy H:mm'}}</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-footer p-16\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 c-position-relative\">\r\n        <ng-container *ngIf=\"commentOption?.editor?.enabled else noUseEditor\">\r\n          <div class=\"mb-8\">\r\n            <sd-editor [(model)]=\"message\" [styles]=\"commentOption?.editor?.styles\"\r\n                       [toolbar]=\"commentOption?.editor?.toolbar\"\r\n                       [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n                       [hashTagValues]=\"commentOption?.editor?.hashTagValues\"></sd-editor>\r\n          </div>\r\n          <div *ngIf=\"commentOption?.fullComment?.enabled\" class=\"c-full-comment-backdrop\"\r\n               (click)=\"modalFullComment.open()\"></div>\r\n        </ng-container>\r\n        <ng-template #noUseEditor>\r\n          <sd-textarea [(model)]=\"message\" rows=\"1\" autoHeight></sd-textarea>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <sd-button class=\"float-right\" title=\"G\u1EEDi\" (action)=\"onSend()\" [disabled]=\"!message\" color=\"primary\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sd-modal [title]=\"'Comments' | sdTranslate\" width=\"sm\" [closeClickOutSide]=\"commentOption?.fullComment?.closeClickOutSide\" #modalFullComment>\r\n  <sd-modal-body>\r\n    <sd-editor [(model)]=\"message\" [styles]=\"fullCommentStyles\"\r\n               [toolbar]=\"commentOption?.editor?.toolbar\"\r\n               [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n               [hashTagValues]=\"commentOption?.editor?.hashTagValues\"\r\n               [args]=\"commentOption?.editor?.args\"></sd-editor>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"ml-8\" title=\"X\u00F3a to\u00E0n b\u1ED9\" size=\"sm\" type=\"link\"\r\n               (action)=\"clearAllData()\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"!commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"\u0110\u00F3ng\" size=\"sm\" (action)=\"modalFullComment.close()\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"G\u1EEDi\" size=\"sm\" (action)=\"onSend();modalFullComment.close();\" [disabled]=\"!message\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                template: "<div class=\"c-container\">\r\n  <div class=\"c-header\">\r\n    <div class=\"c-title\">{{'Comments' | sdTranslate}} <a href=\"javascript:;\">({{count | async}})</a></div>\r\n  </div>\r\n  <div class=\"c-body c-comment-loading\" *ngIf=\"commentOption?.style==='basic'\" #commentScroll>\r\n    <ng-container *ngFor=\"let item of items | async\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment\">\r\n          <div class=\"c-info mb-4\">\r\n            {{'By' | sdTranslate}}\r\n            <span class=\"c-creator ml-2\">\r\n              {{item.creator}}\r\n            </span>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <span class=\"mx-4\">\u2022</span>\r\n              <span\r\n                [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy HH:mm'\">{{item.createdDate | sdTimeDifferent:'dd/MM/yyyy HH:mm':'hour' | async}}</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-body-style1 c-comment-loading\" *ngIf=\"commentOption?.style==='style1'\" sdScroll #commentScroll>\r\n    <ng-container *ngFor=\"let item of items | async; let i = index\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment {{i + 1 === (count | async) ? 'c-comment-border': ''}}\">\r\n          <div class=\"c-info mb-4\">\r\n            <div class=\"c-col-left\">\r\n              <div class=\"c-creator\">\r\n                {{item.creator}}\r\n              </div>\r\n              <div class=\"c-email\">\r\n                {{item.email}}\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <div class=\"c-col-right\"\r\n                   [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy H:mm'\">{{item.createdDate | date:'dd/MM/yyyy H:mm'}}</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-footer p-16\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 c-position-relative\">\r\n        <ng-container *ngIf=\"commentOption?.editor?.enabled else noUseEditor\">\r\n          <div class=\"mb-8\">\r\n            <sd-editor [(model)]=\"message\" [styles]=\"commentOption?.editor?.styles\"\r\n                       [toolbar]=\"commentOption?.editor?.toolbar\"\r\n                       [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n                       [hashTagValues]=\"commentOption?.editor?.hashTagValues\"></sd-editor>\r\n          </div>\r\n          <div *ngIf=\"commentOption?.fullComment?.enabled\" class=\"c-full-comment-backdrop\"\r\n               (click)=\"modalFullComment.open()\"></div>\r\n        </ng-container>\r\n        <ng-template #noUseEditor>\r\n          <sd-textarea [(model)]=\"message\" rows=\"1\" autoHeight></sd-textarea>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <sd-button class=\"float-right\" title=\"G\u1EEDi\" (action)=\"onSend()\" [disabled]=\"!message\" color=\"primary\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n        <sd-button class=\"float-right mr-8\" title=\"T\u1EA3i l\u1EA1i\"  (action)=\"reload()\" *ngIf=\"commentOption?.autoReload?.enabledButton\" color=\"warning\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sd-modal [title]=\"'Comments' | sdTranslate\" width=\"sm\" [closeClickOutSide]=\"commentOption?.fullComment?.closeClickOutSide\" #modalFullComment>\r\n  <sd-modal-body>\r\n    <sd-editor [(model)]=\"message\" [styles]=\"fullCommentStyles\"\r\n               [toolbar]=\"commentOption?.editor?.toolbar\"\r\n               [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n               [hashTagValues]=\"commentOption?.editor?.hashTagValues\"\r\n               [args]=\"commentOption?.editor?.args\"></sd-editor>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"ml-8\" title=\"X\u00F3a to\u00E0n b\u1ED9\" size=\"sm\" type=\"link\"\r\n               (action)=\"clearAllData()\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"!commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"\u0110\u00F3ng\" size=\"sm\" (action)=\"modalFullComment.close()\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n    <sd-button class=\"ml-8\" title=\"T\u1EA3i l\u1EA1i\" (action)=\"reload()\"  *ngIf=\"commentOption?.autoReload?.enabledButton\" color=\"warning\" type=\"fill\"\r\n               size=\"sm\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"G\u1EEDi\" size=\"sm\" (action)=\"onSend();modalFullComment.close();\" [disabled]=\"!message\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".text-black400{color:#757575}.c-container{display:flex;flex-direction:column;height:100%}.c-container .c-header{align-items:center;background-color:#fff;display:flex;height:40px;padding:0 16px}.c-container .c-header .c-title{font-weight:500}.c-container .c-body{background:#f8f9fa;flex:1;overflow-y:hidden;padding:16px}.c-container .c-body:hover{overflow-y:auto}.c-container .c-body .c-comment{background:#fff;border:1px solid #f2f2f2;border-radius:4px;flex:1;overflow-wrap:break-word;padding:12px 16px;white-space:pre-wrap;word-break:break-word}.c-container .c-body .c-comment .c-info{color:#757575}.c-container .c-body .c-comment .c-info .c-creator{color:#000;font-weight:500}.c-container .c-body-style1{background:#fff;flex:1;overflow-y:hidden;padding:16px}.c-container .c-body-style1 .c-comment{background:#fff;border-bottom:3px solid #f2f2f2;border-radius:4px;flex:1;overflow-wrap:break-word;white-space:pre-wrap;word-break:break-word}.c-container .c-body-style1 .c-comment .c-info{color:#757575}.c-container .c-body-style1 .c-comment .c-info .c-creator{color:#000;font-weight:500;white-space:nowrap}.c-container .c-body-style1 .c-comment .c-info .c-email{color:#000;font-weight:400;white-space:nowrap}.c-container .c-body-style1 .c-comment .c-info .c-col-left{display:inline-block;overflow:hidden;vertical-align:top;width:calc(100% - 128px)}.c-container .c-body-style1 .c-comment .c-info .c-col-right{display:inline-block;margin-left:8px;width:120px}.c-container .c-body-style1 .c-comment-border{border-bottom:none}.c-container .c-footer{background:#fff;min-height:120px}.c-container .c-footer .c-position-relative{position:relative}.c-container .c-footer .c-full-comment-backdrop{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}"]
             },] }
 ];
-SdComment.ctorParameters = () => [];
+SdComment.ctorParameters = () => [
+    { type: SdLoadingService }
+];
 SdComment.propDecorators = {
+    commentScroll: [{ type: ViewChild, args: ['commentScroll',] }],
     textarea: [{ type: ViewChild, args: [SdTextarea,] }],
     option: [{ type: Input }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1X29uZW1vdW50L0RvY3VtZW50cy9saWItY29yZS11aS9wcm9qZWN0cy9zZC1jb3JlL2NvbW1lbnQvIiwic291cmNlcyI6WyJzcmMvbGliL2NvbW1lbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFJVCxLQUFLLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDckQsT0FBTyxFQUFDLGVBQWUsRUFBYSxNQUFNLE1BQU0sQ0FBQztBQUNqRCxPQUFPLEVBQUMsR0FBRyxFQUFZLE1BQU0sZ0JBQWdCLENBQUM7QUFTOUMsTUFBTSxPQUFPLFNBQVM7SUFrQnBCO1FBaEJBLGlCQUFTLElBQUksZUFBZSxDQUFZLEVBQUUsQ0FBQyxFQUFDO1FBQzVDLGdCQUFRLElBQUksZUFBZSxDQUFTLEVBQUUsQ0FBQyxFQUFDO1FBUXhDLHNCQUFpQixHQUFHO1lBQ2xCLFlBQVksRUFBRSxPQUFPO1NBQ3RCLENBQUM7UUF3QkYsV0FBTSxHQUFHLEdBQUcsRUFBRTs7WUFDWixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7Z0JBQ2hCLFlBQUEsSUFBSSxDQUFDLGFBQWEsMENBQUUsS0FBSywwQ0FBRSxNQUFNLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRTtnQkFDaEQsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7Z0JBQ3BCLE1BQUEsSUFBSSxDQUFDLFFBQVEsMENBQUUsS0FBSyxHQUFHO2FBQ3hCO1FBQ0gsQ0FBQyxDQUFBO1FBRUQsZ0JBQVEsR0FBUyxFQUFFO1lBQ2pCLE1BQU0sRUFBQyxLQUFLLEVBQUMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1lBQ25DLE1BQU0sT0FBTyxHQUFHLEtBQUssRUFBRSxDQUFDO1lBQ3hCLElBQUksT0FBTyxZQUFZLE9BQU8sRUFBRTtnQkFDOUIsT0FBTyxNQUFNLE9BQU8sQ0FBQzthQUN0QjtZQUNELE9BQU8sT0FBTyxDQUFDO1FBQ2pCLENBQUMsQ0FBQSxFQUFBO1FBRUQsV0FBTSxHQUFHLEdBQVMsRUFBRTtZQUNsQixxQ0FBWSxJQUFJLENBQUMsTUFBTSx5Q0FBQSxJQUFJLENBQVEsQ0FBQyxDQUFDO1FBQ3ZDLENBQUMsQ0FBQSxDQUFBO1FBRUQsaUJBQVksR0FBRyxHQUFHLEVBQUU7WUFDbEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDcEIsQ0FBQyxDQUFBO0lBekNELENBQUM7SUFiRCxJQUFhLE1BQU0sQ0FBQyxNQUF1QjtRQUN6QyxJQUFJLENBQUMsYUFBYSxHQUFHLE1BQU0sQ0FBQztRQUM1QixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQztJQUFBLENBQUM7SUFZRixRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxxQ0FBWSxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3hDLE9BQU8sS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRTs7Z0JBQUMsT0FBQSxpQ0FDakIsQ0FBQyxLQUNKLE9BQU8sUUFBRSxDQUFDLENBQUMsT0FBTyxtQ0FBSSwyRUFBMkUsQ0FBQyxDQUFDLE9BQU8sRUFBRSxJQUM1RyxDQUFBO2FBQUEsQ0FBQyxDQUFDO1FBQ04sQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNKLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7SUFDM0QsQ0FBQztJQUVELFdBQVc7SUFDWCxDQUFDO0lBRUQsZUFBZTtJQUNmLENBQUM7Ozs7WUF6Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0QiwrekpBQXVDO2dCQUV2QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7Ozs7dUJBRUUsU0FBUyxTQUFDLFVBQVU7cUJBS3BCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBBZnRlclZpZXdJbml0LFxyXG4gIE9uSW5pdCxcclxuICBPbkRlc3Ryb3ksXHJcbiAgSW5wdXQsXHJcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXHJcbiAgVmlld0NoaWxkXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7U2RUZXh0YXJlYX0gZnJvbSAnQHNkLWFuZ3VsYXIvY29yZS90ZXh0YXJlYSc7XHJcbmltcG9ydCB7QmVoYXZpb3JTdWJqZWN0LCBPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHttYXAsIHN3aXRjaE1hcH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5pbXBvcnQge0NvbW1lbnQsIFNkQ29tbWVudE9wdGlvbn0gZnJvbSAnLi9jb21tZW50Lm1vZGVsJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2QtY29tbWVudCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbW1lbnQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NvbW1lbnQuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RDb21tZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xyXG4gIEBWaWV3Q2hpbGQoU2RUZXh0YXJlYSkgdGV4dGFyZWE6IFNkVGV4dGFyZWE7XHJcbiAgI2l0ZW1zID0gbmV3IEJlaGF2aW9yU3ViamVjdDxDb21tZW50W10+KFtdKTtcclxuICAjc2VuZCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPignJyk7XHJcbiAgY29tbWVudE9wdGlvbjogU2RDb21tZW50T3B0aW9uO1xyXG5cclxuICBASW5wdXQoKSBzZXQgb3B0aW9uKG9wdGlvbjogU2RDb21tZW50T3B0aW9uKSB7XHJcbiAgICB0aGlzLmNvbW1lbnRPcHRpb24gPSBvcHRpb247XHJcbiAgICB0aGlzLnJlbG9hZCgpO1xyXG4gIH07XHJcblxyXG4gIGZ1bGxDb21tZW50U3R5bGVzID0ge1xyXG4gICAgJ21pbi1oZWlnaHQnOiAnMTUwcHgnXHJcbiAgfTtcclxuICBpdGVtczogT2JzZXJ2YWJsZTxDb21tZW50W10+O1xyXG4gIGNvdW50OiBPYnNlcnZhYmxlPG51bWJlcj47XHJcbiAgbWVzc2FnZTogc3RyaW5nO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5pdGVtcyA9IHRoaXMuI2l0ZW1zLnBpcGUobWFwKGl0ZW1zID0+IHtcclxuICAgICAgcmV0dXJuIGl0ZW1zLm1hcChlID0+ICh7XHJcbiAgICAgICAgLi4uZSxcclxuICAgICAgICBwaWN0dXJlOiBlLnBpY3R1cmUgPz8gYGh0dHBzOi8vdWktYXZhdGFycy5jb20vYXBpLz9zaXplPTMyJnJvdW5kZWQ9dHJ1ZSZiYWNrZ3JvdW5kPXJhbmRvbSZuYW1lPSR7ZS5jcmVhdG9yfWBcclxuICAgICAgfSkpO1xyXG4gICAgfSkpO1xyXG4gICAgdGhpcy5jb3VudCA9IHRoaXMuaXRlbXMucGlwZShtYXAoaXRlbXMgPT4gaXRlbXMubGVuZ3RoKSk7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIG9uU2VuZCA9ICgpID0+IHtcclxuICAgIGlmICh0aGlzLm1lc3NhZ2UpIHtcclxuICAgICAgdGhpcy5jb21tZW50T3B0aW9uPy5ldmVudD8ub25TZW5kKHRoaXMubWVzc2FnZSk7XHJcbiAgICAgIHRoaXMubWVzc2FnZSA9IG51bGw7XHJcbiAgICAgIHRoaXMudGV4dGFyZWE/LmZvY3VzKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAjbG9hZCA9IGFzeW5jICgpID0+IHtcclxuICAgIGNvbnN0IHtpdGVtc30gPSB0aGlzLmNvbW1lbnRPcHRpb247XHJcbiAgICBjb25zdCByZXN1bHRzID0gaXRlbXMoKTtcclxuICAgIGlmIChyZXN1bHRzIGluc3RhbmNlb2YgUHJvbWlzZSkge1xyXG4gICAgICByZXR1cm4gYXdhaXQgcmVzdWx0cztcclxuICAgIH1cclxuICAgIHJldHVybiByZXN1bHRzO1xyXG4gIH1cclxuXHJcbiAgcmVsb2FkID0gYXN5bmMgKCkgPT4ge1xyXG4gICAgdGhpcy4jaXRlbXMubmV4dChhd2FpdCB0aGlzLiNsb2FkKCkpO1xyXG4gIH1cclxuXHJcbiAgY2xlYXJBbGxEYXRhID0gKCkgPT4ge1xyXG4gICAgdGhpcy5tZXNzYWdlID0gJyc7XHJcbiAgfVxyXG59XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1X29uZW1vdW50L0RvY3VtZW50cy9saWItY29yZS11aS9wcm9qZWN0cy9zZC1jb3JlL2NvbW1lbnQvIiwic291cmNlcyI6WyJzcmMvbGliL2NvbW1lbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFJVCxLQUFLLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDckQsT0FBTyxFQUFDLGVBQWUsRUFBYSxNQUFNLE1BQU0sQ0FBQztBQUNqRCxPQUFPLEVBQUMsR0FBRyxFQUFZLE1BQU0sZ0JBQWdCLENBQUM7QUFFOUMsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFRMUQsTUFBTSxPQUFPLFNBQVM7SUFxQnBCLFlBQ1UsY0FBZ0M7UUFBaEMsbUJBQWMsR0FBZCxjQUFjLENBQWtCO1FBbkIxQyxpQkFBUyxJQUFJLGVBQWUsQ0FBWSxFQUFFLENBQUMsRUFBQztRQUM1QyxnQkFBUSxJQUFJLGVBQWUsQ0FBUyxFQUFFLENBQUMsRUFBQztRQUV4QywrQkFBa0I7UUFDbEIsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFPcEIsc0JBQWlCLEdBQUc7WUFDbEIsWUFBWSxFQUFFLE9BQU87U0FDdEIsQ0FBQztRQTZCRixXQUFNLEdBQUcsR0FBRyxFQUFFOztZQUNaLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtnQkFDaEIsWUFBQSxJQUFJLENBQUMsYUFBYSwwQ0FBRSxLQUFLLDBDQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFO2dCQUNoRCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztnQkFDcEIsTUFBQSxJQUFJLENBQUMsUUFBUSwwQ0FBRSxLQUFLLEdBQUc7YUFDeEI7UUFDSCxDQUFDLENBQUE7UUFFRCxnQkFBUSxHQUFTLEVBQUU7WUFDakIsTUFBTSxFQUFDLEtBQUssRUFBQyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7WUFDbkMsTUFBTSxPQUFPLEdBQUcsS0FBSyxFQUFFLENBQUM7WUFDeEIsSUFBSSxPQUFPLFlBQVksT0FBTyxFQUFFO2dCQUM5QixPQUFPLE1BQU0sT0FBTyxDQUFDO2FBQ3RCO1lBQ0QsT0FBTyxPQUFPLENBQUM7UUFDakIsQ0FBQyxDQUFBLEVBQUE7UUFFRCxXQUFNLEdBQUcsR0FBUyxFQUFFOztZQUNsQixJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1lBQ2hELHFDQUFZLElBQUksQ0FBQyxNQUFNLHlDQUFBLElBQUksQ0FBUSxDQUFDLENBQUM7WUFDckMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztZQUMvQyxtREFBQSxJQUFJLENBQWtCLENBQUM7WUFFdkIsZ0JBQUksSUFBSSxDQUFDLGFBQWEsMENBQUUsVUFBVSwwQ0FBRSxPQUFPLEVBQUU7Z0JBQzNDLGFBQWEsNENBQW1CLENBQUM7Z0JBQ2pDLHVCQUFBLElBQUksZ0JBQWdCLFdBQVcsQ0FBQyxHQUFTLEVBQUU7b0JBQ3pDLElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLG9CQUFvQixDQUFDLENBQUM7b0JBQ2hELHFDQUFZLElBQUksQ0FBQyxNQUFNLHlDQUFBLElBQUksQ0FBUSxDQUFDLENBQUM7b0JBQ3JDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUM7b0JBQy9DLG1EQUFBLElBQUksQ0FBa0IsQ0FBQztnQkFDekIsQ0FBQyxDQUFBLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLEVBQUM7YUFDM0M7UUFDSCxDQUFDLENBQUEsQ0FBQTtRQUVELGlCQUFZLEdBQUcsR0FBRyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBQ3BCLENBQUMsQ0FBQTtRQUVELDBCQUFrQixHQUFHLEVBQUU7WUFDckIsSUFBSTtnQkFDRixVQUFVLENBQUMsR0FBRyxFQUFFO29CQUNkLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUM7Z0JBQzdGLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQzthQUNUO1lBQUMsT0FBTyxHQUFHLEVBQUU7YUFDYjtRQUNILENBQUMsRUFBQTtJQWxFRCxDQUFDO0lBZkQsSUFBYSxNQUFNLENBQUMsTUFBdUI7UUFDekMsSUFBSSxDQUFDLGFBQWEsR0FBRyxNQUFNLENBQUM7UUFDNUIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFBQSxDQUFDO0lBY0YsUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLEdBQUcscUNBQVksSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUN4QyxPQUFPLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUU7O2dCQUFDLE9BQUEsaUNBQ2pCLENBQUMsS0FDSixPQUFPLFFBQUUsQ0FBQyxDQUFDLE9BQU8sbUNBQUksMkVBQTJFLENBQUMsQ0FBQyxPQUFPLEVBQUUsSUFDNUcsQ0FBQTthQUFBLENBQUMsQ0FBQztRQUNOLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDSixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO0lBQzNELENBQUM7SUFFRCxXQUFXOztRQUNULGdCQUFJLElBQUksQ0FBQyxhQUFhLDBDQUFFLFVBQVUsMENBQUUsT0FBTyxFQUFFO1lBQzNDLGFBQWEsNENBQW1CLENBQUM7U0FDbEM7SUFDSCxDQUFDO0lBRUQsZUFBZTtJQUNmLENBQUM7Ozs7WUFqREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0Qiw2MEtBQXVDO2dCQUV2QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7OztZQVBPLGdCQUFnQjs7OzRCQVNyQixTQUFTLFNBQUMsZUFBZTt1QkFDekIsU0FBUyxTQUFDLFVBQVU7cUJBT3BCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBBZnRlclZpZXdJbml0LFxyXG4gIE9uSW5pdCxcclxuICBPbkRlc3Ryb3ksXHJcbiAgSW5wdXQsXHJcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXHJcbiAgVmlld0NoaWxkLCBFbGVtZW50UmVmXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7U2RUZXh0YXJlYX0gZnJvbSAnQHNkLWFuZ3VsYXIvY29yZS90ZXh0YXJlYSc7XHJcbmltcG9ydCB7QmVoYXZpb3JTdWJqZWN0LCBPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHttYXAsIHN3aXRjaE1hcH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5pbXBvcnQge0NvbW1lbnQsIFNkQ29tbWVudE9wdGlvbn0gZnJvbSAnLi9jb21tZW50Lm1vZGVsJztcclxuaW1wb3J0IHtTZExvYWRpbmdTZXJ2aWNlfSBmcm9tICdAc2QtYW5ndWxhci9jb3JlL2xvYWRpbmcnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZC1jb21tZW50JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY29tbWVudC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vY29tbWVudC5jb21wb25lbnQuc2NzcyddLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZENvbW1lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XHJcbiAgQFZpZXdDaGlsZCgnY29tbWVudFNjcm9sbCcpIHByaXZhdGUgY29tbWVudFNjcm9sbDogRWxlbWVudFJlZjtcclxuICBAVmlld0NoaWxkKFNkVGV4dGFyZWEpIHRleHRhcmVhOiBTZFRleHRhcmVhO1xyXG4gICNpdGVtcyA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Q29tbWVudFtdPihbXSk7XHJcbiAgI3NlbmQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4oJycpO1xyXG4gIGNvbW1lbnRPcHRpb246IFNkQ29tbWVudE9wdGlvbjtcclxuICAjdGltZXJSZWxvYWQ6IGFueTtcclxuICBpc1JlbG9hZGluZyA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKSBzZXQgb3B0aW9uKG9wdGlvbjogU2RDb21tZW50T3B0aW9uKSB7XHJcbiAgICB0aGlzLmNvbW1lbnRPcHRpb24gPSBvcHRpb247XHJcbiAgICB0aGlzLnJlbG9hZCgpO1xyXG4gIH07XHJcblxyXG4gIGZ1bGxDb21tZW50U3R5bGVzID0ge1xyXG4gICAgJ21pbi1oZWlnaHQnOiAnMTUwcHgnXHJcbiAgfTtcclxuICBpdGVtczogT2JzZXJ2YWJsZTxDb21tZW50W10+O1xyXG4gIGNvdW50OiBPYnNlcnZhYmxlPG51bWJlcj47XHJcbiAgbWVzc2FnZTogc3RyaW5nO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgbG9hZGluZ1NlcnZpY2U6IFNkTG9hZGluZ1NlcnZpY2UsXHJcbiAgKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuaXRlbXMgPSB0aGlzLiNpdGVtcy5waXBlKG1hcChpdGVtcyA9PiB7XHJcbiAgICAgIHJldHVybiBpdGVtcy5tYXAoZSA9PiAoe1xyXG4gICAgICAgIC4uLmUsXHJcbiAgICAgICAgcGljdHVyZTogZS5waWN0dXJlID8/IGBodHRwczovL3VpLWF2YXRhcnMuY29tL2FwaS8/c2l6ZT0zMiZyb3VuZGVkPXRydWUmYmFja2dyb3VuZD1yYW5kb20mbmFtZT0ke2UuY3JlYXRvcn1gXHJcbiAgICAgIH0pKTtcclxuICAgIH0pKTtcclxuICAgIHRoaXMuY291bnQgPSB0aGlzLml0ZW1zLnBpcGUobWFwKGl0ZW1zID0+IGl0ZW1zLmxlbmd0aCkpO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5jb21tZW50T3B0aW9uPy5hdXRvUmVsb2FkPy50aW1lck1zKSB7XHJcbiAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy4jdGltZXJSZWxvYWQpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgb25TZW5kID0gKCkgPT4ge1xyXG4gICAgaWYgKHRoaXMubWVzc2FnZSkge1xyXG4gICAgICB0aGlzLmNvbW1lbnRPcHRpb24/LmV2ZW50Py5vblNlbmQodGhpcy5tZXNzYWdlKTtcclxuICAgICAgdGhpcy5tZXNzYWdlID0gbnVsbDtcclxuICAgICAgdGhpcy50ZXh0YXJlYT8uZm9jdXMoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gICNsb2FkID0gYXN5bmMgKCkgPT4ge1xyXG4gICAgY29uc3Qge2l0ZW1zfSA9IHRoaXMuY29tbWVudE9wdGlvbjtcclxuICAgIGNvbnN0IHJlc3VsdHMgPSBpdGVtcygpO1xyXG4gICAgaWYgKHJlc3VsdHMgaW5zdGFuY2VvZiBQcm9taXNlKSB7XHJcbiAgICAgIHJldHVybiBhd2FpdCByZXN1bHRzO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIHJlc3VsdHM7XHJcbiAgfVxyXG5cclxuICByZWxvYWQgPSBhc3luYyAoKSA9PiB7XHJcbiAgICB0aGlzLmxvYWRpbmdTZXJ2aWNlLnN0YXJ0KCcuYy1jb21tZW50LWxvYWRpbmcnKTtcclxuICAgIHRoaXMuI2l0ZW1zLm5leHQoYXdhaXQgdGhpcy4jbG9hZCgpKTtcclxuICAgIHRoaXMubG9hZGluZ1NlcnZpY2Uuc3RvcCgnLmMtY29tbWVudC1sb2FkaW5nJyk7XHJcbiAgICB0aGlzLiNzY3JvbGxUb0JvdHRvbSgpO1xyXG5cclxuICAgIGlmICh0aGlzLmNvbW1lbnRPcHRpb24/LmF1dG9SZWxvYWQ/LnRpbWVyTXMpIHtcclxuICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLiN0aW1lclJlbG9hZCk7XHJcbiAgICAgIHRoaXMuI3RpbWVyUmVsb2FkID0gc2V0SW50ZXJ2YWwoYXN5bmMgKCkgPT4ge1xyXG4gICAgICAgIHRoaXMubG9hZGluZ1NlcnZpY2Uuc3RhcnQoJy5jLWNvbW1lbnQtbG9hZGluZycpO1xyXG4gICAgICAgIHRoaXMuI2l0ZW1zLm5leHQoYXdhaXQgdGhpcy4jbG9hZCgpKTtcclxuICAgICAgICB0aGlzLmxvYWRpbmdTZXJ2aWNlLnN0b3AoJy5jLWNvbW1lbnQtbG9hZGluZycpO1xyXG4gICAgICAgIHRoaXMuI3Njcm9sbFRvQm90dG9tKCk7XHJcbiAgICAgIH0sIHRoaXMuY29tbWVudE9wdGlvbi5hdXRvUmVsb2FkLnRpbWVyTXMpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgY2xlYXJBbGxEYXRhID0gKCkgPT4ge1xyXG4gICAgdGhpcy5tZXNzYWdlID0gJyc7XHJcbiAgfVxyXG5cclxuICAjc2Nyb2xsVG9Cb3R0b20gPSAoKSA9PiB7XHJcbiAgICB0cnkge1xyXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICB0aGlzLmNvbW1lbnRTY3JvbGwubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLmNvbW1lbnRTY3JvbGwubmF0aXZlRWxlbWVudC5zY3JvbGxIZWlnaHQ7XHJcbiAgICAgIH0sIDUwMCk7XHJcbiAgICB9IGNhdGNoIChlcnIpIHtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19

package/esm2015/comment/src/lib/comment.model.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVudC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJDOi9Vc2Vycy9uZ2hpYXR0MTVfb25lbW91bnQvRG9jdW1lbnRzL2xpYi1jb3JlLXVpL3Byb2plY3RzL3NkLWNvcmUvY29tbWVudC8iLCJzb3VyY2VzIjpbInNyYy9saWIvY29tbWVudC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiXHJcbmV4cG9ydCBpbnRlcmZhY2UgU2RDb21tZW50T3B0aW9uIHtcclxuICBpdGVtczogKCkgPT4gQ29tbWVudFtdIHwgUHJvbWlzZTxDb21tZW50W10+O1xyXG4gIGV2ZW50OiB7XHJcbiAgICBvblNlbmQ6ICh0ZXh0OiBzdHJpbmcpID0+IFByb21pc2U8dm9pZD5cclxuICB9O1xyXG4gIGVkaXRvcj86IHtcclxuICAgIGVuYWJsZWQ/OiBib29sZWFuO1xyXG4gICAgdG9vbGJhcj86IGFueTtcclxuICAgIHN0eWxlcz86IGFueTtcclxuICAgIG1lbnRpb25WYWx1ZXM/OiB7IGlkOiBzdHJpbmcsIHZhbHVlOiBzdHJpbmcsIGxpbms/OiBzdHJpbmcgfVtdO1xyXG4gICAgaGFzaFRhZ1ZhbHVlcz86IHsgaWQ6IHN0cmluZywgdmFsdWU6IHN0cmluZywgbGluaz86IHN0cmluZyB9W107XHJcbiAgICBhcmdzPzogYW55O1xyXG4gIH07XHJcbiAgc3R5bGU6ICdiYXNpYycgfCAnc3R5bGUxJztcclxuICBmdWxsQ29tbWVudD86IHtcclxuICAgIGVuYWJsZWQ/OiBib29sZWFuO1xyXG4gICAgZW5hYmxlU2VuZEJ1dHRvbj86IGJvb2xlYW47XHJcbiAgICBjbG9zZUNsaWNrT3V0U2lkZT86IGJvb2xlYW47XHJcbiAgfTtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBDb21tZW50IGV4dGVuZHMgQmFzZUNvbW1lbnQge1xyXG4gIGNoaWxkcmVuOiBDb21tZW50THYyW107XHJcbn1cclxuXHJcbmludGVyZmFjZSBCYXNlQ29tbWVudCB7XHJcbiAgY3JlYXRvcjogc3RyaW5nO1xyXG4gIGVtYWlsOiBzdHJpbmc7XHJcbiAgY3JlYXRlZERhdGU6IHN0cmluZyB8IERhdGU7XHJcbiAgY29udGVudDogc3RyaW5nO1xyXG4gIHBpY3R1cmU6IHN0cmluZztcclxufVxyXG5cclxuaW50ZXJmYWNlIENvbW1lbnRMdjIgZXh0ZW5kcyBCYXNlQ29tbWVudCB7XHJcbiAgY2hpbGRyZW46IENvbW1lbnRMdjNbXTtcclxufVxyXG5cclxuaW50ZXJmYWNlIENvbW1lbnRMdjMgZXh0ZW5kcyBCYXNlQ29tbWVudCB7XHJcblxyXG59XHJcblxyXG5cclxuXHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVudC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJDOi9Vc2Vycy9uZ2hpYXR0MTVfb25lbW91bnQvRG9jdW1lbnRzL2xpYi1jb3JlLXVpL3Byb2plY3RzL3NkLWNvcmUvY29tbWVudC8iLCJzb3VyY2VzIjpbInNyYy9saWIvY29tbWVudC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiXHJcbmV4cG9ydCBpbnRlcmZhY2UgU2RDb21tZW50T3B0aW9uIHtcclxuICBpdGVtczogKCkgPT4gQ29tbWVudFtdIHwgUHJvbWlzZTxDb21tZW50W10+O1xyXG4gIGV2ZW50OiB7XHJcbiAgICBvblNlbmQ6ICh0ZXh0OiBzdHJpbmcpID0+IFByb21pc2U8dm9pZD5cclxuICB9O1xyXG4gIGVkaXRvcj86IHtcclxuICAgIGVuYWJsZWQ/OiBib29sZWFuO1xyXG4gICAgdG9vbGJhcj86IGFueTtcclxuICAgIHN0eWxlcz86IGFueTtcclxuICAgIG1lbnRpb25WYWx1ZXM/OiB7IGlkOiBzdHJpbmcsIHZhbHVlOiBzdHJpbmcsIGxpbms/OiBzdHJpbmcgfVtdO1xyXG4gICAgaGFzaFRhZ1ZhbHVlcz86IHsgaWQ6IHN0cmluZywgdmFsdWU6IHN0cmluZywgbGluaz86IHN0cmluZyB9W107XHJcbiAgICBhcmdzPzogYW55O1xyXG4gIH07XHJcbiAgc3R5bGU6ICdiYXNpYycgfCAnc3R5bGUxJztcclxuICBmdWxsQ29tbWVudD86IHtcclxuICAgIGVuYWJsZWQ/OiBib29sZWFuO1xyXG4gICAgZW5hYmxlU2VuZEJ1dHRvbj86IGJvb2xlYW47XHJcbiAgICBjbG9zZUNsaWNrT3V0U2lkZT86IGJvb2xlYW47XHJcbiAgfTtcclxuICBhdXRvUmVsb2FkPzoge1xyXG4gICAgZW5hYmxlZEJ1dHRvbj86IGJvb2xlYW47XHJcbiAgICB0aW1lck1zPzogbnVtYmVyO1xyXG4gIH07XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgQ29tbWVudCBleHRlbmRzIEJhc2VDb21tZW50IHtcclxuICBjaGlsZHJlbjogQ29tbWVudEx2MltdO1xyXG59XHJcblxyXG5pbnRlcmZhY2UgQmFzZUNvbW1lbnQge1xyXG4gIGNyZWF0b3I6IHN0cmluZztcclxuICBlbWFpbDogc3RyaW5nO1xyXG4gIGNyZWF0ZWREYXRlOiBzdHJpbmcgfCBEYXRlO1xyXG4gIGNvbnRlbnQ6IHN0cmluZztcclxuICBwaWN0dXJlOiBzdHJpbmc7XHJcbn1cclxuXHJcbmludGVyZmFjZSBDb21tZW50THYyIGV4dGVuZHMgQmFzZUNvbW1lbnQge1xyXG4gIGNoaWxkcmVuOiBDb21tZW50THYzW107XHJcbn1cclxuXHJcbmludGVyZmFjZSBDb21tZW50THYzIGV4dGVuZHMgQmFzZUNvbW1lbnQge1xyXG5cclxufVxyXG5cclxuXHJcblxyXG4iXX0=

package/esm2015/editor/src/lib/editor.component.js

@@ -402,7 +402,7 @@ SdEditor.decorators = [
                 selector: 'sd-editor',
                 template: "<div id=\"box-{{id}}\">\r\n  <label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n                                                                                        *ngIf=\"required\">*</span></label>\r\n  <ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n    <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                  (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n                  (onContentChanged)=\"onContentChanged($event)\"\r\n                  (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                  [maxLength]=\"maxlength\">\r\n    </quill-editor>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"formControl.disabled\">\r\n    <div [innerHtml]=\"formControl.value\"></div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"enableHTMLButton\">\r\n    <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n                 (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n    <sd-button\r\n      title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n      class=\"mr-8\"\r\n      fontSet=\"material-icons-outlined\"\r\n      (action)=\"onClickShowHtmlEditor()\"\r\n      type=\"light\"\r\n    ></sd-button>\r\n  </ng-container>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]
+                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-height:50px}::ng-deep .c-image-editor-quill-box{background:#000;display:inline-block;position:relative}::ng-deep .c-image-editor-quill-box:hover:after{background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACoklEQVRIia2WzUtVURTF1748RCQkHIhEiIiINJAGDqMcRYRNQgqiSCKoUUVE/0FIQ2lYJtGgQUhUUA36IIIggkD6HgU6iJz0IZpmrl+Dd67c7nv6hNqTe+5dZ++19zr7bG6oZEAmqU/SQUk7JHVLqgCzEfFK0i1JjyNisezb0Gx3AJeBOWAZ+AJM2X4JfALm0/cXwCCw8eBAJ/Caqj0Dhmy35UGAJmA7MAb8tD0PjNjeUPAO229tL9k+b7vSYP8A8DHtH24UPAPGU+bnbGcFTLb32z4DtJb8epOEM8DW9Qj6gXnbT9MBFzEBj2wDdJV9bR8DVmxfWI9g1PYysKcOJttPEkF3HbwFeG/7czm53DJJgxExCzyvh0eEIiLf+5dFxIKkhxHRoWpr11hF1T6fzrLsR8pqWNLR1D2ZpH5AETEOLKQ901mWnUjrtymBbknv6hE0AauXBuiRNFR4z5c783VEfChUsZi+N69VwWxEtNuuZFn2OyKuSLqTss8iYlzSgKR9ETGdSIsJbUkVzNYjEHDD9hzQW8Zsrx6y7Z46vgLup9u9uV78TNKkpBZJR8pgyqxmXbB+VefVw4j4tlYFm9KI+A70lTABN9Ic6iphFeAusGS7psX/Mtt7bS8BU0BnHZLiYefBLybpbgLrjpZ8XJwClm3PAAdsN62RzDbbt1NwbL+3fRI4BNT4rAqbbuIIMBoRbZLeSHqQ+vwXsDUidkkaBJoj4h6wPSJy6QxcjYjT6QKuKVeP7Uu2v1JrK2k2DSWZzuZAGicrtq81lCxV1JTG8gHbh23vBtpLe46noDlB/rwOtDQk2UASLanLaiq1PWH730lst9q+lVdQlAsY+2cCqSpnTlKUC/j6XwgSSSswWWqIif9GIK3KNUH1r+QasOkPpU8FJ4KtSqcAAAAASUVORK5CYII=\") 50% no-repeat;background-size:16px;bottom:0;content:\"\";left:0;position:absolute;top:0;width:100%}::ng-deep .c-image-editor-quill-box:hover img{opacity:.4}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]
             },] }
 ];
 SdEditor.ctorParameters = () => [

package/fesm2015/sd-angular-core-comment.js

@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 import { SdTranslateModule } from '@sd-angular/core/translate';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { __awaiter, __classPrivateFieldGet } from 'tslib';
+import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { SdTextarea, SdTextareaModule } from '@sd-angular/core/textarea';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { SdLoadingService } from '@sd-angular/core/loading';
 import { SdButtonModule } from '@sd-angular/core/button';
 import { SdInputModule } from '@sd-angular/core/input';
 import { SdUtilityModule } from '@sd-angular/core/utility';
@@ -14,11 +15,14 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdEditorModule } from '@sd-angular/core/editor';
 import { SdModalModule } from '@sd-angular/core/modal';
 
-var _items, _send, _load;
+var _items, _send, _timerReload, _load, _scrollToBottom;
 class SdComment {
-    constructor() {
+    constructor(loadingService) {
+        this.loadingService = loadingService;
         _items.set(this, new BehaviorSubject([]));
         _send.set(this, new BehaviorSubject(''));
+        _timerReload.set(this, void 0);
+        this.isReloading = false;
         this.fullCommentStyles = {
             'min-height': '150px'
         };
@@ -39,11 +43,33 @@ class SdComment {
             return results;
         }));
         this.reload = () => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            this.loadingService.start('.c-comment-loading');
             __classPrivateFieldGet(this, _items).next(yield __classPrivateFieldGet(this, _load).call(this));
+            this.loadingService.stop('.c-comment-loading');
+            __classPrivateFieldGet(this, _scrollToBottom).call(this);
+            if ((_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.autoReload) === null || _b === void 0 ? void 0 : _b.timerMs) {
+                clearInterval(__classPrivateFieldGet(this, _timerReload));
+                __classPrivateFieldSet(this, _timerReload, setInterval(() => __awaiter(this, void 0, void 0, function* () {
+                    this.loadingService.start('.c-comment-loading');
+                    __classPrivateFieldGet(this, _items).next(yield __classPrivateFieldGet(this, _load).call(this));
+                    this.loadingService.stop('.c-comment-loading');
+                    __classPrivateFieldGet(this, _scrollToBottom).call(this);
+                }), this.commentOption.autoReload.timerMs));
+            }
         });
         this.clearAllData = () => {
             this.message = '';
         };
+        _scrollToBottom.set(this, () => {
+            try {
+                setTimeout(() => {
+                    this.commentScroll.nativeElement.scrollTop = this.commentScroll.nativeElement.scrollHeight;
+                }, 500);
+            }
+            catch (err) {
+            }
+        });
     }
     set option(option) {
         this.commentOption = option;
@@ -60,21 +86,28 @@ class SdComment {
         this.count = this.items.pipe(map(items => items.length));
     }
     ngOnDestroy() {
+        var _a, _b;
+        if ((_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.autoReload) === null || _b === void 0 ? void 0 : _b.timerMs) {
+            clearInterval(__classPrivateFieldGet(this, _timerReload));
+        }
     }
     ngAfterViewInit() {
     }
 }
-_items = new WeakMap(), _send = new WeakMap(), _load = new WeakMap();
+_items = new WeakMap(), _send = new WeakMap(), _timerReload = new WeakMap(), _load = new WeakMap(), _scrollToBottom = new WeakMap();
 SdComment.decorators = [
     { type: Component, args: [{
                 selector: 'sd-comment',
-                template: "<div class=\"c-container\">\r\n  <div class=\"c-header\">\r\n    <div class=\"c-title\">{{'Comments' | sdTranslate}} <a href=\"javascript:;\">({{count | async}})</a></div>\r\n  </div>\r\n  <div class=\"c-body\" *ngIf=\"commentOption?.style==='basic'\">\r\n    <ng-container *ngFor=\"let item of items | async\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment\">\r\n          <div class=\"c-info mb-4\">\r\n            {{'By' | sdTranslate}}\r\n            <span class=\"c-creator ml-2\">\r\n              {{item.creator}}\r\n            </span>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <span class=\"mx-4\">\u2022</span>\r\n              <span\r\n                [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy HH:mm'\">{{item.createdDate | sdTimeDifferent:'dd/MM/yyyy HH:mm':'hour' | async}}</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-body-style1\" *ngIf=\"commentOption?.style==='style1'\" sdScroll>\r\n    <ng-container *ngFor=\"let item of items | async; let i = index\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment {{i + 1 === (count | async) ? 'c-comment-border': ''}}\">\r\n          <div class=\"c-info mb-4\">\r\n            <div class=\"c-col-left\">\r\n              <div class=\"c-creator\">\r\n                {{item.creator}}\r\n              </div>\r\n              <div class=\"c-email\">\r\n                {{item.email}}\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <div class=\"c-col-right\"\r\n                   [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy H:mm'\">{{item.createdDate | date:'dd/MM/yyyy H:mm'}}</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-footer p-16\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 c-position-relative\">\r\n        <ng-container *ngIf=\"commentOption?.editor?.enabled else noUseEditor\">\r\n          <div class=\"mb-8\">\r\n            <sd-editor [(model)]=\"message\" [styles]=\"commentOption?.editor?.styles\"\r\n                       [toolbar]=\"commentOption?.editor?.toolbar\"\r\n                       [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n                       [hashTagValues]=\"commentOption?.editor?.hashTagValues\"></sd-editor>\r\n          </div>\r\n          <div *ngIf=\"commentOption?.fullComment?.enabled\" class=\"c-full-comment-backdrop\"\r\n               (click)=\"modalFullComment.open()\"></div>\r\n        </ng-container>\r\n        <ng-template #noUseEditor>\r\n          <sd-textarea [(model)]=\"message\" rows=\"1\" autoHeight></sd-textarea>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <sd-button class=\"float-right\" title=\"G\u1EEDi\" (action)=\"onSend()\" [disabled]=\"!message\" color=\"primary\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sd-modal [title]=\"'Comments' | sdTranslate\" width=\"sm\" [closeClickOutSide]=\"commentOption?.fullComment?.closeClickOutSide\" #modalFullComment>\r\n  <sd-modal-body>\r\n    <sd-editor [(model)]=\"message\" [styles]=\"fullCommentStyles\"\r\n               [toolbar]=\"commentOption?.editor?.toolbar\"\r\n               [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n               [hashTagValues]=\"commentOption?.editor?.hashTagValues\"\r\n               [args]=\"commentOption?.editor?.args\"></sd-editor>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"ml-8\" title=\"X\u00F3a to\u00E0n b\u1ED9\" size=\"sm\" type=\"link\"\r\n               (action)=\"clearAllData()\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"!commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"\u0110\u00F3ng\" size=\"sm\" (action)=\"modalFullComment.close()\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"G\u1EEDi\" size=\"sm\" (action)=\"onSend();modalFullComment.close();\" [disabled]=\"!message\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                template: "<div class=\"c-container\">\r\n  <div class=\"c-header\">\r\n    <div class=\"c-title\">{{'Comments' | sdTranslate}} <a href=\"javascript:;\">({{count | async}})</a></div>\r\n  </div>\r\n  <div class=\"c-body c-comment-loading\" *ngIf=\"commentOption?.style==='basic'\" #commentScroll>\r\n    <ng-container *ngFor=\"let item of items | async\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment\">\r\n          <div class=\"c-info mb-4\">\r\n            {{'By' | sdTranslate}}\r\n            <span class=\"c-creator ml-2\">\r\n              {{item.creator}}\r\n            </span>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <span class=\"mx-4\">\u2022</span>\r\n              <span\r\n                [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy HH:mm'\">{{item.createdDate | sdTimeDifferent:'dd/MM/yyyy HH:mm':'hour' | async}}</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-body-style1 c-comment-loading\" *ngIf=\"commentOption?.style==='style1'\" sdScroll #commentScroll>\r\n    <ng-container *ngFor=\"let item of items | async; let i = index\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment {{i + 1 === (count | async) ? 'c-comment-border': ''}}\">\r\n          <div class=\"c-info mb-4\">\r\n            <div class=\"c-col-left\">\r\n              <div class=\"c-creator\">\r\n                {{item.creator}}\r\n              </div>\r\n              <div class=\"c-email\">\r\n                {{item.email}}\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <div class=\"c-col-right\"\r\n                   [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy H:mm'\">{{item.createdDate | date:'dd/MM/yyyy H:mm'}}</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-footer p-16\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 c-position-relative\">\r\n        <ng-container *ngIf=\"commentOption?.editor?.enabled else noUseEditor\">\r\n          <div class=\"mb-8\">\r\n            <sd-editor [(model)]=\"message\" [styles]=\"commentOption?.editor?.styles\"\r\n                       [toolbar]=\"commentOption?.editor?.toolbar\"\r\n                       [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n                       [hashTagValues]=\"commentOption?.editor?.hashTagValues\"></sd-editor>\r\n          </div>\r\n          <div *ngIf=\"commentOption?.fullComment?.enabled\" class=\"c-full-comment-backdrop\"\r\n               (click)=\"modalFullComment.open()\"></div>\r\n        </ng-container>\r\n        <ng-template #noUseEditor>\r\n          <sd-textarea [(model)]=\"message\" rows=\"1\" autoHeight></sd-textarea>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <sd-button class=\"float-right\" title=\"G\u1EEDi\" (action)=\"onSend()\" [disabled]=\"!message\" color=\"primary\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n        <sd-button class=\"float-right mr-8\" title=\"T\u1EA3i l\u1EA1i\"  (action)=\"reload()\" *ngIf=\"commentOption?.autoReload?.enabledButton\" color=\"warning\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sd-modal [title]=\"'Comments' | sdTranslate\" width=\"sm\" [closeClickOutSide]=\"commentOption?.fullComment?.closeClickOutSide\" #modalFullComment>\r\n  <sd-modal-body>\r\n    <sd-editor [(model)]=\"message\" [styles]=\"fullCommentStyles\"\r\n               [toolbar]=\"commentOption?.editor?.toolbar\"\r\n               [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n               [hashTagValues]=\"commentOption?.editor?.hashTagValues\"\r\n               [args]=\"commentOption?.editor?.args\"></sd-editor>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"ml-8\" title=\"X\u00F3a to\u00E0n b\u1ED9\" size=\"sm\" type=\"link\"\r\n               (action)=\"clearAllData()\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"!commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"\u0110\u00F3ng\" size=\"sm\" (action)=\"modalFullComment.close()\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n    <sd-button class=\"ml-8\" title=\"T\u1EA3i l\u1EA1i\" (action)=\"reload()\"  *ngIf=\"commentOption?.autoReload?.enabledButton\" color=\"warning\" type=\"fill\"\r\n               size=\"sm\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"G\u1EEDi\" size=\"sm\" (action)=\"onSend();modalFullComment.close();\" [disabled]=\"!message\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".text-black400{color:#757575}.c-container{display:flex;flex-direction:column;height:100%}.c-container .c-header{align-items:center;background-color:#fff;display:flex;height:40px;padding:0 16px}.c-container .c-header .c-title{font-weight:500}.c-container .c-body{background:#f8f9fa;flex:1;overflow-y:hidden;padding:16px}.c-container .c-body:hover{overflow-y:auto}.c-container .c-body .c-comment{background:#fff;border:1px solid #f2f2f2;border-radius:4px;flex:1;overflow-wrap:break-word;padding:12px 16px;white-space:pre-wrap;word-break:break-word}.c-container .c-body .c-comment .c-info{color:#757575}.c-container .c-body .c-comment .c-info .c-creator{color:#000;font-weight:500}.c-container .c-body-style1{background:#fff;flex:1;overflow-y:hidden;padding:16px}.c-container .c-body-style1 .c-comment{background:#fff;border-bottom:3px solid #f2f2f2;border-radius:4px;flex:1;overflow-wrap:break-word;white-space:pre-wrap;word-break:break-word}.c-container .c-body-style1 .c-comment .c-info{color:#757575}.c-container .c-body-style1 .c-comment .c-info .c-creator{color:#000;font-weight:500;white-space:nowrap}.c-container .c-body-style1 .c-comment .c-info .c-email{color:#000;font-weight:400;white-space:nowrap}.c-container .c-body-style1 .c-comment .c-info .c-col-left{display:inline-block;overflow:hidden;vertical-align:top;width:calc(100% - 128px)}.c-container .c-body-style1 .c-comment .c-info .c-col-right{display:inline-block;margin-left:8px;width:120px}.c-container .c-body-style1 .c-comment-border{border-bottom:none}.c-container .c-footer{background:#fff;min-height:120px}.c-container .c-footer .c-position-relative{position:relative}.c-container .c-footer .c-full-comment-backdrop{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}"]
             },] }
 ];
-SdComment.ctorParameters = () => [];
+SdComment.ctorParameters = () => [
+    { type: SdLoadingService }
+];
 SdComment.propDecorators = {
+    commentScroll: [{ type: ViewChild, args: ['commentScroll',] }],
     textarea: [{ type: ViewChild, args: [SdTextarea,] }],
     option: [{ type: Input }]
 };

package/fesm2015/sd-angular-core-comment.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-comment.js","sources":["../../../../projects/sd-core/comment/src/lib/comment.component.ts","../../../../projects/sd-core/comment/src/lib/comment.module.ts","../../../../projects/sd-core/comment/src/public-api.ts","../../../../projects/sd-core/comment/sd-angular-core-comment.ts"],"sourcesContent":["import {\r\n  Component,\r\n  AfterViewInit,\r\n  OnInit,\r\n  OnDestroy,\r\n  Input,\r\n  ChangeDetectionStrategy,\r\n  ViewChild\r\n} from '@angular/core';\r\nimport {SdTextarea} from '@sd-angular/core/textarea';\r\nimport {BehaviorSubject, Observable} from 'rxjs';\r\nimport {map, switchMap} from 'rxjs/operators';\r\nimport {Comment, SdCommentOption} from './comment.model';\r\n\r\n@Component({\r\n  selector: 'sd-comment',\r\n  templateUrl: './comment.component.html',\r\n  styleUrls: ['./comment.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdComment implements OnInit, AfterViewInit, OnDestroy {\r\n  @ViewChild(SdTextarea) textarea: SdTextarea;\r\n  #items = new BehaviorSubject<Comment[]>([]);\r\n  #send = new BehaviorSubject<string>('');\r\n  commentOption: SdCommentOption;\r\n\r\n  @Input() set option(option: SdCommentOption) {\r\n    this.commentOption = option;\r\n    this.reload();\r\n  };\r\n\r\n  fullCommentStyles = {\r\n    'min-height': '150px'\r\n  };\r\n  items: Observable<Comment[]>;\r\n  count: Observable<number>;\r\n  message: string;\r\n\r\n  constructor() {\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.items = this.#items.pipe(map(items => {\r\n      return items.map(e => ({\r\n        ...e,\r\n        picture: e.picture ?? `https://ui-avatars.com/api/?size=32&rounded=true&background=random&name=${e.creator}`\r\n      }));\r\n    }));\r\n    this.count = this.items.pipe(map(items => items.length));\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n  }\r\n\r\n  onSend = () => {\r\n    if (this.message) {\r\n      this.commentOption?.event?.onSend(this.message);\r\n      this.message = null;\r\n      this.textarea?.focus();\r\n    }\r\n  }\r\n\r\n  #load = async () => {\r\n    const {items} = this.commentOption;\r\n    const results = items();\r\n    if (results instanceof Promise) {\r\n      return await results;\r\n    }\r\n    return results;\r\n  }\r\n\r\n  reload = async () => {\r\n    this.#items.next(await this.#load());\r\n  }\r\n\r\n  clearAllData = () => {\r\n    this.message = '';\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { SdComment } from './comment.component';\r\nimport { SdButtonModule } from '@sd-angular/core/button';\r\nimport { SdInputModule } from '@sd-angular/core/input';\r\nimport { SdTextareaModule } from '@sd-angular/core/textarea';\r\nimport { SdUtilityModule } from '@sd-angular/core/utility';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport {SdEditorModule} from '@sd-angular/core/editor';\r\nimport {SdModalModule} from '@sd-angular/core/modal';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatButtonModule,\r\n    MatIconModule,\r\n    MatTooltipModule,\r\n    SdTranslateModule,\r\n    SdButtonModule,\r\n    SdInputModule,\r\n    SdTextareaModule,\r\n    SdEditorModule,\r\n    SdUtilityModule,\r\n    SdModalModule\r\n  ],\r\n  declarations: [\r\n    SdComment\r\n  ],\r\n  exports: [\r\n    SdComment\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdCommentModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/comment.module';\r\nexport * from './lib/comment.model';\r\nexport * from './lib/comment.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;MAoBa,SAAS;IAkBpB;QAhBA,iBAAS,IAAI,eAAe,CAAY,EAAE,CAAC,EAAC;QAC5C,gBAAQ,IAAI,eAAe,CAAS,EAAE,CAAC,EAAC;QAQxC,sBAAiB,GAAG;YAClB,YAAY,EAAE,OAAO;SACtB,CAAC;QAwBF,WAAM,GAAG;;YACP,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,YAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,0CAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE;gBAChD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,GAAG;aACxB;SACF,CAAA;QAED,gBAAQ;YACN,MAAM,EAAC,KAAK,EAAC,GAAG,IAAI,CAAC,aAAa,CAAC;YACnC,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;YACxB,IAAI,OAAO,YAAY,OAAO,EAAE;gBAC9B,OAAO,MAAM,OAAO,CAAC;aACtB;YACD,OAAO,OAAO,CAAC;SAChB,CAAA,EAAA;QAED,WAAM,GAAG;YACP,qCAAY,IAAI,CAAC,MAAM,yCAAA,IAAI,CAAQ,CAAC,CAAC;SACtC,CAAA,CAAA;QAED,iBAAY,GAAG;YACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;SACnB,CAAA;KAzCA;IAbD,IAAa,MAAM,CAAC,MAAuB;QACzC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;;IAYD,QAAQ;QACN,IAAI,CAAC,KAAK,GAAG,qCAAY,IAAI,CAAC,GAAG,CAAC,KAAK;YACrC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC;;gBAAI,wCACjB,CAAC,KACJ,OAAO,QAAE,CAAC,CAAC,OAAO,mCAAI,2EAA2E,CAAC,CAAC,OAAO,EAAE,KAC5G;aAAA,CAAC,CAAC;SACL,CAAC,CAAC,CAAC;QACJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;KAC1D;IAED,WAAW;KACV;IAED,eAAe;KACd;;;;YAzCF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,+zJAAuC;gBAEvC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;uBAEE,SAAS,SAAC,UAAU;qBAKpB,KAAK;;;MCWK,eAAe;;;YAvB3B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,eAAe;oBACf,aAAa;oBACb,gBAAgB;oBAChB,iBAAiB;oBACjB,cAAc;oBACd,aAAa;oBACb,gBAAgB;oBAChB,cAAc;oBACd,eAAe;oBACf,aAAa;iBACd;gBACD,YAAY,EAAE;oBACZ,SAAS;iBACV;gBACD,OAAO,EAAE;oBACP,SAAS;iBACV;gBACD,SAAS,EAAE,EACV;aACF;;;ACpCD;;;;ACAA;;;;;;"}
+{"version":3,"file":"sd-angular-core-comment.js","sources":["../../../../projects/sd-core/comment/src/lib/comment.component.ts","../../../../projects/sd-core/comment/src/lib/comment.module.ts","../../../../projects/sd-core/comment/src/public-api.ts","../../../../projects/sd-core/comment/sd-angular-core-comment.ts"],"sourcesContent":["import {\r\n  Component,\r\n  AfterViewInit,\r\n  OnInit,\r\n  OnDestroy,\r\n  Input,\r\n  ChangeDetectionStrategy,\r\n  ViewChild, ElementRef\r\n} from '@angular/core';\r\nimport {SdTextarea} from '@sd-angular/core/textarea';\r\nimport {BehaviorSubject, Observable} from 'rxjs';\r\nimport {map, switchMap} from 'rxjs/operators';\r\nimport {Comment, SdCommentOption} from './comment.model';\r\nimport {SdLoadingService} from '@sd-angular/core/loading';\r\n\r\n@Component({\r\n  selector: 'sd-comment',\r\n  templateUrl: './comment.component.html',\r\n  styleUrls: ['./comment.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdComment implements OnInit, AfterViewInit, OnDestroy {\r\n  @ViewChild('commentScroll') private commentScroll: ElementRef;\r\n  @ViewChild(SdTextarea) textarea: SdTextarea;\r\n  #items = new BehaviorSubject<Comment[]>([]);\r\n  #send = new BehaviorSubject<string>('');\r\n  commentOption: SdCommentOption;\r\n  #timerReload: any;\r\n  isReloading = false;\r\n\r\n  @Input() set option(option: SdCommentOption) {\r\n    this.commentOption = option;\r\n    this.reload();\r\n  };\r\n\r\n  fullCommentStyles = {\r\n    'min-height': '150px'\r\n  };\r\n  items: Observable<Comment[]>;\r\n  count: Observable<number>;\r\n  message: string;\r\n\r\n  constructor(\r\n    private loadingService: SdLoadingService,\r\n  ) {\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.items = this.#items.pipe(map(items => {\r\n      return items.map(e => ({\r\n        ...e,\r\n        picture: e.picture ?? `https://ui-avatars.com/api/?size=32&rounded=true&background=random&name=${e.creator}`\r\n      }));\r\n    }));\r\n    this.count = this.items.pipe(map(items => items.length));\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.commentOption?.autoReload?.timerMs) {\r\n      clearInterval(this.#timerReload);\r\n    }\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n  }\r\n\r\n  onSend = () => {\r\n    if (this.message) {\r\n      this.commentOption?.event?.onSend(this.message);\r\n      this.message = null;\r\n      this.textarea?.focus();\r\n    }\r\n  }\r\n\r\n  #load = async () => {\r\n    const {items} = this.commentOption;\r\n    const results = items();\r\n    if (results instanceof Promise) {\r\n      return await results;\r\n    }\r\n    return results;\r\n  }\r\n\r\n  reload = async () => {\r\n    this.loadingService.start('.c-comment-loading');\r\n    this.#items.next(await this.#load());\r\n    this.loadingService.stop('.c-comment-loading');\r\n    this.#scrollToBottom();\r\n\r\n    if (this.commentOption?.autoReload?.timerMs) {\r\n      clearInterval(this.#timerReload);\r\n      this.#timerReload = setInterval(async () => {\r\n        this.loadingService.start('.c-comment-loading');\r\n        this.#items.next(await this.#load());\r\n        this.loadingService.stop('.c-comment-loading');\r\n        this.#scrollToBottom();\r\n      }, this.commentOption.autoReload.timerMs);\r\n    }\r\n  }\r\n\r\n  clearAllData = () => {\r\n    this.message = '';\r\n  }\r\n\r\n  #scrollToBottom = () => {\r\n    try {\r\n      setTimeout(() => {\r\n        this.commentScroll.nativeElement.scrollTop = this.commentScroll.nativeElement.scrollHeight;\r\n      }, 500);\r\n    } catch (err) {\r\n    }\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { SdComment } from './comment.component';\r\nimport { SdButtonModule } from '@sd-angular/core/button';\r\nimport { SdInputModule } from '@sd-angular/core/input';\r\nimport { SdTextareaModule } from '@sd-angular/core/textarea';\r\nimport { SdUtilityModule } from '@sd-angular/core/utility';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport {SdEditorModule} from '@sd-angular/core/editor';\r\nimport {SdModalModule} from '@sd-angular/core/modal';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatButtonModule,\r\n    MatIconModule,\r\n    MatTooltipModule,\r\n    SdTranslateModule,\r\n    SdButtonModule,\r\n    SdInputModule,\r\n    SdTextareaModule,\r\n    SdEditorModule,\r\n    SdUtilityModule,\r\n    SdModalModule\r\n  ],\r\n  declarations: [\r\n    SdComment\r\n  ],\r\n  exports: [\r\n    SdComment\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdCommentModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/comment.module';\r\nexport * from './lib/comment.model';\r\nexport * from './lib/comment.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/sd-angular-core-editor.js

@@ -514,7 +514,7 @@ SdEditor.decorators = [
                 selector: 'sd-editor',
                 template: "<div id=\"box-{{id}}\">\r\n  <label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n                                                                                        *ngIf=\"required\">*</span></label>\r\n  <ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n    <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                  (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n                  (onContentChanged)=\"onContentChanged($event)\"\r\n                  (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                  [maxLength]=\"maxlength\">\r\n    </quill-editor>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"formControl.disabled\">\r\n    <div [innerHtml]=\"formControl.value\"></div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"enableHTMLButton\">\r\n    <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n                 (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n    <sd-button\r\n      title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n      class=\"mr-8\"\r\n      fontSet=\"material-icons-outlined\"\r\n      (action)=\"onClickShowHtmlEditor()\"\r\n      type=\"light\"\r\n    ></sd-button>\r\n  </ng-container>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]
+                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-height:50px}::ng-deep .c-image-editor-quill-box{background:#000;display:inline-block;position:relative}::ng-deep .c-image-editor-quill-box:hover:after{background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACoklEQVRIia2WzUtVURTF1748RCQkHIhEiIiINJAGDqMcRYRNQgqiSCKoUUVE/0FIQ2lYJtGgQUhUUA36IIIggkD6HgU6iJz0IZpmrl+Dd67c7nv6hNqTe+5dZ++19zr7bG6oZEAmqU/SQUk7JHVLqgCzEfFK0i1JjyNisezb0Gx3AJeBOWAZ+AJM2X4JfALm0/cXwCCw8eBAJ/Caqj0Dhmy35UGAJmA7MAb8tD0PjNjeUPAO229tL9k+b7vSYP8A8DHtH24UPAPGU+bnbGcFTLb32z4DtJb8epOEM8DW9Qj6gXnbT9MBFzEBj2wDdJV9bR8DVmxfWI9g1PYysKcOJttPEkF3HbwFeG/7czm53DJJgxExCzyvh0eEIiLf+5dFxIKkhxHRoWpr11hF1T6fzrLsR8pqWNLR1D2ZpH5AETEOLKQ901mWnUjrtymBbknv6hE0AauXBuiRNFR4z5c783VEfChUsZi+N69VwWxEtNuuZFn2OyKuSLqTss8iYlzSgKR9ETGdSIsJbUkVzNYjEHDD9hzQW8Zsrx6y7Z46vgLup9u9uV78TNKkpBZJR8pgyqxmXbB+VefVw4j4tlYFm9KI+A70lTABN9Ic6iphFeAusGS7psX/Mtt7bS8BU0BnHZLiYefBLybpbgLrjpZ8XJwClm3PAAdsN62RzDbbt1NwbL+3fRI4BNT4rAqbbuIIMBoRbZLeSHqQ+vwXsDUidkkaBJoj4h6wPSJy6QxcjYjT6QKuKVeP7Uu2v1JrK2k2DSWZzuZAGicrtq81lCxV1JTG8gHbh23vBtpLe46noDlB/rwOtDQk2UASLanLaiq1PWH730lst9q+lVdQlAsY+2cCqSpnTlKUC/j6XwgSSSswWWqIif9GIK3KNUH1r+QasOkPpU8FJ4KtSqcAAAAASUVORK5CYII=\") 50% no-repeat;background-size:16px;bottom:0;content:\"\";left:0;position:absolute;top:0;width:100%}::ng-deep .c-image-editor-quill-box:hover img{opacity:.4}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]
             },] }
 ];
 SdEditor.ctorParameters = () => [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sd-angular/core",
-  "version": "1.3.73",
+  "version": "1.3.74",
   "homepage": "https://www.facebook.com/DarkP3ter",
   "author": {
     "name": "darkpeter",