tnx-shared 5.2.24 → 5.2.25

package/esm2020/components/report-queue/report-queue.component.mjs

@@ -271,7 +271,7 @@ export class ReportQueueComponent {
     }
 }
 ReportQueueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ReportQueueComponent, deps: [{ token: i1.NotifierService }, { token: i2.CommonService }, { token: i3.FileExplorerService }, { token: i4.TemplateService }, { token: i5.SignalRService }, { token: i6.HighPerformanceService }, { token: i7.CrudService }], target: i0.ɵɵFactoryTarget.Component });
-ReportQueueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ReportQueueComponent, selector: "report-queue", inputs: { parentDataModel: "parentDataModel", name: "name", header: "header", autoDownload: "autoDownload" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }], ngImport: i0, template: "<div class=\"rq-container\" *ngIf=\"showQueue()\">\r\n    <div class=\"rq-header\">\r\n        <div>{{header | translate}}</div>\r\n        <div>\r\n\r\n            <p-checkbox [(ngModel)]=\"autoDownload\" binary=\"true\" pTooltip=\"T\u1EF1 \u0111\u1ED9ng t\u1EA3i\" tooltipPosition=\"left\">\r\n            </p-checkbox>\r\n\r\n            <a href=\"javascript:;\" (click)=\"toggleExpand()\" pTooltip=\"{{expand ? 'Thu g\u1ECDn' : 'M\u1EDF r\u1ED9ng'}}\"\r\n                tooltipPosition=\"left\">\r\n                <i class=\"fas\" [ngClass]=\"{'fa-compress' : expand, 'fa-expand': !expand}\"></i>\r\n            </a>\r\n\r\n            <a href=\"javascript:;\" (click)=\"close()\" pTooltip=\"\u0110\u00F3ng\">\r\n                <i class=\"fas fa-times\"></i>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    <div class=\"rq-body\" *ngIf=\"expand\">\r\n        <tn-custom-scrollbar [style]=\"{'height.px': popupHeight}\" #scrollbar>\r\n            <div class=\"re-job\" *ngFor=\"let job of _queue\">\r\n                <div class=\"re-job-title\">\r\n                    <div>{{getName(job)}}</div>\r\n                    <div>\r\n                        <a href=\"javascript:;\" (click)=\"cancelJob(job)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n                <div class=\"re-job-result\"\r\n                    [ngClass]=\"{'job-success': job._status == statuses.Success, 'job-error': job._status == statuses.Error, 'job-exporting' : job._status == statuses.Exporting, 'job-downloaded': job._status == statuses.Downloaded}\">\r\n                    <span *ngIf=\"job._status != statuses.Success && job._status != statuses.Exporting\">\r\n                        {{dicStatus.get(job._status) | translate}}\r\n                    </span>\r\n\r\n                    <span *ngIf=\"job._status == statuses.Exporting\">\r\n                        <div class=\"loader\"></div>\r\n                        {{dicStatus.get(job._status) | translate}}\r\n                    </span>\r\n\r\n                    <a href=\"javascript:;\" (click)=\"download(job)\" class=\"job-success\"\r\n                        *ngIf=\"job._status == statuses.Success\">\r\n                        <i class=\"fas fa-download\"></i> {{dicStatus.get(job._status) | translate}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .rq-container{width:350px;border:1px solid #3192e1;border-radius:3px;background-color:#fff}::ng-deep .rq-container .rq-header{background-color:#3192e1;padding:5px 10px;display:flex;border-radius:3px 3px 0 0;color:#fff;font-weight:400;font-size:15px}::ng-deep .rq-container .rq-header>div:first-child{flex-grow:1}::ng-deep .rq-container .rq-header>div:last-child>a{font-weight:200;margin-left:10px;color:#fff}::ng-deep .rq-container .rq-header>div:last-child>a>i{font-size:13px}::ng-deep .rq-container .rq-header>div:last-child .ui-chkbox-box{width:14px;height:14px;margin-top:-2px}::ng-deep .rq-container .rq-header>div:last-child .ui-chkbox-icon{font-size:13px;line-height:13px}::ng-deep .rq-container .rq-body .re-job{padding:6px 10px;display:flex;flex-direction:column}::ng-deep .rq-container .rq-body .re-job:first-child{padding-top:6px}::ng-deep .rq-container .rq-body .re-job .re-job-title{display:flex;font-size:13px}::ng-deep .rq-container .rq-body .re-job .re-job-title>div:first-child{flex-grow:1;padding-bottom:3px}::ng-deep .rq-container .rq-body .re-job .re-job-title>div a{color:#3192e1}::ng-deep .rq-container .rq-body .re-job .re-job-result{font-size:11px}::ng-deep .rq-container .rq-body .re-job .re-job-result>span{display:flex;align-items:center;height:20px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-exporting{color:#3192e1}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-exporting>span>div{margin-right:5px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-success{color:#1ab91a}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-success>a>i{margin-right:2px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-error{color:#e95353}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-downloaded{color:#b2b2b2}::ng-deep .loader{border:2px solid #bcdbf5;border-radius:50%;border-top:2px solid #3192e1;width:12px;height:12px;animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:absolute;bottom:1px;right:2px;z-index:1000}\n"], dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "component", type: i12.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
+ReportQueueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ReportQueueComponent, selector: "report-queue", inputs: { parentDataModel: "parentDataModel", name: "name", header: "header", autoDownload: "autoDownload" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }], ngImport: i0, template: "<div class=\"rq-container\" *ngIf=\"showQueue()\">\r\n    <div class=\"rq-header\">\r\n        <div>{{header | translate}}</div>\r\n        <div>\r\n\r\n            <p-checkbox [(ngModel)]=\"autoDownload\" binary=\"true\" pTooltip=\"T\u1EF1 \u0111\u1ED9ng t\u1EA3i\" tooltipPosition=\"left\">\r\n            </p-checkbox>\r\n\r\n            <a href=\"javascript:;\" (click)=\"toggleExpand()\" pTooltip=\"{{expand ? 'Thu g\u1ECDn' : 'M\u1EDF r\u1ED9ng'}}\"\r\n                tooltipPosition=\"left\">\r\n                <i class=\"fas\" [ngClass]=\"{'fa-compress' : expand, 'fa-expand': !expand}\"></i>\r\n            </a>\r\n\r\n            <a href=\"javascript:;\" (click)=\"close()\" pTooltip=\"\u0110\u00F3ng\">\r\n                <i class=\"fas fa-times\"></i>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    <div class=\"rq-body\" *ngIf=\"expand\">\r\n        <tn-custom-scrollbar [style]=\"{'height.px': popupHeight}\" #scrollbar>\r\n            <div class=\"re-job\" *ngFor=\"let job of _queue\">\r\n                <div class=\"re-job-title\">\r\n                    <div>{{getName(job)}}</div>\r\n                    <div>\r\n                        <a href=\"javascript:;\" (click)=\"cancelJob(job)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n                <div class=\"re-job-result\"\r\n                    [ngClass]=\"{'job-success': job._status == statuses.Success, 'job-error': job._status == statuses.Error, 'job-exporting' : job._status == statuses.Exporting, 'job-downloaded': job._status == statuses.Downloaded}\">\r\n                    <span *ngIf=\"job._status != statuses.Success && job._status != statuses.Exporting\">\r\n                        {{dicStatus.get(job._status) | translate}}\r\n                    </span>\r\n\r\n                    <span *ngIf=\"job._status == statuses.Exporting\">\r\n                        <div class=\"loader\"></div>\r\n                        {{dicStatus.get(job._status) | translate}}\r\n                    </span>\r\n\r\n                    <a href=\"javascript:;\" (click)=\"download(job)\" class=\"job-success\"\r\n                        *ngIf=\"job._status == statuses.Success\">\r\n                        <i class=\"fas fa-download\"></i> {{dicStatus.get(job._status) | translate}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .rq-container{width:350px;border:1px solid #3192e1;border-radius:3px;background-color:#fff}::ng-deep .rq-container .rq-header{background-color:#3192e1;padding:5px 10px;display:flex;border-radius:3px 3px 0 0;color:#fff;font-weight:400;font-size:15px}::ng-deep .rq-container .rq-header>div:first-child{flex-grow:1}::ng-deep .rq-container .rq-header>div:last-child>a{font-weight:200;margin-left:10px;color:#fff}::ng-deep .rq-container .rq-header>div:last-child>a>i{font-size:13px}::ng-deep .rq-container .rq-header>div:last-child .ui-chkbox-box{width:14px;height:14px;margin-top:-2px}::ng-deep .rq-container .rq-header>div:last-child .ui-chkbox-icon{font-size:13px;line-height:13px}::ng-deep .rq-container .rq-body .re-job{padding:6px 10px;display:flex;flex-direction:column}::ng-deep .rq-container .rq-body .re-job:first-child{padding-top:6px}::ng-deep .rq-container .rq-body .re-job .re-job-title{display:flex;font-size:13px}::ng-deep .rq-container .rq-body .re-job .re-job-title>div:first-child{flex-grow:1;padding-bottom:3px}::ng-deep .rq-container .rq-body .re-job .re-job-title>div a{color:#3192e1}::ng-deep .rq-container .rq-body .re-job .re-job-result{font-size:11px}::ng-deep .rq-container .rq-body .re-job .re-job-result>span{display:flex;align-items:center;height:20px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-exporting{color:#3192e1}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-exporting>span>div{margin-right:5px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-success{color:#1ab91a}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-success>a>i{margin-right:2px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-error{color:#e95353}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-downloaded{color:#b2b2b2}::ng-deep .loader{border:2px solid #bcdbf5;border-radius:50%;border-top:2px solid #3192e1;width:12px;height:12px;animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:absolute;bottom:1px;right:2px;z-index:1000}\n"], dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i12.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ReportQueueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'report-queue', template: "<div class=\"rq-container\" *ngIf=\"showQueue()\">\r\n    <div class=\"rq-header\">\r\n        <div>{{header | translate}}</div>\r\n        <div>\r\n\r\n            <p-checkbox [(ngModel)]=\"autoDownload\" binary=\"true\" pTooltip=\"T\u1EF1 \u0111\u1ED9ng t\u1EA3i\" tooltipPosition=\"left\">\r\n            </p-checkbox>\r\n\r\n            <a href=\"javascript:;\" (click)=\"toggleExpand()\" pTooltip=\"{{expand ? 'Thu g\u1ECDn' : 'M\u1EDF r\u1ED9ng'}}\"\r\n                tooltipPosition=\"left\">\r\n                <i class=\"fas\" [ngClass]=\"{'fa-compress' : expand, 'fa-expand': !expand}\"></i>\r\n            </a>\r\n\r\n            <a href=\"javascript:;\" (click)=\"close()\" pTooltip=\"\u0110\u00F3ng\">\r\n                <i class=\"fas fa-times\"></i>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    <div class=\"rq-body\" *ngIf=\"expand\">\r\n        <tn-custom-scrollbar [style]=\"{'height.px': popupHeight}\" #scrollbar>\r\n            <div class=\"re-job\" *ngFor=\"let job of _queue\">\r\n                <div class=\"re-job-title\">\r\n                    <div>{{getName(job)}}</div>\r\n                    <div>\r\n                        <a href=\"javascript:;\" (click)=\"cancelJob(job)\">\r\n                            <i class=\"fas fa-times\"></i>\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n                <div class=\"re-job-result\"\r\n                    [ngClass]=\"{'job-success': job._status == statuses.Success, 'job-error': job._status == statuses.Error, 'job-exporting' : job._status == statuses.Exporting, 'job-downloaded': job._status == statuses.Downloaded}\">\r\n                    <span *ngIf=\"job._status != statuses.Success && job._status != statuses.Exporting\">\r\n                        {{dicStatus.get(job._status) | translate}}\r\n                    </span>\r\n\r\n                    <span *ngIf=\"job._status == statuses.Exporting\">\r\n                        <div class=\"loader\"></div>\r\n                        {{dicStatus.get(job._status) | translate}}\r\n                    </span>\r\n\r\n                    <a href=\"javascript:;\" (click)=\"download(job)\" class=\"job-success\"\r\n                        *ngIf=\"job._status == statuses.Success\">\r\n                        <i class=\"fas fa-download\"></i> {{dicStatus.get(job._status) | translate}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .rq-container{width:350px;border:1px solid #3192e1;border-radius:3px;background-color:#fff}::ng-deep .rq-container .rq-header{background-color:#3192e1;padding:5px 10px;display:flex;border-radius:3px 3px 0 0;color:#fff;font-weight:400;font-size:15px}::ng-deep .rq-container .rq-header>div:first-child{flex-grow:1}::ng-deep .rq-container .rq-header>div:last-child>a{font-weight:200;margin-left:10px;color:#fff}::ng-deep .rq-container .rq-header>div:last-child>a>i{font-size:13px}::ng-deep .rq-container .rq-header>div:last-child .ui-chkbox-box{width:14px;height:14px;margin-top:-2px}::ng-deep .rq-container .rq-header>div:last-child .ui-chkbox-icon{font-size:13px;line-height:13px}::ng-deep .rq-container .rq-body .re-job{padding:6px 10px;display:flex;flex-direction:column}::ng-deep .rq-container .rq-body .re-job:first-child{padding-top:6px}::ng-deep .rq-container .rq-body .re-job .re-job-title{display:flex;font-size:13px}::ng-deep .rq-container .rq-body .re-job .re-job-title>div:first-child{flex-grow:1;padding-bottom:3px}::ng-deep .rq-container .rq-body .re-job .re-job-title>div a{color:#3192e1}::ng-deep .rq-container .rq-body .re-job .re-job-result{font-size:11px}::ng-deep .rq-container .rq-body .re-job .re-job-result>span{display:flex;align-items:center;height:20px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-exporting{color:#3192e1}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-exporting>span>div{margin-right:5px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-success{color:#1ab91a}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-success>a>i{margin-right:2px}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-error{color:#e95353}::ng-deep .rq-container .rq-body .re-job .re-job-result.job-downloaded{color:#b2b2b2}::ng-deep .loader{border:2px solid #bcdbf5;border-radius:50%;border-top:2px solid #3192e1;width:12px;height:12px;animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:absolute;bottom:1px;right:2px;z-index:1000}\n"] }]

package/esm2020/components/service-file-upload/service-file-upload.component.mjs

@@ -411,7 +411,7 @@ ServiceFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             multi: true
         },
         ComponentContextService
-    ], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "file", first: true, predicate: ["file"], descendants: true }, { propertyName: "fileDetailCommand", first: true, predicate: ["fileDetailCommand"], descendants: true }, { propertyName: "fileViewerNew", first: true, predicate: ["fileViewerNew"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\r\n        <div>\r\n            <ng-container *ngIf=\"!showNoti\">\r\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\r\n                <span *ngIf=\"extension\">.{{extension}} </span>\r\n            </ng-container>\r\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n            (click)=\"showContextMenu($event)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\r\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" [multiple]=\"false\"\r\n            [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\r\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\r\n    [model]=\"forms.fileViewer.formData\" (onClose)=\"this.forms.fileViewer.show = false;\">\r\n</file-viewer>", styles: ["::ng-deep .file-upload{display:flex;border:1px solid #ced4da;border-radius:4px}::ng-deep .file-upload .fl-icon{flex:0 0 30px;display:flex;font-size:20px;justify-content:center;align-items:center;border-right:1px solid #ced4da}::ng-deep .file-upload .fl-icon>i{font-size:16px!important}::ng-deep .file-upload .fl-file-name{display:flex;align-items:center;flex-grow:1;cursor:pointer;opacity:.8;padding:0 10px;color:#109bf8;overflow:hidden}::ng-deep .file-upload .fl-file-name>div{width:100%;display:flex}::ng-deep .file-upload .fl-file-name>div>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .file-upload .fl-file-name:hover{opacity:1}::ng-deep .file-upload .fl-buttons{flex:0 0 80px;display:flex;border-right:1px solid #ced4da;align-items:center;justify-content:space-evenly;border-left:1px solid #ced4da}\n"], dependencies: [{ kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i13.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i14.FileUpload, selector: "p-fileUpload", inputs: ["method", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "previewWidth", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "files", "name", "url", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "style", "styleClass", "chooseLabel", "uploadLabel", "cancelLabel", "headers", "customUpload", "fileLimit"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler"] }, { kind: "component", type: i15.FileViewerComponent, selector: "file-viewer", inputs: ["model", "readonly", "showPrint", "showDownload", "showDelete"], outputs: ["onClose", "onRename", "onDelete"] }] });
+    ], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "file", first: true, predicate: ["file"], descendants: true }, { propertyName: "fileDetailCommand", first: true, predicate: ["fileDetailCommand"], descendants: true }, { propertyName: "fileViewerNew", first: true, predicate: ["fileViewerNew"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\r\n        <div>\r\n            <ng-container *ngIf=\"!showNoti\">\r\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\r\n                <span *ngIf=\"extension\">.{{extension}} </span>\r\n            </ng-container>\r\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n            (click)=\"showContextMenu($event)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\r\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" [multiple]=\"false\"\r\n            [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\r\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\r\n    [model]=\"forms.fileViewer.formData\" (onClose)=\"this.forms.fileViewer.show = false;\">\r\n</file-viewer>", styles: ["::ng-deep .file-upload{display:flex;border:1px solid #ced4da;border-radius:4px}::ng-deep .file-upload .fl-icon{flex:0 0 30px;display:flex;font-size:20px;justify-content:center;align-items:center;border-right:1px solid #ced4da}::ng-deep .file-upload .fl-icon>i{font-size:16px!important}::ng-deep .file-upload .fl-file-name{display:flex;align-items:center;flex-grow:1;cursor:pointer;opacity:.8;padding:0 10px;color:#109bf8;overflow:hidden}::ng-deep .file-upload .fl-file-name>div{width:100%;display:flex}::ng-deep .file-upload .fl-file-name>div>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .file-upload .fl-file-name:hover{opacity:1}::ng-deep .file-upload .fl-buttons{flex:0 0 80px;display:flex;border-right:1px solid #ced4da;align-items:center;justify-content:space-evenly;border-left:1px solid #ced4da}\n"], dependencies: [{ kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i13.ContextMenu, selector: "p-contextMenu", inputs: ["model", "global", "target", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "triggerEvent"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i14.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler"] }, { kind: "component", type: i15.FileViewerComponent, selector: "file-viewer", inputs: ["model", "readonly", "showPrint", "showDownload", "showDelete"], outputs: ["onClose", "onRename", "onDelete"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ServiceFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'service-file-upload', providers: [

package/esm2020/components/settings/settings-row/settings-row.component.mjs

@@ -127,7 +127,7 @@ export class SettingsRowComponent extends ComponentBase {
     }
 }
 SettingsRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SettingsRowComponent, deps: [{ token: i0.Injector }, { token: i1.TranslateService }, { token: i2.DomService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component });
-SettingsRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SettingsRowComponent, selector: "settings-row", inputs: { parentModel: "parentModel", parentSetting: "parentSetting", entityMetadataService: "entityMetadataService" }, outputs: { onSave: "onSave", onCancel: "onCancel" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }, { propertyName: "crudForm", first: true, predicate: CrudFormComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\"\r\n    [header]=\"'C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u' | translate\" [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\"\r\n    (visibleChange)=\"visibleChangedDialog($event)\">\r\n    <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n    </crud-form>\r\n    <ng-template #footer>\r\n        <button *ngIf=\"!parentSetting.hiddenSaveSetting\" type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n            [label]=\"'L\u01B0u' | translate\" (click)=\"saveSetting()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i6.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i7.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+SettingsRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SettingsRowComponent, selector: "settings-row", inputs: { parentModel: "parentModel", parentSetting: "parentSetting", entityMetadataService: "entityMetadataService" }, outputs: { onSave: "onSave", onCancel: "onCancel" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }, { propertyName: "crudForm", first: true, predicate: CrudFormComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\"\r\n    [header]=\"'C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u' | translate\" [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\"\r\n    (visibleChange)=\"visibleChangedDialog($event)\">\r\n    <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n    </crud-form>\r\n    <ng-template #footer>\r\n        <button *ngIf=\"!parentSetting.hiddenSaveSetting\" type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n            [label]=\"'L\u01B0u' | translate\" (click)=\"saveSetting()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i7.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SettingsRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'settings-row', providers: [ComponentContextService], changeDetection: ChangeDetectionStrategy.Default, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\"\r\n    [header]=\"'C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u' | translate\" [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\"\r\n    (visibleChange)=\"visibleChangedDialog($event)\">\r\n    <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n    </crud-form>\r\n    <ng-template #footer>\r\n        <button *ngIf=\"!parentSetting.hiddenSaveSetting\" type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n            [label]=\"'L\u01B0u' | translate\" (click)=\"saveSetting()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>" }]

package/esm2020/components/settings/settings-workflow/settings-workflow.component.mjs

@@ -68,7 +68,7 @@ export class SettingsWorkflowComponent extends ComponentBase {
     }
 }
 SettingsWorkflowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SettingsWorkflowComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SettingsWorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SettingsWorkflowComponent, selector: "settings-workflow", inputs: { parentModel: "parentModel", parentSetting: "parentSetting" }, outputs: { onCancel: "onCancel", onSave: "onSave" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"false\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (onCancel)=\"cancel()\"\r\n    (visibleChange)=\"visibleChangedDialog($event)\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <ng-container [ngSwitch]=\"model.data.workflowtype\">\r\n            <ng-container *ngSwitchCase=\"'1'\">\r\n                <settings-workflow-no1 [metadata]=\"model.data\" #settingNo1></settings-workflow-no1>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <span style=\"text-align:center;\">Vui l\u00F2ng ch\u1ECDn lo\u1EA1i quy tr\u00ECnh</span>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <ng-template #footer>\r\n        <button *ngIf=\"!parentSetting.hiddenSaveSetting\" type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n            [label]=\"'L\u01B0u' | translate\" (click)=\"saveWorkflow()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i3.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i4.SettingsWorkflowNo1Component, selector: "settings-workflow-no1", inputs: ["metadata"] }, { kind: "component", type: i5.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+SettingsWorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SettingsWorkflowComponent, selector: "settings-workflow", inputs: { parentModel: "parentModel", parentSetting: "parentSetting" }, outputs: { onCancel: "onCancel", onSave: "onSave" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"false\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (onCancel)=\"cancel()\"\r\n    (visibleChange)=\"visibleChangedDialog($event)\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <ng-container [ngSwitch]=\"model.data.workflowtype\">\r\n            <ng-container *ngSwitchCase=\"'1'\">\r\n                <settings-workflow-no1 [metadata]=\"model.data\" #settingNo1></settings-workflow-no1>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <span style=\"text-align:center;\">Vui l\u00F2ng ch\u1ECDn lo\u1EA1i quy tr\u00ECnh</span>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <ng-template #footer>\r\n        <button *ngIf=\"!parentSetting.hiddenSaveSetting\" type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n            [label]=\"'L\u01B0u' | translate\" (click)=\"saveWorkflow()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i3.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i4.SettingsWorkflowNo1Component, selector: "settings-workflow-no1", inputs: ["metadata"] }, { kind: "component", type: i5.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SettingsWorkflowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'settings-workflow', providers: [ComponentContextService], changeDetection: ChangeDetectionStrategy.Default, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"false\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (onCancel)=\"cancel()\"\r\n    (visibleChange)=\"visibleChangedDialog($event)\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <ng-container [ngSwitch]=\"model.data.workflowtype\">\r\n            <ng-container *ngSwitchCase=\"'1'\">\r\n                <settings-workflow-no1 [metadata]=\"model.data\" #settingNo1></settings-workflow-no1>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <span style=\"text-align:center;\">Vui l\u00F2ng ch\u1ECDn lo\u1EA1i quy tr\u00ECnh</span>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <ng-template #footer>\r\n        <button *ngIf=\"!parentSetting.hiddenSaveSetting\" type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n            [label]=\"'L\u01B0u' | translate\" (click)=\"saveWorkflow()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>" }]

package/esm2020/components/settings/settings.component.mjs

@@ -168,7 +168,7 @@ export class SettingsComponent extends ComponentBase {
     }
 }
 SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SettingsComponent, deps: [{ token: i0.Injector }, { token: i1.TranslateService }, { token: i2.DomService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component });
-SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SettingsComponent, selector: "settings", inputs: { parentModel: "parentModel", parentSetting: "parentSetting", entityMetadataService: "entityMetadataService" }, outputs: { onCancel: "onCancel", onSave: "onSave", onDelete: "onDelete" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (visibleChange)=\"visibleChangedDialog($event)\"\r\n    [styleClass]=\"'tn-form-dialog'\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <div style=\"padding: 0.5rem;\">\r\n            <div class=\"p-col-12\" *ngIf=\"parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB</label>\r\n            </div>\r\n            <div class=\"p-col-12\" *ngIf=\"!parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">Ch\u01B0a c\u00F3 thi\u1EBFt l\u1EADp c\u1ED9t cho trang\r\n                    n\u00E0y</label>\r\n            </div>\r\n            <div class=\"p-col-12\">\r\n                <p-table [value]=\"model.data.details\" [columns]=\"columnSchemas\" [responsive]=\"true\"\r\n                    [reorderableColumns]=\"true\">\r\n                    <ng-template pTemplate=\"header\" let-columns let-rowData>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columnSchemas\" [style.width]=\"col.width\" style=\"text-align: center;\">\r\n                                {{col.header}}\r\n                            </th>\r\n                        </tr>\r\n                    </ng-template>\r\n                    <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\"\r\n                        let-columns=\"pageSetting.columnSettings\">\r\n                        <tr [pReorderableRow]=\"ri\">\r\n                            <td class=\"stt\" style=\"text-align:center\">{{ri+1}}</td>\r\n                            <td style=\"text-align:left\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[1].header}}</span>\r\n                                {{rowData.columnName}}\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[2].header}}</span>\r\n                                <p-checkbox [(ngModel)]=\"rowData.visible\" [binary]=\"true\">\r\n                                </p-checkbox>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[3].header}}</span>\r\n                                <p-dropdown appendTo=\"body\" [styleClass]=\"'full-width'\" [(ngModel)]=\"rowData.textAlign\"\r\n                                    [options]=\"textAlignOptions\">\r\n                                </p-dropdown>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[4].header}}</span>\r\n                                <input [(ngModel)]=\"rowData.width\" pInputText style=\"width:100%\" autocomplete=\"off\"\r\n                                    autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" />\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <i class=\"fas fa-arrows-alt\"\r\n                                    style=\"width:50px; cursor:pointer; padding: 8px; color: #555;\"\r\n                                    [pReorderableRowHandle]=\"ri\"></i>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #footer>\r\n        <ng-container *ngIf=\"!parentSetting.hiddenSaveSetting\">\r\n            <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\" [label]=\"'L\u01B0u' | translate\"\r\n                (click)=\"saveSetting()\"></button>\r\n            <button type=\"button\" pButton class=\"p-button-text p-button-danger\" icon=\"pi pi-trash\"\r\n                [label]=\"'B\u1ECF c\u1EA5u h\u00ECnh' | translate\" (click)=\"deleteSetting()\"></button>\r\n        </ng-container>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i7.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "resetFilterOnHide", "dropdownIcon", "autoDisplayFirst", "emptyFilterMessage", "maxItemDisplay", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "autofocusFilter", "autofocusSelectedItem", "delayFilter", "disabled", "options", "filterValue", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "virtualScroll", "itemSize", "ariaFilterLabel", "ariaLabelledBy", "maxlength", "tooltipStyleClass", "modifyOptionsWhenFilter"], outputs: ["onChange", "onFocus", "onBlur", "onClick", "onShow", "onHide"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i8.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]" }, { kind: "component", type: i12.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i13.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SettingsComponent, selector: "settings", inputs: { parentModel: "parentModel", parentSetting: "parentSetting", entityMetadataService: "entityMetadataService" }, outputs: { onCancel: "onCancel", onSave: "onSave", onDelete: "onDelete" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (visibleChange)=\"visibleChangedDialog($event)\"\r\n    [styleClass]=\"'tn-form-dialog'\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <div style=\"padding: 0.5rem;\">\r\n            <div class=\"p-col-12\" *ngIf=\"parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB</label>\r\n            </div>\r\n            <div class=\"p-col-12\" *ngIf=\"!parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">Ch\u01B0a c\u00F3 thi\u1EBFt l\u1EADp c\u1ED9t cho trang\r\n                    n\u00E0y</label>\r\n            </div>\r\n            <div class=\"p-col-12\">\r\n                <p-table [value]=\"model.data.details\" [columns]=\"columnSchemas\" [responsive]=\"true\"\r\n                    [reorderableColumns]=\"true\">\r\n                    <ng-template pTemplate=\"header\" let-columns let-rowData>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columnSchemas\" [style.width]=\"col.width\" style=\"text-align: center;\">\r\n                                {{col.header}}\r\n                            </th>\r\n                        </tr>\r\n                    </ng-template>\r\n                    <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\"\r\n                        let-columns=\"pageSetting.columnSettings\">\r\n                        <tr [pReorderableRow]=\"ri\">\r\n                            <td class=\"stt\" style=\"text-align:center\">{{ri+1}}</td>\r\n                            <td style=\"text-align:left\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[1].header}}</span>\r\n                                {{rowData.columnName}}\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[2].header}}</span>\r\n                                <p-checkbox [(ngModel)]=\"rowData.visible\" [binary]=\"true\">\r\n                                </p-checkbox>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[3].header}}</span>\r\n                                <p-dropdown appendTo=\"body\" [styleClass]=\"'full-width'\" [(ngModel)]=\"rowData.textAlign\"\r\n                                    [options]=\"textAlignOptions\">\r\n                                </p-dropdown>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[4].header}}</span>\r\n                                <input [(ngModel)]=\"rowData.width\" pInputText style=\"width:100%\" autocomplete=\"off\"\r\n                                    autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" />\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <i class=\"fas fa-arrows-alt\"\r\n                                    style=\"width:50px; cursor:pointer; padding: 8px; color: #555;\"\r\n                                    [pReorderableRowHandle]=\"ri\"></i>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #footer>\r\n        <ng-container *ngIf=\"!parentSetting.hiddenSaveSetting\">\r\n            <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\" [label]=\"'L\u01B0u' | translate\"\r\n                (click)=\"saveSetting()\"></button>\r\n            <button type=\"button\" pButton class=\"p-button-text p-button-danger\" icon=\"pi pi-trash\"\r\n                [label]=\"'B\u1ECF c\u1EA5u h\u00ECnh' | translate\" (click)=\"deleteSetting()\"></button>\r\n        </ng-container>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "maxItemDisplay", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "autofocusSelectedItem", "modifyOptionsWhenFilter", "delayFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i8.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "directive", type: i11.InputText, selector: "[pInputText]" }, { kind: "component", type: i12.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i13.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'settings', providers: [ComponentContextService], changeDetection: ChangeDetectionStrategy.Default, template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (visibleChange)=\"visibleChangedDialog($event)\"\r\n    [styleClass]=\"'tn-form-dialog'\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <div style=\"padding: 0.5rem;\">\r\n            <div class=\"p-col-12\" *ngIf=\"parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB</label>\r\n            </div>\r\n            <div class=\"p-col-12\" *ngIf=\"!parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">Ch\u01B0a c\u00F3 thi\u1EBFt l\u1EADp c\u1ED9t cho trang\r\n                    n\u00E0y</label>\r\n            </div>\r\n            <div class=\"p-col-12\">\r\n                <p-table [value]=\"model.data.details\" [columns]=\"columnSchemas\" [responsive]=\"true\"\r\n                    [reorderableColumns]=\"true\">\r\n                    <ng-template pTemplate=\"header\" let-columns let-rowData>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columnSchemas\" [style.width]=\"col.width\" style=\"text-align: center;\">\r\n                                {{col.header}}\r\n                            </th>\r\n                        </tr>\r\n                    </ng-template>\r\n                    <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\"\r\n                        let-columns=\"pageSetting.columnSettings\">\r\n                        <tr [pReorderableRow]=\"ri\">\r\n                            <td class=\"stt\" style=\"text-align:center\">{{ri+1}}</td>\r\n                            <td style=\"text-align:left\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[1].header}}</span>\r\n                                {{rowData.columnName}}\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[2].header}}</span>\r\n                                <p-checkbox [(ngModel)]=\"rowData.visible\" [binary]=\"true\">\r\n                                </p-checkbox>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[3].header}}</span>\r\n                                <p-dropdown appendTo=\"body\" [styleClass]=\"'full-width'\" [(ngModel)]=\"rowData.textAlign\"\r\n                                    [options]=\"textAlignOptions\">\r\n                                </p-dropdown>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[4].header}}</span>\r\n                                <input [(ngModel)]=\"rowData.width\" pInputText style=\"width:100%\" autocomplete=\"off\"\r\n                                    autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" />\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <i class=\"fas fa-arrows-alt\"\r\n                                    style=\"width:50px; cursor:pointer; padding: 8px; color: #555;\"\r\n                                    [pReorderableRowHandle]=\"ri\"></i>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #footer>\r\n        <ng-container *ngIf=\"!parentSetting.hiddenSaveSetting\">\r\n            <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\" [label]=\"'L\u01B0u' | translate\"\r\n                (click)=\"saveSetting()\"></button>\r\n            <button type=\"button\" pButton class=\"p-button-text p-button-danger\" icon=\"pi pi-trash\"\r\n                [label]=\"'B\u1ECF c\u1EA5u h\u00ECnh' | translate\" (click)=\"deleteSetting()\"></button>\r\n        </ng-container>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>" }]

package/esm2020/components/share-link-by-permission/share-link-by-permission.component.mjs

@@ -133,7 +133,7 @@ export class ShareLinkByPermissionComponent extends ComponentBase {
     }
 }
 ShareLinkByPermissionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ShareLinkByPermissionComponent, deps: [{ token: i0.Injector }, { token: i1.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
-ShareLinkByPermissionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ShareLinkByPermissionComponent, selector: "share-link-by-permission", inputs: { setting: "setting", lstItem: "lstItem" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"loading\" class=\"loading-text\">\u0110ang ki\u1EC3m tra quy\u1EC1n c\u00F3 th\u1EC3 chia s\u1EBB</div>\r\n<div *ngIf=\"!loading\" class=\"container-share-link\">\r\n    <div class=\"container-checkbox\">\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableRead\" label=\"Xem\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowRead\"></p-checkbox>\r\n        </span>\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableEdit\" label=\"S\u1EEDa\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowEdit\"></p-checkbox>\r\n        </span>\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableDelete\" label=\"X\u00F3a\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowDelete\"></p-checkbox>\r\n        </span>\r\n        <div>\r\n            <textarea *ngIf=\"links\" pInputTextarea [(ngModel)]=\"links\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"container-button\">\r\n        <button *ngIf=\"links\" type=\"button\" pButton class=\"p-button-text p-button-success\" icon=\"pi pi-copy\"\r\n            label=\"Copy link v\u00E0o clipboard\" (click)=\"copyLinkToClipboard()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-link\" label=\"T\u1EA1o \u0111\u01B0\u1EDDng d\u1EABn chia s\u1EBB\"\r\n            (click)=\"createShareLink()\"></button>\r\n    </div>\r\n</div>", styles: [".container-share-link{display:flex;flex-direction:column;height:100%}.container-share-link .container-checkbox{text-align:center;padding:.5em;flex:1 1;height:100%}.container-share-link .container-checkbox>span{margin-right:.5em}.container-share-link .container-checkbox textarea{width:100%;height:155px;margin-top:.5em;resize:none}.container-share-link .container-button{padding:.5em .5em calc(.5em - 5px) .5em;border-top:1px solid #ced4da;text-align:right}.loading-text{text-align:center;font-weight:700;font-size:1.5rem;padding:1em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }] });
+ShareLinkByPermissionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ShareLinkByPermissionComponent, selector: "share-link-by-permission", inputs: { setting: "setting", lstItem: "lstItem" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"loading\" class=\"loading-text\">\u0110ang ki\u1EC3m tra quy\u1EC1n c\u00F3 th\u1EC3 chia s\u1EBB</div>\r\n<div *ngIf=\"!loading\" class=\"container-share-link\">\r\n    <div class=\"container-checkbox\">\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableRead\" label=\"Xem\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowRead\"></p-checkbox>\r\n        </span>\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableEdit\" label=\"S\u1EEDa\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowEdit\"></p-checkbox>\r\n        </span>\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableDelete\" label=\"X\u00F3a\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowDelete\"></p-checkbox>\r\n        </span>\r\n        <div>\r\n            <textarea *ngIf=\"links\" pInputTextarea [(ngModel)]=\"links\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"container-button\">\r\n        <button *ngIf=\"links\" type=\"button\" pButton class=\"p-button-text p-button-success\" icon=\"pi pi-copy\"\r\n            label=\"Copy link v\u00E0o clipboard\" (click)=\"copyLinkToClipboard()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-link\" label=\"T\u1EA1o \u0111\u01B0\u1EDDng d\u1EABn chia s\u1EBB\"\r\n            (click)=\"createShareLink()\"></button>\r\n    </div>\r\n</div>", styles: [".container-share-link{display:flex;flex-direction:column;height:100%}.container-share-link .container-checkbox{text-align:center;padding:.5em;flex:1 1;height:100%}.container-share-link .container-checkbox>span{margin-right:.5em}.container-share-link .container-checkbox textarea{width:100%;height:155px;margin-top:.5em;resize:none}.container-share-link .container-button{padding:.5em .5em calc(.5em - 5px) .5em;border-top:1px solid #ced4da;text-align:right}.loading-text{text-align:center;font-weight:700;font-size:1.5rem;padding:1em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ShareLinkByPermissionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'share-link-by-permission', providers: [ComponentContextService], template: "<div *ngIf=\"loading\" class=\"loading-text\">\u0110ang ki\u1EC3m tra quy\u1EC1n c\u00F3 th\u1EC3 chia s\u1EBB</div>\r\n<div *ngIf=\"!loading\" class=\"container-share-link\">\r\n    <div class=\"container-checkbox\">\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableRead\" label=\"Xem\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowRead\"></p-checkbox>\r\n        </span>\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableEdit\" label=\"S\u1EEDa\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowEdit\"></p-checkbox>\r\n        </span>\r\n        <span>\r\n            <p-checkbox [binary]=\"true\" [disabled]=\"disableDelete\" label=\"X\u00F3a\" class=\"link-or-action\"\r\n                [(ngModel)]=\"allowDelete\"></p-checkbox>\r\n        </span>\r\n        <div>\r\n            <textarea *ngIf=\"links\" pInputTextarea [(ngModel)]=\"links\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"container-button\">\r\n        <button *ngIf=\"links\" type=\"button\" pButton class=\"p-button-text p-button-success\" icon=\"pi pi-copy\"\r\n            label=\"Copy link v\u00E0o clipboard\" (click)=\"copyLinkToClipboard()\"></button>\r\n        <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-link\" label=\"T\u1EA1o \u0111\u01B0\u1EDDng d\u1EABn chia s\u1EBB\"\r\n            (click)=\"createShareLink()\"></button>\r\n    </div>\r\n</div>", styles: [".container-share-link{display:flex;flex-direction:column;height:100%}.container-share-link .container-checkbox{text-align:center;padding:.5em;flex:1 1;height:100%}.container-share-link .container-checkbox>span{margin-right:.5em}.container-share-link .container-checkbox textarea{width:100%;height:155px;margin-top:.5em;resize:none}.container-share-link .container-button{padding:.5em .5em calc(.5em - 5px) .5em;border-top:1px solid #ced4da;text-align:right}.loading-text{text-align:center;font-weight:700;font-size:1.5rem;padding:1em}\n"] }]

package/esm2020/components/statemachines/state/state.component.mjs

@@ -67,7 +67,7 @@ export class StateComponent extends ComponentBase {
     }
 }
 StateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateComponent, deps: [{ token: i0.Injector }, { token: i1.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
-StateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateComponent, selector: "state", inputs: { viewOnly: "viewOnly", jsPlumbInstance: "jsPlumbInstance", containerId: "containerId", machine: "machine" }, outputs: { onDelete: "onDelete", onEdit: "onEdit", onReady: "onReady" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'node type-' + machine.type\" [ngStyle]=\"{'cursor': viewOnly ? 'default' : 'move'}\"\r\n    [id]=\"'div-' + machine.id\" [class.current]=\"machine.current\" [class.disabled]=\"machine.disabled\"\r\n    (contextmenu)=\"handleRightClick($event)\">\r\n    <span *ngIf=\"machine.current\" class=\"machine-icon\">\r\n        <i class=\"far fa-pause-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.START\" class=\"machine-icon\">\r\n        <i class=\"far fa-play-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.STOP\" class=\"machine-icon\">\r\n        <i class=\"far fa-stop-circle\"></i>\r\n    </span>\r\n    <div class=\"machine-code\">\r\n        {{viewOnly ? machine.name : machine.code}}</div>\r\n    <p class=\"machine-name\">\r\n        <b *ngIf=\"!viewOnly\">{{machine.name + ': '}}</b>\r\n        {{machine.description}}\r\n    </p>\r\n    <a *ngIf=\"!viewOnly\" class=\"btn-connect\" [pTooltip]=\"'Nh\u1EA5n gi\u1EEF v\u00E0 k\u00E9o \u0111\u1EC3 k\u1EBFt n\u1ED1i tr\u1EA1ng th\u00E1i'\"\r\n        tooltipStyleClass=\"wrap\">\r\n    </a>\r\n    <div *ngIf=\"!viewOnly\" class=\"btn-holder\">\r\n        <a class=\"btn btn-edit\" (click)=\"editNode()\">\r\n            <i class=\"far fa-edit\"></i>\r\n        </a>\r\n        <a class=\"btn btn-delete\" (click)=\"deleteNode()\">\r\n            <i class=\"far fa-trash-alt\"></i>\r\n        </a>\r\n    </div>\r\n</div>", styles: [".node{position:absolute;display:flex;flex-direction:column;width:150px;height:100px;max-height:100px;padding:4px 0;z-index:1;box-shadow:0 5px 10px #b0c1d9;text-align:center;border:1px solid green;color:#353535;overflow:hidden;border-radius:5px;box-shadow:2px 2px 10px 1px #c3c3c3;-o-box-shadow:2px 2px 10px 1px #c3c3c3;-webkit-box-shadow:2px 2px 10px 1px #c3c3c3;-moz-box-shadow:2px 2px 10px 1px #c3c3c3}.node .btn-holder{position:absolute;bottom:-35px;transition:bottom .15s;display:inline-block;width:100%;left:0px;text-align:right;padding:5px;font-size:.8em;background:rgba(0,0,0,.231372549)}.node .btn-holder .btn{color:#fff;border-radius:5px;width:25px;height:25px;padding-top:2px;padding-left:1px;text-align:center;line-height:20px;display:inline-block;margin-right:5px;cursor:pointer}.node .btn-holder .btn.btn-edit{background-color:#2196f3}.node .btn-holder .btn.btn-edit:hover{background-color:#69b5f3}.node .btn-holder .btn.btn-delete{background-color:#f56060}.node .btn-holder .btn.btn-delete:hover{background-color:#f78d8d}.node .btn-connect{position:absolute;top:calc(50% - 9px);transition:right .15s;right:-20px;width:16px;height:16px;background-color:orange;cursor:pointer;box-shadow:0 0 2px #000;transition:box-shadow .25s ease-in}.node .machine-code{border-bottom:1px solid green}.node.type-1{background-color:#adc58d;border-color:#fff}.node.type-1 .machine-code{border-color:#fff}.node.type-4{background-color:#fff;border-color:#65aedf}.node.type-4 .machine-code{border-color:#65aedf}.node.type-5{background-color:#ffc107;border-color:#795548}.node.type-5 .machine-code{border-color:#795548}.node.disabled{background-color:#ddd;border-color:#989898}.node.disabled .machine-code{border-color:#989898}.node.current{background-color:#94c2ea;border-color:#fff}.node.current .machine-code{border-color:#fff}.node:hover{box-shadow:2px 2px 19px #909090;-o-box-shadow:2px 2px 19px #909090;-webkit-box-shadow:2px 2px 19px #909090;-moz-box-shadow:2px 2px 19px #909090;z-index:5}.node:hover .btn-holder{bottom:0px}.node:hover .btn-connect{right:5px}.machine-icon{position:absolute;top:3px;right:3px;font-size:18px;color:#fff;text-shadow:1px 1px 2px #383838}.machine-code{flex:0 0 auto;min-height:21px;padding-left:5px;font-weight:700;text-align:left;overflow:hidden}.machine-name{text-align:justify;padding:5px;margin-bottom:25px;overflow-y:auto;height:calc(100% - 17px)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }] });
+StateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateComponent, selector: "state", inputs: { viewOnly: "viewOnly", jsPlumbInstance: "jsPlumbInstance", containerId: "containerId", machine: "machine" }, outputs: { onDelete: "onDelete", onEdit: "onEdit", onReady: "onReady" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div [class]=\"'node type-' + machine.type\" [ngStyle]=\"{'cursor': viewOnly ? 'default' : 'move'}\"\r\n    [id]=\"'div-' + machine.id\" [class.current]=\"machine.current\" [class.disabled]=\"machine.disabled\"\r\n    (contextmenu)=\"handleRightClick($event)\">\r\n    <span *ngIf=\"machine.current\" class=\"machine-icon\">\r\n        <i class=\"far fa-pause-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.START\" class=\"machine-icon\">\r\n        <i class=\"far fa-play-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.STOP\" class=\"machine-icon\">\r\n        <i class=\"far fa-stop-circle\"></i>\r\n    </span>\r\n    <div class=\"machine-code\">\r\n        {{viewOnly ? machine.name : machine.code}}</div>\r\n    <p class=\"machine-name\">\r\n        <b *ngIf=\"!viewOnly\">{{machine.name + ': '}}</b>\r\n        {{machine.description}}\r\n    </p>\r\n    <a *ngIf=\"!viewOnly\" class=\"btn-connect\" [pTooltip]=\"'Nh\u1EA5n gi\u1EEF v\u00E0 k\u00E9o \u0111\u1EC3 k\u1EBFt n\u1ED1i tr\u1EA1ng th\u00E1i'\"\r\n        tooltipStyleClass=\"wrap\">\r\n    </a>\r\n    <div *ngIf=\"!viewOnly\" class=\"btn-holder\">\r\n        <a class=\"btn btn-edit\" (click)=\"editNode()\">\r\n            <i class=\"far fa-edit\"></i>\r\n        </a>\r\n        <a class=\"btn btn-delete\" (click)=\"deleteNode()\">\r\n            <i class=\"far fa-trash-alt\"></i>\r\n        </a>\r\n    </div>\r\n</div>", styles: [".node{position:absolute;display:flex;flex-direction:column;width:150px;height:100px;max-height:100px;padding:4px 0;z-index:1;box-shadow:0 5px 10px #b0c1d9;text-align:center;border:1px solid green;color:#353535;overflow:hidden;border-radius:5px;box-shadow:2px 2px 10px 1px #c3c3c3;-o-box-shadow:2px 2px 10px 1px #c3c3c3;-webkit-box-shadow:2px 2px 10px 1px #c3c3c3;-moz-box-shadow:2px 2px 10px 1px #c3c3c3}.node .btn-holder{position:absolute;bottom:-35px;transition:bottom .15s;display:inline-block;width:100%;left:0px;text-align:right;padding:5px;font-size:.8em;background:rgba(0,0,0,.231372549)}.node .btn-holder .btn{color:#fff;border-radius:5px;width:25px;height:25px;padding-top:2px;padding-left:1px;text-align:center;line-height:20px;display:inline-block;margin-right:5px;cursor:pointer}.node .btn-holder .btn.btn-edit{background-color:#2196f3}.node .btn-holder .btn.btn-edit:hover{background-color:#69b5f3}.node .btn-holder .btn.btn-delete{background-color:#f56060}.node .btn-holder .btn.btn-delete:hover{background-color:#f78d8d}.node .btn-connect{position:absolute;top:calc(50% - 9px);transition:right .15s;right:-20px;width:16px;height:16px;background-color:orange;cursor:pointer;box-shadow:0 0 2px #000;transition:box-shadow .25s ease-in}.node .machine-code{border-bottom:1px solid green}.node.type-1{background-color:#adc58d;border-color:#fff}.node.type-1 .machine-code{border-color:#fff}.node.type-4{background-color:#fff;border-color:#65aedf}.node.type-4 .machine-code{border-color:#65aedf}.node.type-5{background-color:#ffc107;border-color:#795548}.node.type-5 .machine-code{border-color:#795548}.node.disabled{background-color:#ddd;border-color:#989898}.node.disabled .machine-code{border-color:#989898}.node.current{background-color:#94c2ea;border-color:#fff}.node.current .machine-code{border-color:#fff}.node:hover{box-shadow:2px 2px 19px #909090;-o-box-shadow:2px 2px 19px #909090;-webkit-box-shadow:2px 2px 19px #909090;-moz-box-shadow:2px 2px 19px #909090;z-index:5}.node:hover .btn-holder{bottom:0px}.node:hover .btn-connect{right:5px}.machine-icon{position:absolute;top:3px;right:3px;font-size:18px;color:#fff;text-shadow:1px 1px 2px #383838}.machine-code{flex:0 0 auto;min-height:21px;padding-left:5px;font-weight:700;text-align:left;overflow:hidden}.machine-name{text-align:justify;padding:5px;margin-bottom:25px;overflow-y:auto;height:calc(100% - 17px)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'state', providers: [ComponentContextService], template: "<div [class]=\"'node type-' + machine.type\" [ngStyle]=\"{'cursor': viewOnly ? 'default' : 'move'}\"\r\n    [id]=\"'div-' + machine.id\" [class.current]=\"machine.current\" [class.disabled]=\"machine.disabled\"\r\n    (contextmenu)=\"handleRightClick($event)\">\r\n    <span *ngIf=\"machine.current\" class=\"machine-icon\">\r\n        <i class=\"far fa-pause-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.START\" class=\"machine-icon\">\r\n        <i class=\"far fa-play-circle\"></i>\r\n    </span>\r\n    <span *ngIf=\"!machine.current && machine.type==enumStateType.STOP\" class=\"machine-icon\">\r\n        <i class=\"far fa-stop-circle\"></i>\r\n    </span>\r\n    <div class=\"machine-code\">\r\n        {{viewOnly ? machine.name : machine.code}}</div>\r\n    <p class=\"machine-name\">\r\n        <b *ngIf=\"!viewOnly\">{{machine.name + ': '}}</b>\r\n        {{machine.description}}\r\n    </p>\r\n    <a *ngIf=\"!viewOnly\" class=\"btn-connect\" [pTooltip]=\"'Nh\u1EA5n gi\u1EEF v\u00E0 k\u00E9o \u0111\u1EC3 k\u1EBFt n\u1ED1i tr\u1EA1ng th\u00E1i'\"\r\n        tooltipStyleClass=\"wrap\">\r\n    </a>\r\n    <div *ngIf=\"!viewOnly\" class=\"btn-holder\">\r\n        <a class=\"btn btn-edit\" (click)=\"editNode()\">\r\n            <i class=\"far fa-edit\"></i>\r\n        </a>\r\n        <a class=\"btn btn-delete\" (click)=\"deleteNode()\">\r\n            <i class=\"far fa-trash-alt\"></i>\r\n        </a>\r\n    </div>\r\n</div>", styles: [".node{position:absolute;display:flex;flex-direction:column;width:150px;height:100px;max-height:100px;padding:4px 0;z-index:1;box-shadow:0 5px 10px #b0c1d9;text-align:center;border:1px solid green;color:#353535;overflow:hidden;border-radius:5px;box-shadow:2px 2px 10px 1px #c3c3c3;-o-box-shadow:2px 2px 10px 1px #c3c3c3;-webkit-box-shadow:2px 2px 10px 1px #c3c3c3;-moz-box-shadow:2px 2px 10px 1px #c3c3c3}.node .btn-holder{position:absolute;bottom:-35px;transition:bottom .15s;display:inline-block;width:100%;left:0px;text-align:right;padding:5px;font-size:.8em;background:rgba(0,0,0,.231372549)}.node .btn-holder .btn{color:#fff;border-radius:5px;width:25px;height:25px;padding-top:2px;padding-left:1px;text-align:center;line-height:20px;display:inline-block;margin-right:5px;cursor:pointer}.node .btn-holder .btn.btn-edit{background-color:#2196f3}.node .btn-holder .btn.btn-edit:hover{background-color:#69b5f3}.node .btn-holder .btn.btn-delete{background-color:#f56060}.node .btn-holder .btn.btn-delete:hover{background-color:#f78d8d}.node .btn-connect{position:absolute;top:calc(50% - 9px);transition:right .15s;right:-20px;width:16px;height:16px;background-color:orange;cursor:pointer;box-shadow:0 0 2px #000;transition:box-shadow .25s ease-in}.node .machine-code{border-bottom:1px solid green}.node.type-1{background-color:#adc58d;border-color:#fff}.node.type-1 .machine-code{border-color:#fff}.node.type-4{background-color:#fff;border-color:#65aedf}.node.type-4 .machine-code{border-color:#65aedf}.node.type-5{background-color:#ffc107;border-color:#795548}.node.type-5 .machine-code{border-color:#795548}.node.disabled{background-color:#ddd;border-color:#989898}.node.disabled .machine-code{border-color:#989898}.node.current{background-color:#94c2ea;border-color:#fff}.node.current .machine-code{border-color:#fff}.node:hover{box-shadow:2px 2px 19px #909090;-o-box-shadow:2px 2px 19px #909090;-webkit-box-shadow:2px 2px 19px #909090;-moz-box-shadow:2px 2px 19px #909090;z-index:5}.node:hover .btn-holder{bottom:0px}.node:hover .btn-connect{right:5px}.machine-icon{position:absolute;top:3px;right:3px;font-size:18px;color:#fff;text-shadow:1px 1px 2px #383838}.machine-code{flex:0 0 auto;min-height:21px;padding-left:5px;font-weight:700;text-align:left;overflow:hidden}.machine-name{text-align:justify;padding:5px;margin-bottom:25px;overflow-y:auto;height:calc(100% - 17px)}\n"] }]

package/esm2020/components/statemachines/state-metadata/state-metadata.component.mjs

@@ -83,7 +83,7 @@ export class StateMetadataComponent extends DataFormBase {
     }
 }
 StateMetadataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateMetadataComponent, deps: [{ token: i0.Injector }, { token: i1.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
-StateMetadataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateMetadataComponent, selector: "state-metadata", inputs: { data: "data", machinesData: "machinesData", location: "location" }, outputs: { onRemove: "onRemove" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n        class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\" [label]=\"'X\u00F3a' | translate\"\r\n        (click)=\"remove($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i4.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+StateMetadataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateMetadataComponent, selector: "state-metadata", inputs: { data: "data", machinesData: "machinesData", location: "location" }, outputs: { onRemove: "onRemove" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n        class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\" [label]=\"'X\u00F3a' | translate\"\r\n        (click)=\"remove($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateMetadataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'state-metadata', providers: [ComponentContextService], template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n        class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\" [label]=\"'X\u00F3a' | translate\"\r\n        (click)=\"remove($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>" }]

package/esm2020/components/statemachines/statemachines-connection-metadata/statemachines-connection-metadata.component.mjs

@@ -199,7 +199,7 @@ export class StateMachinesConnectionMetadataComponent extends DataFormBase {
     }
 }
 StateMachinesConnectionMetadataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateMachinesConnectionMetadataComponent, deps: [{ token: i0.Injector }, { token: i1.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
-StateMachinesConnectionMetadataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateMachinesConnectionMetadataComponent, selector: "statemachines-connection-metadata", inputs: { designerContext: "designerContext", data: "data", machinesData: "machinesData", viewOnly: "viewOnly" }, outputs: { onRemove: "onRemove" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "senderForm", first: true, predicate: ["senderForm"], descendants: true }, { propertyName: "receiverForm", first: true, predicate: ["receiverForm"], descendants: true }, { propertyName: "templateDropdownIcon", first: true, predicate: ["templateDropdownIcon"], descendants: true, static: true }, { propertyName: "templateDropdownIconSelected", first: true, predicate: ["templateDropdownIconSelected"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column\" style=\"height: 100%\">\r\n    <crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n        (onFormReady)=\"_handleFormReady($event)\">\r\n    </crud-form>\r\n    <div *ngIf=\"!model.data.openNewTab\" class=\"fit\" style=\"overflow: hidden;\">\r\n        <tn-tabview [data]=\"mainTabData\" [allowViewAll]=\"true\">\r\n            <ng-template #sender>\r\n                <statemachines-connection-sender #senderForm [data]=\"data\" [machines]=\"machinesData.machines\"\r\n                    [viewOnly]=\"viewOnly\">\r\n                </statemachines-connection-sender>\r\n            </ng-template>\r\n            <ng-template #receiver>\r\n                <statemachines-connection-receiver #receiverForm [designerContext]=\"designerContext\" [data]=\"data\"\r\n                    [isFormAdd]=\"isFormAdd\" [workflowData]=\"machinesData\" [viewOnly]=\"viewOnly\">\r\n                </statemachines-connection-receiver>\r\n            </ng-template>\r\n        </tn-tabview>\r\n    </div>\r\n</div>\r\n<ng-template #buttonTemplate>\r\n    <ng-container *ngIf=\"!viewOnly\">\r\n        <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n            class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n        <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n            [label]=\"'X\u00F3a' | translate\" (click)=\"remove($event)\"></button>\r\n    </ng-container>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>\r\n\r\n<ng-template #templateDropdownIconSelected let-item let-selectedValue=\"selectedValue\">\r\n    <span [class]=\"item.label\"></span>\r\n</ng-template>\r\n<ng-template #templateDropdownIcon let-item>\r\n    <div class=\"__workflow-setting-icon-item\">\r\n        <span [class]=\"item.label\"></span>\r\n    </div>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i4.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i5.StateMachinesConnectionReceiverComponent, selector: "statemachines-connection-receiver", inputs: ["designerContext", "data", "isFormAdd", "workflowData", "viewOnly"] }, { kind: "component", type: i6.StateMachinesConnectionSenderComponent, selector: "statemachines-connection-sender", inputs: ["data", "machines", "viewOnly"] }, { kind: "component", type: i7.TnTabViewComponent, selector: "tn-tabview", inputs: ["vertical", "data", "allowViewAll", "activeCode", "isDynamicHeight"], outputs: ["activeCodeChange", "tabContentChange"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+StateMachinesConnectionMetadataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateMachinesConnectionMetadataComponent, selector: "statemachines-connection-metadata", inputs: { designerContext: "designerContext", data: "data", machinesData: "machinesData", viewOnly: "viewOnly" }, outputs: { onRemove: "onRemove" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "senderForm", first: true, predicate: ["senderForm"], descendants: true }, { propertyName: "receiverForm", first: true, predicate: ["receiverForm"], descendants: true }, { propertyName: "templateDropdownIcon", first: true, predicate: ["templateDropdownIcon"], descendants: true, static: true }, { propertyName: "templateDropdownIconSelected", first: true, predicate: ["templateDropdownIconSelected"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-column\" style=\"height: 100%\">\r\n    <crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n        (onFormReady)=\"_handleFormReady($event)\">\r\n    </crud-form>\r\n    <div *ngIf=\"!model.data.openNewTab\" class=\"fit\" style=\"overflow: hidden;\">\r\n        <tn-tabview [data]=\"mainTabData\" [allowViewAll]=\"true\">\r\n            <ng-template #sender>\r\n                <statemachines-connection-sender #senderForm [data]=\"data\" [machines]=\"machinesData.machines\"\r\n                    [viewOnly]=\"viewOnly\">\r\n                </statemachines-connection-sender>\r\n            </ng-template>\r\n            <ng-template #receiver>\r\n                <statemachines-connection-receiver #receiverForm [designerContext]=\"designerContext\" [data]=\"data\"\r\n                    [isFormAdd]=\"isFormAdd\" [workflowData]=\"machinesData\" [viewOnly]=\"viewOnly\">\r\n                </statemachines-connection-receiver>\r\n            </ng-template>\r\n        </tn-tabview>\r\n    </div>\r\n</div>\r\n<ng-template #buttonTemplate>\r\n    <ng-container *ngIf=\"!viewOnly\">\r\n        <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n            class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n        <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n            [label]=\"'X\u00F3a' | translate\" (click)=\"remove($event)\"></button>\r\n    </ng-container>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>\r\n\r\n<ng-template #templateDropdownIconSelected let-item let-selectedValue=\"selectedValue\">\r\n    <span [class]=\"item.label\"></span>\r\n</ng-template>\r\n<ng-template #templateDropdownIcon let-item>\r\n    <div class=\"__workflow-setting-icon-item\">\r\n        <span [class]=\"item.label\"></span>\r\n    </div>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4.CrudFormComponent, selector: "crud-form", inputs: ["setting", "context", "filesUploaded", "isViewMode", "disableKeypressControl", "disableCaching", "styleClass", "useGridTemplate", "formId", "formClass", "autoFocus", "trapFocus", "data", "formState"], outputs: ["onFormReady", "onControlReady", "onAllControlReady", "onModelChanged", "dataChange", "onChange", "onAfterTrinhKy"] }, { kind: "component", type: i5.StateMachinesConnectionReceiverComponent, selector: "statemachines-connection-receiver", inputs: ["designerContext", "data", "isFormAdd", "workflowData", "viewOnly"] }, { kind: "component", type: i6.StateMachinesConnectionSenderComponent, selector: "statemachines-connection-sender", inputs: ["data", "machines", "viewOnly"] }, { kind: "component", type: i7.TnTabViewComponent, selector: "tn-tabview", inputs: ["vertical", "data", "allowViewAll", "activeCode", "isDynamicHeight"], outputs: ["activeCodeChange", "tabContentChange"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateMachinesConnectionMetadataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'statemachines-connection-metadata', providers: [ComponentContextService], template: "<div class=\"flex flex-column\" style=\"height: 100%\">\r\n    <crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n        (onFormReady)=\"_handleFormReady($event)\">\r\n    </crud-form>\r\n    <div *ngIf=\"!model.data.openNewTab\" class=\"fit\" style=\"overflow: hidden;\">\r\n        <tn-tabview [data]=\"mainTabData\" [allowViewAll]=\"true\">\r\n            <ng-template #sender>\r\n                <statemachines-connection-sender #senderForm [data]=\"data\" [machines]=\"machinesData.machines\"\r\n                    [viewOnly]=\"viewOnly\">\r\n                </statemachines-connection-sender>\r\n            </ng-template>\r\n            <ng-template #receiver>\r\n                <statemachines-connection-receiver #receiverForm [designerContext]=\"designerContext\" [data]=\"data\"\r\n                    [isFormAdd]=\"isFormAdd\" [workflowData]=\"machinesData\" [viewOnly]=\"viewOnly\">\r\n                </statemachines-connection-receiver>\r\n            </ng-template>\r\n        </tn-tabview>\r\n    </div>\r\n</div>\r\n<ng-template #buttonTemplate>\r\n    <ng-container *ngIf=\"!viewOnly\">\r\n        <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n            class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n        <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n            [label]=\"'X\u00F3a' | translate\" (click)=\"remove($event)\"></button>\r\n    </ng-container>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>\r\n\r\n<ng-template #templateDropdownIconSelected let-item let-selectedValue=\"selectedValue\">\r\n    <span [class]=\"item.label\"></span>\r\n</ng-template>\r\n<ng-template #templateDropdownIcon let-item>\r\n    <div class=\"__workflow-setting-icon-item\">\r\n        <span [class]=\"item.label\"></span>\r\n    </div>\r\n</ng-template>" }]

package/esm2020/components/statemachines/statemachines-designer/statemachines-designer.component.mjs

@@ -422,7 +422,7 @@ export class StateMachinesDesignerComponent extends ComponentBase {
     }
 }
 StateMachinesDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateMachinesDesignerComponent, deps: [{ token: i0.Injector }, { token: i1.NotifierService }], target: i0.ɵɵFactoryTarget.Component });
-StateMachinesDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateMachinesDesignerComponent, selector: "statemachines-designer", inputs: { useScrollBar: "useScrollBar", viewOnly: "viewOnly", data: "data", currentConnection: "currentConnection", containerId: "containerId", jsPlumbOption: "jsPlumbOption" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "containerDOM", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"state-control\" [class.fullScreenMode]=\"fullScreenMode\" [class.highlight]=\"highlighting\"\r\n    [class.viewOnly]=\"viewOnly\">\r\n    <tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [showScrollHorizontal]=\"true\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </tn-custom-scrollbar>\r\n    <ng-container *ngIf=\"!useScrollBar\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"container-note\">\r\n        <ng-container *ngIf=\"!viewOnly\">\r\n            <span><i class=\"fas fa-info-circle\"></i> Click \u0111\u00FAp v\u00E0o v\u00F9ng tr\u1ED1ng \u0111\u1EC3 th\u00EAm m\u1EDBi tr\u1EA1ng th\u00E1i\r\n            </span>\r\n            <button pButton type=\"button\" pTooltip=\"Sao ch\u00E9p\" tooltipPosition=\"top\"\r\n                class=\"p-button-rounded p-button-info p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n                (click)=\"copyWfToClipboard()\">\r\n                <i class=\"fas fa-copy\"></i>\r\n            </button>\r\n\r\n            <button pButton type=\"button\" label=\"Success\" pTooltip=\"D\u00E1n\" tooltipPosition=\"top\"\r\n                class=\"p-button-rounded p-button-success p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n                (click)=\"pasteWfToClipboard()\">\r\n                <i class=\"fas fa-paste\"></i>\r\n            </button>\r\n        </ng-container>\r\n        <button pButton type=\"button\" label=\"Success\" pTooltip=\"M\u1EDF r\u1ED9ng\" tooltipPosition=\"top\"\r\n            class=\"p-button-rounded p-button-secondary p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n            (click)=\"fullScreen(!fullScreenMode)\">\r\n            <i *ngIf=\"!fullScreenMode\" class=\"fas fa-expand-arrows-alt\"></i>\r\n            <i *ngIf=\"fullScreenMode\" class=\"fas fa-compress-arrows-alt\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #content>\r\n    <div *ngIf=\"jsPlumbReady\" #container [id]=\"containerId\" class=\"container\" [ngClass]=\"viewOnly?'':'editable'\"\r\n        [ngStyle]=\"containerStyle\" (dblclick)=\"createNewNode($event, container)\">\r\n        <ng-container *ngIf=\"data.machines.length > 0\">\r\n            <state *ngFor=\"let machine of data.machines\" [id]=\"containerId + '_' + machine.id\" [machine]=\"machine\"\r\n                [viewOnly]=\"viewOnly\" class=\"state-node\"\r\n                [ngStyle]=\"{'left': machine.location[0] + 'px', 'top': machine.location[1] + 'px'}\"\r\n                [jsPlumbInstance]=\"jsPlumbInstance\" [containerId]=\"containerId\" (onEdit)=\"editNode($event)\"\r\n                (onDelete)=\"deleteNode($event)\" (onReady)=\"checkStatesReadyThenRenderConnections($event)\">\r\n            </state>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\"></p-contextMenu>\r\n\r\n<tn-dialog *ngIf=\"stateMetadataModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"'Th\u00F4ng tin tr\u1EA1ng th\u00E1i' | translate\" [popupSize]=\"stateMetadataModel.popupSize\"\r\n    (onHide)=\"hideStateMetadataForm()\">\r\n    <state-metadata #formBase [data]=\"currentState\" [location]=\"locationWhenAdd\" [machinesData]=\"data\"\r\n        (onSaved)=\"handleSavedStateMetadata($event)\" (onCancel)=\"hideStateMetadataForm()\"\r\n        (onRemove)=\"handleRemoveFromDialog()\">\r\n    </state-metadata>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"stateMachineConnectionModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [useDefaultScrollBar]=\"true\" [header]=\"'Th\u00F4ng tin \u0111\u01B0\u1EDDng n\u1ED1i' | translate\"\r\n    [popupSize]=\"stateMachineConnectionModel.popupSize\" (onHide)=\"hideConnectionForm()\">\r\n    <statemachines-connection-metadata #formBase [data]=\"currentConnectionObject.connectionMetadata\"\r\n        [designerContext]=\"context\" [machinesData]=\"data\" [viewOnly]=\"viewOnly\"\r\n        (onSaved)=\"handleSavedConnection($event)\" (onCancel)=\"hideConnectionForm()\"\r\n        (onRemove)=\"handleRemoveConnectionFromDialog()\">\r\n    </statemachines-connection-metadata>\r\n</tn-dialog>", styles: [".state-control{width:100%;height:100%;position:relative;border:1px solid #ced4da;overflow:hidden;border-radius:3px}.state-control .container{height:1500px;position:relative}.state-control .container .state-node{position:absolute;width:150px;height:100px;max-height:100px;display:block}.state-control .container-note{position:absolute;top:0px;font-weight:100;text-align:right;display:inline-block;width:auto;right:0;padding:10px 14px;margin:0;background:white;z-index:15}.state-control .container-note span{margin-right:10px;line-height:30px;background:#ffeb3b;padding:5px}.state-control .container-note button{margin-right:5px}.state-control .container-note button:last-child{margin-right:0}.state-control.viewOnly{border:none}.state-control.fullScreenMode{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background-color:#fff;overflow:auto}:host ::ng-deep .jtk-hover{z-index:1}:host ::ng-deep .conn-label{z-index:2;border:1px dashed #c5c5c5;padding:5px;background:rgba(97,183,207,.3019607843)}:host ::ng-deep .conn-label:hover{background:#fff}:host ::ng-deep .conn-label.jtk-hover{z-index:3;background:#44a7c3;color:#fff;border:none}:host ::ng-deep .editable path,:host ::ng-deep .editable .jtk-endpoint,:host ::ng-deep .editable .jtk-connector{cursor:pointer}:host ::ng-deep .editable .conn-label{cursor:pointer}::ng-deep .state-control.highlight state,::ng-deep .state-control.highlight .jtk-connector,::ng-deep .state-control.highlight .conn-label{opacity:.3}::ng-deep .state-control.highlight state.--current,::ng-deep .state-control.highlight .jtk-connector.--current,::ng-deep .state-control.highlight .conn-label.--current{opacity:unset}::ng-deep .state-control.highlight .conn-label.--current{background:#44a7c3;border:none;color:#fff}::ng-deep .state-control.highlight state.lastState{animation:zoomInOut 1s infinite ease-in-out}::ng-deep .ps__rail-x,::ng-deep .ps__rail-y{z-index:16}@keyframes zoomInOut{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i5.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i6.StateComponent, selector: "state", inputs: ["viewOnly", "jsPlumbInstance", "containerId", "machine"], outputs: ["onDelete", "onEdit", "onReady"] }, { kind: "component", type: i7.StateMetadataComponent, selector: "state-metadata", inputs: ["data", "machinesData", "location"], outputs: ["onRemove"] }, { kind: "component", type: i8.StateMachinesConnectionMetadataComponent, selector: "statemachines-connection-metadata", inputs: ["designerContext", "data", "machinesData", "viewOnly"], outputs: ["onRemove"] }, { kind: "component", type: i9.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i10.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
+StateMachinesDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StateMachinesDesignerComponent, selector: "statemachines-designer", inputs: { useScrollBar: "useScrollBar", viewOnly: "viewOnly", data: "data", currentConnection: "currentConnection", containerId: "containerId", jsPlumbOption: "jsPlumbOption" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "containerDOM", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"state-control\" [class.fullScreenMode]=\"fullScreenMode\" [class.highlight]=\"highlighting\"\r\n    [class.viewOnly]=\"viewOnly\">\r\n    <tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [showScrollHorizontal]=\"true\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </tn-custom-scrollbar>\r\n    <ng-container *ngIf=\"!useScrollBar\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"container-note\">\r\n        <ng-container *ngIf=\"!viewOnly\">\r\n            <span><i class=\"fas fa-info-circle\"></i> Click \u0111\u00FAp v\u00E0o v\u00F9ng tr\u1ED1ng \u0111\u1EC3 th\u00EAm m\u1EDBi tr\u1EA1ng th\u00E1i\r\n            </span>\r\n            <button pButton type=\"button\" pTooltip=\"Sao ch\u00E9p\" tooltipPosition=\"top\"\r\n                class=\"p-button-rounded p-button-info p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n                (click)=\"copyWfToClipboard()\">\r\n                <i class=\"fas fa-copy\"></i>\r\n            </button>\r\n\r\n            <button pButton type=\"button\" label=\"Success\" pTooltip=\"D\u00E1n\" tooltipPosition=\"top\"\r\n                class=\"p-button-rounded p-button-success p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n                (click)=\"pasteWfToClipboard()\">\r\n                <i class=\"fas fa-paste\"></i>\r\n            </button>\r\n        </ng-container>\r\n        <button pButton type=\"button\" label=\"Success\" pTooltip=\"M\u1EDF r\u1ED9ng\" tooltipPosition=\"top\"\r\n            class=\"p-button-rounded p-button-secondary p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n            (click)=\"fullScreen(!fullScreenMode)\">\r\n            <i *ngIf=\"!fullScreenMode\" class=\"fas fa-expand-arrows-alt\"></i>\r\n            <i *ngIf=\"fullScreenMode\" class=\"fas fa-compress-arrows-alt\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #content>\r\n    <div *ngIf=\"jsPlumbReady\" #container [id]=\"containerId\" class=\"container\" [ngClass]=\"viewOnly?'':'editable'\"\r\n        [ngStyle]=\"containerStyle\" (dblclick)=\"createNewNode($event, container)\">\r\n        <ng-container *ngIf=\"data.machines.length > 0\">\r\n            <state *ngFor=\"let machine of data.machines\" [id]=\"containerId + '_' + machine.id\" [machine]=\"machine\"\r\n                [viewOnly]=\"viewOnly\" class=\"state-node\"\r\n                [ngStyle]=\"{'left': machine.location[0] + 'px', 'top': machine.location[1] + 'px'}\"\r\n                [jsPlumbInstance]=\"jsPlumbInstance\" [containerId]=\"containerId\" (onEdit)=\"editNode($event)\"\r\n                (onDelete)=\"deleteNode($event)\" (onReady)=\"checkStatesReadyThenRenderConnections($event)\">\r\n            </state>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\"></p-contextMenu>\r\n\r\n<tn-dialog *ngIf=\"stateMetadataModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"'Th\u00F4ng tin tr\u1EA1ng th\u00E1i' | translate\" [popupSize]=\"stateMetadataModel.popupSize\"\r\n    (onHide)=\"hideStateMetadataForm()\">\r\n    <state-metadata #formBase [data]=\"currentState\" [location]=\"locationWhenAdd\" [machinesData]=\"data\"\r\n        (onSaved)=\"handleSavedStateMetadata($event)\" (onCancel)=\"hideStateMetadataForm()\"\r\n        (onRemove)=\"handleRemoveFromDialog()\">\r\n    </state-metadata>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"stateMachineConnectionModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [useDefaultScrollBar]=\"true\" [header]=\"'Th\u00F4ng tin \u0111\u01B0\u1EDDng n\u1ED1i' | translate\"\r\n    [popupSize]=\"stateMachineConnectionModel.popupSize\" (onHide)=\"hideConnectionForm()\">\r\n    <statemachines-connection-metadata #formBase [data]=\"currentConnectionObject.connectionMetadata\"\r\n        [designerContext]=\"context\" [machinesData]=\"data\" [viewOnly]=\"viewOnly\"\r\n        (onSaved)=\"handleSavedConnection($event)\" (onCancel)=\"hideConnectionForm()\"\r\n        (onRemove)=\"handleRemoveConnectionFromDialog()\">\r\n    </statemachines-connection-metadata>\r\n</tn-dialog>", styles: [".state-control{width:100%;height:100%;position:relative;border:1px solid #ced4da;overflow:hidden;border-radius:3px}.state-control .container{height:1500px;position:relative}.state-control .container .state-node{position:absolute;width:150px;height:100px;max-height:100px;display:block}.state-control .container-note{position:absolute;top:0px;font-weight:100;text-align:right;display:inline-block;width:auto;right:0;padding:10px 14px;margin:0;background:white;z-index:15}.state-control .container-note span{margin-right:10px;line-height:30px;background:#ffeb3b;padding:5px}.state-control .container-note button{margin-right:5px}.state-control .container-note button:last-child{margin-right:0}.state-control.viewOnly{border:none}.state-control.fullScreenMode{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background-color:#fff;overflow:auto}:host ::ng-deep .jtk-hover{z-index:1}:host ::ng-deep .conn-label{z-index:2;border:1px dashed #c5c5c5;padding:5px;background:rgba(97,183,207,.3019607843)}:host ::ng-deep .conn-label:hover{background:#fff}:host ::ng-deep .conn-label.jtk-hover{z-index:3;background:#44a7c3;color:#fff;border:none}:host ::ng-deep .editable path,:host ::ng-deep .editable .jtk-endpoint,:host ::ng-deep .editable .jtk-connector{cursor:pointer}:host ::ng-deep .editable .conn-label{cursor:pointer}::ng-deep .state-control.highlight state,::ng-deep .state-control.highlight .jtk-connector,::ng-deep .state-control.highlight .conn-label{opacity:.3}::ng-deep .state-control.highlight state.--current,::ng-deep .state-control.highlight .jtk-connector.--current,::ng-deep .state-control.highlight .conn-label.--current{opacity:unset}::ng-deep .state-control.highlight .conn-label.--current{background:#44a7c3;border:none;color:#fff}::ng-deep .state-control.highlight state.lastState{animation:zoomInOut 1s infinite ease-in-out}::ng-deep .ps__rail-x,::ng-deep .ps__rail-y{z-index:16}@keyframes zoomInOut{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.ContextMenu, selector: "p-contextMenu", inputs: ["model", "global", "target", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "triggerEvent"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i6.StateComponent, selector: "state", inputs: ["viewOnly", "jsPlumbInstance", "containerId", "machine"], outputs: ["onDelete", "onEdit", "onReady"] }, { kind: "component", type: i7.StateMetadataComponent, selector: "state-metadata", inputs: ["data", "machinesData", "location"], outputs: ["onRemove"] }, { kind: "component", type: i8.StateMachinesConnectionMetadataComponent, selector: "statemachines-connection-metadata", inputs: ["designerContext", "data", "machinesData", "viewOnly"], outputs: ["onRemove"] }, { kind: "component", type: i9.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i10.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StateMachinesDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'statemachines-designer', providers: [ComponentContextService], template: "<div class=\"state-control\" [class.fullScreenMode]=\"fullScreenMode\" [class.highlight]=\"highlighting\"\r\n    [class.viewOnly]=\"viewOnly\">\r\n    <tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [showScrollHorizontal]=\"true\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </tn-custom-scrollbar>\r\n    <ng-container *ngIf=\"!useScrollBar\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"container-note\">\r\n        <ng-container *ngIf=\"!viewOnly\">\r\n            <span><i class=\"fas fa-info-circle\"></i> Click \u0111\u00FAp v\u00E0o v\u00F9ng tr\u1ED1ng \u0111\u1EC3 th\u00EAm m\u1EDBi tr\u1EA1ng th\u00E1i\r\n            </span>\r\n            <button pButton type=\"button\" pTooltip=\"Sao ch\u00E9p\" tooltipPosition=\"top\"\r\n                class=\"p-button-rounded p-button-info p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n                (click)=\"copyWfToClipboard()\">\r\n                <i class=\"fas fa-copy\"></i>\r\n            </button>\r\n\r\n            <button pButton type=\"button\" label=\"Success\" pTooltip=\"D\u00E1n\" tooltipPosition=\"top\"\r\n                class=\"p-button-rounded p-button-success p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n                (click)=\"pasteWfToClipboard()\">\r\n                <i class=\"fas fa-paste\"></i>\r\n            </button>\r\n        </ng-container>\r\n        <button pButton type=\"button\" label=\"Success\" pTooltip=\"M\u1EDF r\u1ED9ng\" tooltipPosition=\"top\"\r\n            class=\"p-button-rounded p-button-secondary p-button-outlined p-ripple p-button p-component p-button-icon-only\"\r\n            (click)=\"fullScreen(!fullScreenMode)\">\r\n            <i *ngIf=\"!fullScreenMode\" class=\"fas fa-expand-arrows-alt\"></i>\r\n            <i *ngIf=\"fullScreenMode\" class=\"fas fa-compress-arrows-alt\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #content>\r\n    <div *ngIf=\"jsPlumbReady\" #container [id]=\"containerId\" class=\"container\" [ngClass]=\"viewOnly?'':'editable'\"\r\n        [ngStyle]=\"containerStyle\" (dblclick)=\"createNewNode($event, container)\">\r\n        <ng-container *ngIf=\"data.machines.length > 0\">\r\n            <state *ngFor=\"let machine of data.machines\" [id]=\"containerId + '_' + machine.id\" [machine]=\"machine\"\r\n                [viewOnly]=\"viewOnly\" class=\"state-node\"\r\n                [ngStyle]=\"{'left': machine.location[0] + 'px', 'top': machine.location[1] + 'px'}\"\r\n                [jsPlumbInstance]=\"jsPlumbInstance\" [containerId]=\"containerId\" (onEdit)=\"editNode($event)\"\r\n                (onDelete)=\"deleteNode($event)\" (onReady)=\"checkStatesReadyThenRenderConnections($event)\">\r\n            </state>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\"></p-contextMenu>\r\n\r\n<tn-dialog *ngIf=\"stateMetadataModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"'Th\u00F4ng tin tr\u1EA1ng th\u00E1i' | translate\" [popupSize]=\"stateMetadataModel.popupSize\"\r\n    (onHide)=\"hideStateMetadataForm()\">\r\n    <state-metadata #formBase [data]=\"currentState\" [location]=\"locationWhenAdd\" [machinesData]=\"data\"\r\n        (onSaved)=\"handleSavedStateMetadata($event)\" (onCancel)=\"hideStateMetadataForm()\"\r\n        (onRemove)=\"handleRemoveFromDialog()\">\r\n    </state-metadata>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"stateMachineConnectionModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [useDefaultScrollBar]=\"true\" [header]=\"'Th\u00F4ng tin \u0111\u01B0\u1EDDng n\u1ED1i' | translate\"\r\n    [popupSize]=\"stateMachineConnectionModel.popupSize\" (onHide)=\"hideConnectionForm()\">\r\n    <statemachines-connection-metadata #formBase [data]=\"currentConnectionObject.connectionMetadata\"\r\n        [designerContext]=\"context\" [machinesData]=\"data\" [viewOnly]=\"viewOnly\"\r\n        (onSaved)=\"handleSavedConnection($event)\" (onCancel)=\"hideConnectionForm()\"\r\n        (onRemove)=\"handleRemoveConnectionFromDialog()\">\r\n    </statemachines-connection-metadata>\r\n</tn-dialog>", styles: [".state-control{width:100%;height:100%;position:relative;border:1px solid #ced4da;overflow:hidden;border-radius:3px}.state-control .container{height:1500px;position:relative}.state-control .container .state-node{position:absolute;width:150px;height:100px;max-height:100px;display:block}.state-control .container-note{position:absolute;top:0px;font-weight:100;text-align:right;display:inline-block;width:auto;right:0;padding:10px 14px;margin:0;background:white;z-index:15}.state-control .container-note span{margin-right:10px;line-height:30px;background:#ffeb3b;padding:5px}.state-control .container-note button{margin-right:5px}.state-control .container-note button:last-child{margin-right:0}.state-control.viewOnly{border:none}.state-control.fullScreenMode{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background-color:#fff;overflow:auto}:host ::ng-deep .jtk-hover{z-index:1}:host ::ng-deep .conn-label{z-index:2;border:1px dashed #c5c5c5;padding:5px;background:rgba(97,183,207,.3019607843)}:host ::ng-deep .conn-label:hover{background:#fff}:host ::ng-deep .conn-label.jtk-hover{z-index:3;background:#44a7c3;color:#fff;border:none}:host ::ng-deep .editable path,:host ::ng-deep .editable .jtk-endpoint,:host ::ng-deep .editable .jtk-connector{cursor:pointer}:host ::ng-deep .editable .conn-label{cursor:pointer}::ng-deep .state-control.highlight state,::ng-deep .state-control.highlight .jtk-connector,::ng-deep .state-control.highlight .conn-label{opacity:.3}::ng-deep .state-control.highlight state.--current,::ng-deep .state-control.highlight .jtk-connector.--current,::ng-deep .state-control.highlight .conn-label.--current{opacity:unset}::ng-deep .state-control.highlight .conn-label.--current{background:#44a7c3;border:none;color:#fff}::ng-deep .state-control.highlight state.lastState{animation:zoomInOut 1s infinite ease-in-out}::ng-deep .ps__rail-x,::ng-deep .ps__rail-y{z-index:16}@keyframes zoomInOut{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}\n"] }]

package/esm2020/components/tn-app-help/helper-current-page/helper-current-page.component.mjs

@@ -222,7 +222,7 @@ export class HelperCurrentPageComponent {
     }
 }
 HelperCurrentPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: HelperCurrentPageComponent, deps: [{ token: i1.PathNameService }, { token: i2.DomService }], target: i0.ɵɵFactoryTarget.Component });
-HelperCurrentPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: HelperCurrentPageComponent, selector: "helper-current-page", providers: [ComponentContextService], viewQueries: [{ propertyName: "frameGuide", first: true, predicate: ["frameGuide"], descendants: true }, { propertyName: "guideContent", first: true, predicate: ["guideContent"], descendants: true }, { propertyName: "currentSlide", first: true, predicate: ["currentSlide"], descendants: true }, { propertyName: "totalSlide", first: true, predicate: ["totalSlide"], descendants: true }], ngImport: i0, template: "<div #frameGuide id=\"frameGuide\" class=\"FrameGuide\"></div>\r\n\r\n<div #guideContent id=\"guideContent\" class=\"GuidePopup\" (click)=\"guideContentClick($event)\"\r\n    (keyup)=\"keyUpGuideContent($event)\">\r\n    <div class='GuideTitle'></div>\r\n    <div class='GuideContent'></div>\r\n    <div class='GuideAction'>\r\n        <div class=\"ui-g-2 ui-md-2 ui-sm-2\" style=\"text-align: left; padding-left: 0px; line-height: 30px;\">\r\n            <span #currentSlide id=\"currentSlide\"></span> / <span #totalSlide id=\"totalSlide\"></span>\r\n        </div>\r\n        <div class=\"ui-g-10 ui-md-10 ui-sm-10 button-group\">\r\n            <button icon=\"far fa-play-circle\" pButton type=\"button\" (click)=\"doShowGuide($event)\"\r\n                label=\"Xem ti\u1EBFp\"></button>\r\n            <button icon=\"far fa-stop-circle\" pButton type=\"button\" (click)=\"completeGuide()\"\r\n                class=\"ui-button-secondary\" label=\"B\u1ECF qua\"></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".FrameGuide{position:absolute;visibility:hidden;opacity:0;z-index:99991;background-color:transparent;box-shadow:0 0 0 9999px #424242b3;transform:scale(5);transition:transform .6s}.GuidePopup{position:absolute;visibility:hidden;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;z-index:99992;width:400px;background-color:#fff;transition:left .5s,top .5s,visibility 0s,opacity .6s linear;box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.GuidePopup:before{width:0;height:0;content:\" \";position:absolute}.GuidePopup>.GuideTitle,.GuidePopup .GuideContent,.GuidePopup .GuideAction{padding-left:30px;padding-right:30px}.GuidePopup>.GuideTitle{font-weight:700;padding-top:15px;padding-bottom:15px;box-shadow:0 2px 5px #8c8c8c26}.GuideTitleUnderRight:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;left:20px}.GuideTitleUnderLeft:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;right:20px}.GuideTitleMiddleUnder:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;left:calc(50% - 5px)}.GuideTitleMiddleTop:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;left:calc(50% - 5px)}.GuideTitleMiddleLeft:before{border-bottom:8px solid transparent;border-top:8px solid transparent;border-left:10px solid #fff;top:calc(50% - 10px);right:-10px}.GuideTitleMiddleRight:before{border-bottom:8px solid transparent;border-top:8px solid transparent;border-right:10px solid #fff;top:calc(50% - 10px);left:-10px}.GuideTitleTopLeft:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;right:20px}.GuideTitleTopRight:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;left:20px}.GuideContent{padding-bottom:30px}.GuideAction{text-align:right;padding-bottom:15px}.GuideAction button{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }], encapsulation: i0.ViewEncapsulation.None });
+HelperCurrentPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: HelperCurrentPageComponent, selector: "helper-current-page", providers: [ComponentContextService], viewQueries: [{ propertyName: "frameGuide", first: true, predicate: ["frameGuide"], descendants: true }, { propertyName: "guideContent", first: true, predicate: ["guideContent"], descendants: true }, { propertyName: "currentSlide", first: true, predicate: ["currentSlide"], descendants: true }, { propertyName: "totalSlide", first: true, predicate: ["totalSlide"], descendants: true }], ngImport: i0, template: "<div #frameGuide id=\"frameGuide\" class=\"FrameGuide\"></div>\r\n\r\n<div #guideContent id=\"guideContent\" class=\"GuidePopup\" (click)=\"guideContentClick($event)\"\r\n    (keyup)=\"keyUpGuideContent($event)\">\r\n    <div class='GuideTitle'></div>\r\n    <div class='GuideContent'></div>\r\n    <div class='GuideAction'>\r\n        <div class=\"ui-g-2 ui-md-2 ui-sm-2\" style=\"text-align: left; padding-left: 0px; line-height: 30px;\">\r\n            <span #currentSlide id=\"currentSlide\"></span> / <span #totalSlide id=\"totalSlide\"></span>\r\n        </div>\r\n        <div class=\"ui-g-10 ui-md-10 ui-sm-10 button-group\">\r\n            <button icon=\"far fa-play-circle\" pButton type=\"button\" (click)=\"doShowGuide($event)\"\r\n                label=\"Xem ti\u1EBFp\"></button>\r\n            <button icon=\"far fa-stop-circle\" pButton type=\"button\" (click)=\"completeGuide()\"\r\n                class=\"ui-button-secondary\" label=\"B\u1ECF qua\"></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".FrameGuide{position:absolute;visibility:hidden;opacity:0;z-index:99991;background-color:transparent;box-shadow:0 0 0 9999px #424242b3;transform:scale(5);transition:transform .6s}.GuidePopup{position:absolute;visibility:hidden;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;z-index:99992;width:400px;background-color:#fff;transition:left .5s,top .5s,visibility 0s,opacity .6s linear;box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.GuidePopup:before{width:0;height:0;content:\" \";position:absolute}.GuidePopup>.GuideTitle,.GuidePopup .GuideContent,.GuidePopup .GuideAction{padding-left:30px;padding-right:30px}.GuidePopup>.GuideTitle{font-weight:700;padding-top:15px;padding-bottom:15px;box-shadow:0 2px 5px #8c8c8c26}.GuideTitleUnderRight:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;left:20px}.GuideTitleUnderLeft:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;right:20px}.GuideTitleMiddleUnder:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;left:calc(50% - 5px)}.GuideTitleMiddleTop:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;left:calc(50% - 5px)}.GuideTitleMiddleLeft:before{border-bottom:8px solid transparent;border-top:8px solid transparent;border-left:10px solid #fff;top:calc(50% - 10px);right:-10px}.GuideTitleMiddleRight:before{border-bottom:8px solid transparent;border-top:8px solid transparent;border-right:10px solid #fff;top:calc(50% - 10px);left:-10px}.GuideTitleTopLeft:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;right:20px}.GuideTitleTopRight:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;left:20px}.GuideContent{padding-bottom:30px}.GuideAction{text-align:right;padding-bottom:15px}.GuideAction button{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: HelperCurrentPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'helper-current-page', providers: [ComponentContextService], encapsulation: ViewEncapsulation.None, template: "<div #frameGuide id=\"frameGuide\" class=\"FrameGuide\"></div>\r\n\r\n<div #guideContent id=\"guideContent\" class=\"GuidePopup\" (click)=\"guideContentClick($event)\"\r\n    (keyup)=\"keyUpGuideContent($event)\">\r\n    <div class='GuideTitle'></div>\r\n    <div class='GuideContent'></div>\r\n    <div class='GuideAction'>\r\n        <div class=\"ui-g-2 ui-md-2 ui-sm-2\" style=\"text-align: left; padding-left: 0px; line-height: 30px;\">\r\n            <span #currentSlide id=\"currentSlide\"></span> / <span #totalSlide id=\"totalSlide\"></span>\r\n        </div>\r\n        <div class=\"ui-g-10 ui-md-10 ui-sm-10 button-group\">\r\n            <button icon=\"far fa-play-circle\" pButton type=\"button\" (click)=\"doShowGuide($event)\"\r\n                label=\"Xem ti\u1EBFp\"></button>\r\n            <button icon=\"far fa-stop-circle\" pButton type=\"button\" (click)=\"completeGuide()\"\r\n                class=\"ui-button-secondary\" label=\"B\u1ECF qua\"></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".FrameGuide{position:absolute;visibility:hidden;opacity:0;z-index:99991;background-color:transparent;box-shadow:0 0 0 9999px #424242b3;transform:scale(5);transition:transform .6s}.GuidePopup{position:absolute;visibility:hidden;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;z-index:99992;width:400px;background-color:#fff;transition:left .5s,top .5s,visibility 0s,opacity .6s linear;box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.GuidePopup:before{width:0;height:0;content:\" \";position:absolute}.GuidePopup>.GuideTitle,.GuidePopup .GuideContent,.GuidePopup .GuideAction{padding-left:30px;padding-right:30px}.GuidePopup>.GuideTitle{font-weight:700;padding-top:15px;padding-bottom:15px;box-shadow:0 2px 5px #8c8c8c26}.GuideTitleUnderRight:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;left:20px}.GuideTitleUnderLeft:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;right:20px}.GuideTitleMiddleUnder:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;top:-10px;left:calc(50% - 5px)}.GuideTitleMiddleTop:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;left:calc(50% - 5px)}.GuideTitleMiddleLeft:before{border-bottom:8px solid transparent;border-top:8px solid transparent;border-left:10px solid #fff;top:calc(50% - 10px);right:-10px}.GuideTitleMiddleRight:before{border-bottom:8px solid transparent;border-top:8px solid transparent;border-right:10px solid #fff;top:calc(50% - 10px);left:-10px}.GuideTitleTopLeft:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;right:20px}.GuideTitleTopRight:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff;bottom:-10px;left:20px}.GuideContent{padding-bottom:30px}.GuideAction{text-align:right;padding-bottom:15px}.GuideAction button{margin-left:10px}\n"] }]