tnx-shared 5.2.22 → 5.2.23

package/esm2020/components/file-explorer/signature-detail/signature-detail.component.mjs

@@ -55,7 +55,7 @@ export class SignatureDetailComponent extends ComponentBase {
     }
 }
 SignatureDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SignatureDetailComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SignatureDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SignatureDetailComponent, selector: "signature-detail", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div class=\"tree-signature\">\r\n    <p-tree [value]=\"model.dataSource\" [filter]=\"true\" [emptyMessage]=\"'Kh\u00F4ng c\u00F3 ch\u1EEF k\u00FD'\" styleClass=\"signature-tree\">\r\n    </p-tree>\r\n</div>", styles: [":host::ng-deep .signature-tree{width:100%;border:none}:host::ng-deep .signature-tree .ui-treenode-icon{padding-right:10px;color:#888}:host::ng-deep .signature-tree span.fas.fa-signature+span{font-weight:700}:host::ng-deep .signature-tree span.ui-treenode-icon.fas.fa-signature{color:#212529!important;padding-left:5px}:host::ng-deep .signature-tree span.ui-tree-toggler{color:#212529!important}\n"], dependencies: [{ kind: "component", type: i1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }] });
+SignatureDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: SignatureDetailComponent, selector: "signature-detail", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div class=\"tree-signature\">\r\n    <p-tree [value]=\"model.dataSource\" [filter]=\"true\" [emptyMessage]=\"'Kh\u00F4ng c\u00F3 ch\u1EEF k\u00FD'\" styleClass=\"signature-tree\">\r\n    </p-tree>\r\n</div>", styles: [":host::ng-deep .signature-tree{width:100%;border:none}:host::ng-deep .signature-tree .ui-treenode-icon{padding-right:10px;color:#888}:host::ng-deep .signature-tree span.fas.fa-signature+span{font-weight:700}:host::ng-deep .signature-tree span.ui-treenode-icon.fas.fa-signature{color:#212529!important;padding-left:5px}:host::ng-deep .signature-tree span.ui-tree-toggler{color:#212529!important}\n"], dependencies: [{ kind: "component", type: i1.Tree, selector: "p-tree", inputs: ["layout", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loadingIcon", "emptyMessage", "filterBy", "filterMode", "indentation", "trackBy", "selection", "value", "selectionMode", "style", "styleClass", "contextMenu", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "loading", "ariaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterPlaceholder", "filterLocale", "scrollHeight", "virtualScroll", "virtualNodeHeight", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onFilter"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: SignatureDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'signature-detail', providers: [ComponentContextService], template: "<div class=\"tree-signature\">\r\n    <p-tree [value]=\"model.dataSource\" [filter]=\"true\" [emptyMessage]=\"'Kh\u00F4ng c\u00F3 ch\u1EEF k\u00FD'\" styleClass=\"signature-tree\">\r\n    </p-tree>\r\n</div>", styles: [":host::ng-deep .signature-tree{width:100%;border:none}:host::ng-deep .signature-tree .ui-treenode-icon{padding-right:10px;color:#888}:host::ng-deep .signature-tree span.fas.fa-signature+span{font-weight:700}:host::ng-deep .signature-tree span.ui-treenode-icon.fas.fa-signature{color:#212529!important;padding-left:5px}:host::ng-deep .signature-tree span.ui-tree-toggler{color:#212529!important}\n"] }]

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

@@ -169,7 +169,7 @@ FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             multi: true
         },
         ComponentContextService
-    ], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], 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\" style=\"font-size: 2rem\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\" style=\"font-size: 2rem\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"onDownloadFile()\">\r\n        <span *ngIf=\"!showNoti\">{{selectedFileName}}</span>\r\n        <span *ngIf=\"showNoti\"> {{notification}} </span>\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\" [auto]=\"false\" class=\"file-upload\" mode=\"basic\"\r\n            [chooseLabel]=\"chooseLabel\" name=\"file[]\" [maxFileSize]=\"maxFileSize\" [accept]=\"accept\"\r\n            pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" multiple=\"single\"\r\n            [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\"\r\n            (onError)=\"handleError($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>", 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-left:12px;color:#109bf8;width:calc(100% - 110px)}::ng-deep .file-upload .fl-file-name>span{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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu", inputs: ["model", "global", "target", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "triggerEvent"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.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"] }] });
+    ], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], 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\" style=\"font-size: 2rem\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\" style=\"font-size: 2rem\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"onDownloadFile()\">\r\n        <span *ngIf=\"!showNoti\">{{selectedFileName}}</span>\r\n        <span *ngIf=\"showNoti\"> {{notification}} </span>\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\" [auto]=\"false\" class=\"file-upload\" mode=\"basic\"\r\n            [chooseLabel]=\"chooseLabel\" name=\"file[]\" [maxFileSize]=\"maxFileSize\" [accept]=\"accept\"\r\n            pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" multiple=\"single\"\r\n            [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\"\r\n            (onError)=\"handleError($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>", 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-left:12px;color:#109bf8;width:calc(100% - 110px)}::ng-deep .file-upload .fl-file-name>span{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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-upload', providers: [

package/esm2020/components/image-uploader/image-uploader.component.mjs

@@ -225,7 +225,7 @@ ImageUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => ImageUploaderComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "templateItemsUploadCustom", first: true, predicate: ["items"], descendants: true }, { propertyName: "templateItemUploadCustom", first: true, predicate: ["item"], descendants: true }], viewQueries: [{ propertyName: "imageViewer", first: true, predicate: ["imageViewer"], descendants: true, static: true }, { propertyName: "fileControl", first: true, predicate: FileUpload, descendants: true }, { propertyName: "templateItemsUploadDefault", first: true, predicate: ["templateItemsUploadDefault"], descendants: true, static: true }, { propertyName: "templateItemUploadDefault", first: true, predicate: ["templateItemUploadDefault"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"templateItemsUpload; context: {$implicit: lstFileUploaded, funcDelete: deleteAvatar}\">\r\n</ng-container>\r\n<ng-template #templateItemsUploadDefault let-files let-funcDelete=\"funcDelete\">\r\n    <div class=\"file-uploader\" [class.avatar]=\"isAvatar\">\r\n        <ng-container *ngFor=\"let item of files\">\r\n            <ng-container *ngTemplateOutlet=\"templateItemUpload; context: {$implicit: item, funcDelete: funcDelete}\">\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"multiple || !files.length\" class=\"image-container\">\r\n            <img [src]=\"defaultNoImageUrl\" />\r\n            <div *ngIf=\"!disabled\" class=\"image-container-button btn-upload\" (click)=\"onSelectThumbnailClick()\">\r\n                <span><i class=\"fas fa-cloud-upload-alt\"></i>{{chooseLabel}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #templateItemUploadDefault let-item let-funcDelete=\"funcDelete\">\r\n    <div class=\"image-container\">\r\n        <img (error)=\"onError($event)\" [src]=\"item.url\" (click)=\"showImageViewer(item.url)\" />\r\n        <div *ngIf=\"!disabled\" class=\"image-container-button btn-delete\" (click)=\"deleteAvatar(item)\">\r\n            <span><i class=\"pi pi-trash\"></i>X\u00F3a</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<div *ngIf=\"!disabled\" style=\"display:none;\">\r\n    <p-fileUpload #fileControl [multiple]=\"false\" [accept]=\"accept\" [chooseLabel]=\"chooseLabel\" mode=\"basic\" name=\"file\"\r\n        [url]=\"apiUploadUrl\" maxFileSize=\"10000000\" auto=\"true\" (onBeforeUpload)=\"onBeforeUpload($event)\"\r\n        (onUpload)=\"onUploadEvent($event)\"></p-fileUpload>\r\n</div>\r\n<div #imageViewer class=\"image-viewer image-viewer-1sux912\" [class.show]=\"showImage\">\r\n    <div class=\"mask\" (click)=\"showImage = false\"></div>\r\n    <div class=\"action\" (click)=\"showImage = false\">\r\n        <button type=\"button\" pButton icon=\"pi pi-times\" class=\"p-button-text p-button-rounded\"></button>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div>\r\n            <img [src]=\"currentSrc\" />\r\n        </div>\r\n    </div>\r\n    <div class=\"gallery\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\r\n            <div class=\"gallery-content\">\r\n                <div *ngFor=\"let item of lstFileUploaded\" class=\"image-container\">\r\n                    <img (error)=\"onError($event)\" [src]=\"item.url\" (click)=\"currentSrc = item.url\" />\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>", styles: [".file-uploader{display:flex;flex-wrap:wrap;margin-top:-.5rem}.file-uploader .image-container{width:150px;height:150px;margin-top:.5rem;margin-right:.5rem}.file-uploader .image-container img{max-width:100%;max-height:100%;cursor:pointer}.file-uploader .image-container.small{width:150px;height:150px}.file-uploader .image-container.large,.file-uploader .image-container.huge{width:250px;height:250px}.file-uploader .image-container.fit{width:100%;height:100%}.file-uploader .image-container .image-container-button{display:flex;align-items:center;justify-content:center;position:absolute;left:0;bottom:0;width:100%;height:30px;opacity:.5;background:#000;color:#fff;cursor:pointer}.file-uploader .image-container .image-container-button i{margin-right:6px}.file-uploader .image-container .image-container-button.btn-delete{color:red}.file-uploader.avatar{margin-top:0;display:block}.file-uploader.avatar .image-container{margin:0}.image-container{position:relative;border:1px solid #eee;display:inline-flex;text-align:center;vertical-align:top;justify-content:center;align-items:center}.image-container img{max-width:100%;max-height:100%;cursor:pointer}.image-viewer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.7490196078);flex-direction:column}.image-viewer .mask{position:absolute;z-index:10000;width:100%;height:100%}.image-viewer .action{flex:0 0 auto;text-align:right;padding:1rem;color:#fff;z-index:10002}.image-viewer .action button{font-size:1.4rem;color:#fff}.image-viewer .content{flex:1 1;position:relative}.image-viewer .content>div{position:absolute;width:100%;height:100%;padding:1rem;display:flex;align-items:center;justify-content:center}.image-viewer .content>div img{max-width:100%;max-height:100%;z-index:10001}.image-viewer .gallery{height:102px;overflow:hidden;z-index:10002}.image-viewer .gallery .gallery-content{white-space:nowrap;text-align:center}.image-viewer .gallery .gallery-content .image-container{width:100px;height:100px;flex:0 0 100px;border:1px solid #565656;margin:0 .5rem}.image-viewer.show{display:flex}::ng-deep .image-viewer-1sux912 .action button .pi{font-size:1.4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6.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: i7.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }] });
+    ], queries: [{ propertyName: "templateItemsUploadCustom", first: true, predicate: ["items"], descendants: true }, { propertyName: "templateItemUploadCustom", first: true, predicate: ["item"], descendants: true }], viewQueries: [{ propertyName: "imageViewer", first: true, predicate: ["imageViewer"], descendants: true, static: true }, { propertyName: "fileControl", first: true, predicate: FileUpload, descendants: true }, { propertyName: "templateItemsUploadDefault", first: true, predicate: ["templateItemsUploadDefault"], descendants: true, static: true }, { propertyName: "templateItemUploadDefault", first: true, predicate: ["templateItemUploadDefault"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"templateItemsUpload; context: {$implicit: lstFileUploaded, funcDelete: deleteAvatar}\">\r\n</ng-container>\r\n<ng-template #templateItemsUploadDefault let-files let-funcDelete=\"funcDelete\">\r\n    <div class=\"file-uploader\" [class.avatar]=\"isAvatar\">\r\n        <ng-container *ngFor=\"let item of files\">\r\n            <ng-container *ngTemplateOutlet=\"templateItemUpload; context: {$implicit: item, funcDelete: funcDelete}\">\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"multiple || !files.length\" class=\"image-container\">\r\n            <img [src]=\"defaultNoImageUrl\" />\r\n            <div *ngIf=\"!disabled\" class=\"image-container-button btn-upload\" (click)=\"onSelectThumbnailClick()\">\r\n                <span><i class=\"fas fa-cloud-upload-alt\"></i>{{chooseLabel}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #templateItemUploadDefault let-item let-funcDelete=\"funcDelete\">\r\n    <div class=\"image-container\">\r\n        <img (error)=\"onError($event)\" [src]=\"item.url\" (click)=\"showImageViewer(item.url)\" />\r\n        <div *ngIf=\"!disabled\" class=\"image-container-button btn-delete\" (click)=\"deleteAvatar(item)\">\r\n            <span><i class=\"pi pi-trash\"></i>X\u00F3a</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<div *ngIf=\"!disabled\" style=\"display:none;\">\r\n    <p-fileUpload #fileControl [multiple]=\"false\" [accept]=\"accept\" [chooseLabel]=\"chooseLabel\" mode=\"basic\" name=\"file\"\r\n        [url]=\"apiUploadUrl\" maxFileSize=\"10000000\" auto=\"true\" (onBeforeUpload)=\"onBeforeUpload($event)\"\r\n        (onUpload)=\"onUploadEvent($event)\"></p-fileUpload>\r\n</div>\r\n<div #imageViewer class=\"image-viewer image-viewer-1sux912\" [class.show]=\"showImage\">\r\n    <div class=\"mask\" (click)=\"showImage = false\"></div>\r\n    <div class=\"action\" (click)=\"showImage = false\">\r\n        <button type=\"button\" pButton icon=\"pi pi-times\" class=\"p-button-text p-button-rounded\"></button>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div>\r\n            <img [src]=\"currentSrc\" />\r\n        </div>\r\n    </div>\r\n    <div class=\"gallery\">\r\n        <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\r\n            <div class=\"gallery-content\">\r\n                <div *ngFor=\"let item of lstFileUploaded\" class=\"image-container\">\r\n                    <img (error)=\"onError($event)\" [src]=\"item.url\" (click)=\"currentSrc = item.url\" />\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</div>", styles: [".file-uploader{display:flex;flex-wrap:wrap;margin-top:-.5rem}.file-uploader .image-container{width:150px;height:150px;margin-top:.5rem;margin-right:.5rem}.file-uploader .image-container img{max-width:100%;max-height:100%;cursor:pointer}.file-uploader .image-container.small{width:150px;height:150px}.file-uploader .image-container.large,.file-uploader .image-container.huge{width:250px;height:250px}.file-uploader .image-container.fit{width:100%;height:100%}.file-uploader .image-container .image-container-button{display:flex;align-items:center;justify-content:center;position:absolute;left:0;bottom:0;width:100%;height:30px;opacity:.5;background:#000;color:#fff;cursor:pointer}.file-uploader .image-container .image-container-button i{margin-right:6px}.file-uploader .image-container .image-container-button.btn-delete{color:red}.file-uploader.avatar{margin-top:0;display:block}.file-uploader.avatar .image-container{margin:0}.image-container{position:relative;border:1px solid #eee;display:inline-flex;text-align:center;vertical-align:top;justify-content:center;align-items:center}.image-container img{max-width:100%;max-height:100%;cursor:pointer}.image-viewer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.7490196078);flex-direction:column}.image-viewer .mask{position:absolute;z-index:10000;width:100%;height:100%}.image-viewer .action{flex:0 0 auto;text-align:right;padding:1rem;color:#fff;z-index:10002}.image-viewer .action button{font-size:1.4rem;color:#fff}.image-viewer .content{flex:1 1;position:relative}.image-viewer .content>div{position:absolute;width:100%;height:100%;padding:1rem;display:flex;align-items:center;justify-content:center}.image-viewer .content>div img{max-width:100%;max-height:100%;z-index:10001}.image-viewer .gallery{height:102px;overflow:hidden;z-index:10002}.image-viewer .gallery .gallery-content{white-space:nowrap;text-align:center}.image-viewer .gallery .gallery-content .image-container{width:100px;height:100px;flex:0 0 100px;border:1px solid #565656;margin:0 .5rem}.image-viewer.show{display:flex}::ng-deep .image-viewer-1sux912 .action button .pi{font-size:1.4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i6.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: i7.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ImageUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-image-uploader', providers: [

package/esm2020/components/paging-next-back-only/paging-next-back-only.component.mjs

@@ -88,7 +88,7 @@ export class PagingNextBackOnlyComponent {
     }
 }
 PagingNextBackOnlyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PagingNextBackOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PagingNextBackOnlyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: { model: "model", setting: "setting", ngClass: "ngClass" }, outputs: { onNext: "onNext", onPrev: "onPrev", onLatest: "onLatest", onRefresh: "onRefresh", onOldest: "onOldest", onChangeLimitPage: "onChangeLimitPage", onChanged: "onChanged" }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"paging-container\" [ngClass]=\"ngClass\">\r\n    <div class=\"paging-info\">\r\n        <ng-container>\r\n            <div *ngIf=\"getFirstIndex()<=model.total && !setting.hiddenTextPage\" #targetOverlay\r\n                class=\"paging-item paging-info-detail\" (click)=\"op.toggle($event)\">\r\n                {{getFirstIndex()}} -\r\n                {{getLastIndex()}}\r\n                trong {{model.total}}\r\n            </div>\r\n            <div *ngIf=\"(getFirstIndex()>model.total || model.total == 0) && !setting.hiddenTextPage\"\r\n                class=\"paging-item paging-info-detail\">\r\n                Kh\u00F4ng t\u00ECm th\u1EA5y d\u1EEF li\u1EC7u\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goPrev($event)\"\r\n                style=\"margin-right: 5px;\" pTooltip=\"{{'Trang tr\u01B0\u1EDBc' | translate}}\" tooltipPosition=\"top\"\r\n                [class.disabled]=\"isFirst()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isFirst()?'-1':''}}\"><i class=\"pi pi-chevron-left\"></i></a>\r\n            </div>\r\n            <div class=\"block-page-size\">\r\n                <tn-mask [maskType]=\"'int'\" [min]=\"1\" [max]=\"1000\" [disabled]=\"model.loading ? true : null\"\r\n                    [(ngModel)]=\"setting.pageSetting.pageSize\" (onChanged)=\"saveChangeHandle()\"\r\n                    (keyup.enter)=\"saveChangeHandle()\">\r\n                </tn-mask>\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goNext($event)\"\r\n                style=\"margin-left: 5px;\" pTooltip=\"{{'Trang sau' | translate}}\" tooltipPosition=\"left\"\r\n                [class.disabled]=\"isLast()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isLast()?'-1':''}}\"><i class=\"pi pi-chevron-right\"></i></a>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<p-overlayPanel #op [styleClass]=\"'paging-advance-overlay'\" [appendTo]=\"'body'\"\r\n    (onShow)=\"handleOverlayShow($event, targetOverlay)\">\r\n    <ul class=\"paging-advance\">\r\n        <li [class.disabled]=\"isFirst()\" (click)=\"goLatest($event)\">Trang \u0111\u1EA7u ti\u00EAn</li>\r\n        <li [class.disabled]=\"isLast()\" (click)=\"goOldest($event)\">Trang cu\u1ED1i c\u00F9ng</li>\r\n    </ul>\r\n</p-overlayPanel>", styles: [".paging-item a{color:#495057}.paging-item:hover{cursor:pointer}.paging-item:hover a{color:#333}.paging-item.disabled a{color:#bdbdbd}.paging-info-detail{padding:2px .5rem 0;text-align:center;line-height:30px;border-radius:7px;min-width:100px;font-size:.9em}.paging-item.text{line-height:32px;border-radius:50%;width:32px;height:32px;text-align:center;position:relative;display:inline-block;transform:perspective(1px);overflow:hidden}.paging-item.text:before{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;background:#e6e6e6;z-index:-1;transform:scale(0);transition:all cubic-bezier(.4,.34,.01,.97) .3s;border-radius:50%}.paging-item.text:hover:before{transform:scale(1)}.paging-item.text>a{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.paging-info-detail{border-radius:5px;position:relative;display:inline-block;transform:perspective(1px);overflow:hidden}.paging-info-detail:before{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;background:#e6e6e6;z-index:-1;transform:scale(0);transition:all cubic-bezier(.4,.34,.01,.97) .3s;border-radius:5px}.paging-info-detail:hover:before{transform:scale(1)}.paging-item.disabled:hover:before{content:none}.paging-item.disabled:hover{background-color:#fff;cursor:default}.paging-item.disabled:hover a{cursor:default}.paging-info{display:flex;justify-content:flex-end;align-items:center}.item-setting{font-size:18px}.item-setting a{color:#555}.item-setting a:hover{color:#333}.paging-advance{list-style:none;padding-left:0;margin:3px 0}.paging-advance li{width:150px;padding-left:15px;line-height:30px}.paging-advance li.disabled{color:#bdbdbd;outline:none}.paging-advance li.disabled:hover{cursor:default;background:none}.paging-advance li:hover{cursor:pointer;background:#e6e6e6}::ng-deep .paging-advance-overlay{margin-left:30px}::ng-deep .paging-advance-overlay .p-overlaypanel-content{padding:0}::ng-deep paging-next-back-only .block-page-size{display:inline-block;width:60px}::ng-deep paging-next-back-only .block-page-size .p-inputtext{width:100%;text-align:center;padding-left:5px;padding-right:5px}::ng-deep paging-next-back-only .tn-mask-disabled{padding:5px;border:1px solid #ddd;border-radius:4px;display:flex;justify-content:center;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i5.MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass", "autoFormat"], outputs: ["onInit", "onFocus", "onBlur", "onChanged"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+PagingNextBackOnlyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PagingNextBackOnlyComponent, selector: "paging-next-back-only", inputs: { model: "model", setting: "setting", ngClass: "ngClass" }, outputs: { onNext: "onNext", onPrev: "onPrev", onLatest: "onLatest", onRefresh: "onRefresh", onOldest: "onOldest", onChangeLimitPage: "onChangeLimitPage", onChanged: "onChanged" }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"paging-container\" [ngClass]=\"ngClass\">\r\n    <div class=\"paging-info\">\r\n        <ng-container>\r\n            <div *ngIf=\"getFirstIndex()<=model.total && !setting.hiddenTextPage\" #targetOverlay\r\n                class=\"paging-item paging-info-detail\" (click)=\"op.toggle($event)\">\r\n                {{getFirstIndex()}} -\r\n                {{getLastIndex()}}\r\n                trong {{model.total}}\r\n            </div>\r\n            <div *ngIf=\"(getFirstIndex()>model.total || model.total == 0) && !setting.hiddenTextPage\"\r\n                class=\"paging-item paging-info-detail\">\r\n                Kh\u00F4ng t\u00ECm th\u1EA5y d\u1EEF li\u1EC7u\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goPrev($event)\"\r\n                style=\"margin-right: 5px;\" pTooltip=\"{{'Trang tr\u01B0\u1EDBc' | translate}}\" tooltipPosition=\"top\"\r\n                [class.disabled]=\"isFirst()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isFirst()?'-1':''}}\"><i class=\"pi pi-chevron-left\"></i></a>\r\n            </div>\r\n            <div class=\"block-page-size\">\r\n                <tn-mask [maskType]=\"'int'\" [min]=\"1\" [max]=\"1000\" [disabled]=\"model.loading ? true : null\"\r\n                    [(ngModel)]=\"setting.pageSetting.pageSize\" (onChanged)=\"saveChangeHandle()\"\r\n                    (keyup.enter)=\"saveChangeHandle()\">\r\n                </tn-mask>\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goNext($event)\"\r\n                style=\"margin-left: 5px;\" pTooltip=\"{{'Trang sau' | translate}}\" tooltipPosition=\"left\"\r\n                [class.disabled]=\"isLast()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isLast()?'-1':''}}\"><i class=\"pi pi-chevron-right\"></i></a>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<p-overlayPanel #op [styleClass]=\"'paging-advance-overlay'\" [appendTo]=\"'body'\"\r\n    (onShow)=\"handleOverlayShow($event, targetOverlay)\">\r\n    <ul class=\"paging-advance\">\r\n        <li [class.disabled]=\"isFirst()\" (click)=\"goLatest($event)\">Trang \u0111\u1EA7u ti\u00EAn</li>\r\n        <li [class.disabled]=\"isLast()\" (click)=\"goOldest($event)\">Trang cu\u1ED1i c\u00F9ng</li>\r\n    </ul>\r\n</p-overlayPanel>", styles: [".paging-item a{color:#495057}.paging-item:hover{cursor:pointer}.paging-item:hover a{color:#333}.paging-item.disabled a{color:#bdbdbd}.paging-info-detail{padding:2px .5rem 0;text-align:center;line-height:30px;border-radius:7px;min-width:100px;font-size:.9em}.paging-item.text{line-height:32px;border-radius:50%;width:32px;height:32px;text-align:center;position:relative;display:inline-block;transform:perspective(1px);overflow:hidden}.paging-item.text:before{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;background:#e6e6e6;z-index:-1;transform:scale(0);transition:all cubic-bezier(.4,.34,.01,.97) .3s;border-radius:50%}.paging-item.text:hover:before{transform:scale(1)}.paging-item.text>a{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.paging-info-detail{border-radius:5px;position:relative;display:inline-block;transform:perspective(1px);overflow:hidden}.paging-info-detail:before{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;background:#e6e6e6;z-index:-1;transform:scale(0);transition:all cubic-bezier(.4,.34,.01,.97) .3s;border-radius:5px}.paging-info-detail:hover:before{transform:scale(1)}.paging-item.disabled:hover:before{content:none}.paging-item.disabled:hover{background-color:#fff;cursor:default}.paging-item.disabled:hover a{cursor:default}.paging-info{display:flex;justify-content:flex-end;align-items:center}.item-setting{font-size:18px}.item-setting a{color:#555}.item-setting a:hover{color:#333}.paging-advance{list-style:none;padding-left:0;margin:3px 0}.paging-advance li{width:150px;padding-left:15px;line-height:30px}.paging-advance li.disabled{color:#bdbdbd;outline:none}.paging-advance li.disabled:hover{cursor:default;background:none}.paging-advance li:hover{cursor:pointer;background:#e6e6e6}::ng-deep .paging-advance-overlay{margin-left:30px}::ng-deep .paging-advance-overlay .p-overlaypanel-content{padding:0}::ng-deep paging-next-back-only .block-page-size{display:inline-block;width:60px}::ng-deep paging-next-back-only .block-page-size .p-inputtext{width:100%;text-align:center;padding-left:5px;padding-right:5px}::ng-deep paging-next-back-only .tn-mask-disabled{padding:5px;border:1px solid #ddd;border-radius:4px;display:flex;justify-content:center;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "autoZIndex", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "showCloseIcon", "style", "styleClass", "appendTo", "ariaCloseLabel"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i5.MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass", "autoFormat"], outputs: ["onInit", "onFocus", "onBlur", "onChanged"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PagingNextBackOnlyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'paging-next-back-only', template: "<div class=\"paging-container\" [ngClass]=\"ngClass\">\r\n    <div class=\"paging-info\">\r\n        <ng-container>\r\n            <div *ngIf=\"getFirstIndex()<=model.total && !setting.hiddenTextPage\" #targetOverlay\r\n                class=\"paging-item paging-info-detail\" (click)=\"op.toggle($event)\">\r\n                {{getFirstIndex()}} -\r\n                {{getLastIndex()}}\r\n                trong {{model.total}}\r\n            </div>\r\n            <div *ngIf=\"(getFirstIndex()>model.total || model.total == 0) && !setting.hiddenTextPage\"\r\n                class=\"paging-item paging-info-detail\">\r\n                Kh\u00F4ng t\u00ECm th\u1EA5y d\u1EEF li\u1EC7u\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goPrev($event)\"\r\n                style=\"margin-right: 5px;\" pTooltip=\"{{'Trang tr\u01B0\u1EDBc' | translate}}\" tooltipPosition=\"top\"\r\n                [class.disabled]=\"isFirst()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isFirst()?'-1':''}}\"><i class=\"pi pi-chevron-left\"></i></a>\r\n            </div>\r\n            <div class=\"block-page-size\">\r\n                <tn-mask [maskType]=\"'int'\" [min]=\"1\" [max]=\"1000\" [disabled]=\"model.loading ? true : null\"\r\n                    [(ngModel)]=\"setting.pageSetting.pageSize\" (onChanged)=\"saveChangeHandle()\"\r\n                    (keyup.enter)=\"saveChangeHandle()\">\r\n                </tn-mask>\r\n            </div>\r\n            <div class=\"paging-item text\" [class.disabled]=\"model.loading\" (click)=\"goNext($event)\"\r\n                style=\"margin-left: 5px;\" pTooltip=\"{{'Trang sau' | translate}}\" tooltipPosition=\"left\"\r\n                [class.disabled]=\"isLast()\">\r\n                <a href=\"javascript:\" tabindex=\"{{isLast()?'-1':''}}\"><i class=\"pi pi-chevron-right\"></i></a>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<p-overlayPanel #op [styleClass]=\"'paging-advance-overlay'\" [appendTo]=\"'body'\"\r\n    (onShow)=\"handleOverlayShow($event, targetOverlay)\">\r\n    <ul class=\"paging-advance\">\r\n        <li [class.disabled]=\"isFirst()\" (click)=\"goLatest($event)\">Trang \u0111\u1EA7u ti\u00EAn</li>\r\n        <li [class.disabled]=\"isLast()\" (click)=\"goOldest($event)\">Trang cu\u1ED1i c\u00F9ng</li>\r\n    </ul>\r\n</p-overlayPanel>", styles: [".paging-item a{color:#495057}.paging-item:hover{cursor:pointer}.paging-item:hover a{color:#333}.paging-item.disabled a{color:#bdbdbd}.paging-info-detail{padding:2px .5rem 0;text-align:center;line-height:30px;border-radius:7px;min-width:100px;font-size:.9em}.paging-item.text{line-height:32px;border-radius:50%;width:32px;height:32px;text-align:center;position:relative;display:inline-block;transform:perspective(1px);overflow:hidden}.paging-item.text:before{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;background:#e6e6e6;z-index:-1;transform:scale(0);transition:all cubic-bezier(.4,.34,.01,.97) .3s;border-radius:50%}.paging-item.text:hover:before{transform:scale(1)}.paging-item.text>a{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.paging-info-detail{border-radius:5px;position:relative;display:inline-block;transform:perspective(1px);overflow:hidden}.paging-info-detail:before{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;background:#e6e6e6;z-index:-1;transform:scale(0);transition:all cubic-bezier(.4,.34,.01,.97) .3s;border-radius:5px}.paging-info-detail:hover:before{transform:scale(1)}.paging-item.disabled:hover:before{content:none}.paging-item.disabled:hover{background-color:#fff;cursor:default}.paging-item.disabled:hover a{cursor:default}.paging-info{display:flex;justify-content:flex-end;align-items:center}.item-setting{font-size:18px}.item-setting a{color:#555}.item-setting a:hover{color:#333}.paging-advance{list-style:none;padding-left:0;margin:3px 0}.paging-advance li{width:150px;padding-left:15px;line-height:30px}.paging-advance li.disabled{color:#bdbdbd;outline:none}.paging-advance li.disabled:hover{cursor:default;background:none}.paging-advance li:hover{cursor:pointer;background:#e6e6e6}::ng-deep .paging-advance-overlay{margin-left:30px}::ng-deep .paging-advance-overlay .p-overlaypanel-content{padding:0}::ng-deep paging-next-back-only .block-page-size{display:inline-block;width:60px}::ng-deep paging-next-back-only .block-page-size .p-inputtext{width:100%;text-align:center;padding-left:5px;padding-right:5px}::ng-deep paging-next-back-only .tn-mask-disabled{padding:5px;border:1px solid #ddd;border-radius:4px;display:flex;justify-content:center;line-height:20px}\n"] }]

package/esm2020/components/permission-utils/permission-utils.component.mjs

@@ -88,7 +88,7 @@ export class PermissionUtilsComponent extends ComponentBase {
     }
 }
 PermissionUtilsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PermissionUtilsComponent, deps: [{ token: i0.Injector }, { token: i1.NotifierService }, { token: i2.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-PermissionUtilsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PermissionUtilsComponent, selector: "permission-utils", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog styleClass=\"entity-picker-dialog no-padding\" [useDefaultScrollBar]=\"true\"\r\n  [header]=\"title | translate\" [popupSize]=\"popupSize\" styleClass=\"entity-picker-dialog\" (onHide)=\"cancel()\"\r\n  (visibleChange)=\"visibleChanged($event)\">\r\n  <textarea style=\"width:100%\" rows=\"20\" [(ngModel)]=\"basePermissionText\"></textarea>\r\n  <p-table [value]=\"dataSource\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th style=\"width:10%\">Ph\u01B0\u01A1ng th\u1EE9c</th>\r\n        <th>Url</th>\r\n        <th style=\"width:40%\">Quy\u1EC1n c\u01A1 b\u1EA3n</th>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n      <tr>\r\n        <td>{{rowData.method}}</td>\r\n        <td>{{rowData.url}}</td>\r\n        <td>{{rowData.basePermission}}</td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <ng-template #footer>\r\n    <button pButton class=\"ui-button-secondary\" type=\"button\" (click)=\"cancel()\" [label]=\"'\u0110\u00F3ng' | translate\"\r\n      icon=\"fas fa-check\"></button>\r\n  </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5.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: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i8.TranslatePipe, name: "translate" }] });
+PermissionUtilsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: PermissionUtilsComponent, selector: "permission-utils", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<tn-dialog #dialog styleClass=\"entity-picker-dialog no-padding\" [useDefaultScrollBar]=\"true\"\r\n  [header]=\"title | translate\" [popupSize]=\"popupSize\" styleClass=\"entity-picker-dialog\" (onHide)=\"cancel()\"\r\n  (visibleChange)=\"visibleChanged($event)\">\r\n  <textarea style=\"width:100%\" rows=\"20\" [(ngModel)]=\"basePermissionText\"></textarea>\r\n  <p-table [value]=\"dataSource\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th style=\"width:10%\">Ph\u01B0\u01A1ng th\u1EE9c</th>\r\n        <th>Url</th>\r\n        <th style=\"width:40%\">Quy\u1EC1n c\u01A1 b\u1EA3n</th>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n      <tr>\r\n        <td>{{rowData.method}}</td>\r\n        <td>{{rowData.url}}</td>\r\n        <td>{{rowData.basePermission}}</td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <ng-template #footer>\r\n    <button pButton class=\"ui-button-secondary\" type=\"button\" (click)=\"cancel()\" [label]=\"'\u0110\u00F3ng' | translate\"\r\n      icon=\"fas fa-check\"></button>\r\n  </ng-template>\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i5.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: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i8.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PermissionUtilsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'permission-utils', providers: [ComponentContextService], template: "<tn-dialog #dialog styleClass=\"entity-picker-dialog no-padding\" [useDefaultScrollBar]=\"true\"\r\n  [header]=\"title | translate\" [popupSize]=\"popupSize\" styleClass=\"entity-picker-dialog\" (onHide)=\"cancel()\"\r\n  (visibleChange)=\"visibleChanged($event)\">\r\n  <textarea style=\"width:100%\" rows=\"20\" [(ngModel)]=\"basePermissionText\"></textarea>\r\n  <p-table [value]=\"dataSource\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th style=\"width:10%\">Ph\u01B0\u01A1ng th\u1EE9c</th>\r\n        <th>Url</th>\r\n        <th style=\"width:40%\">Quy\u1EC1n c\u01A1 b\u1EA3n</th>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n      <tr>\r\n        <td>{{rowData.method}}</td>\r\n        <td>{{rowData.url}}</td>\r\n        <td>{{rowData.basePermission}}</td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <ng-template #footer>\r\n    <button pButton class=\"ui-button-secondary\" type=\"button\" (click)=\"cancel()\" [label]=\"'\u0110\u00F3ng' | translate\"\r\n      icon=\"fas fa-check\"></button>\r\n  </ng-template>\r\n</tn-dialog>" }]

package/esm2020/components/qr-code-generator/qr-code-generator.component.mjs

@@ -34,7 +34,7 @@ export class QrCodeGeneratorComponent {
     }
 }
 QrCodeGeneratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QrCodeGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-QrCodeGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QrCodeGeneratorComponent, selector: "app-qr-code-generator", inputs: { width: "width", data: "data" }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"qr-code-generator\" [style.width.px]=\"width\" [style.height.px]=\"width\">\r\n    <canvas #canvasElement width=\"100%\" height=\"100%\"></canvas>\r\n    <div class=\"mask\">\r\n        <span class=\"icon-download fa fa-download\" pTooltip=\"B\u1EA5m \u0111\u1EC3 t\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n            (click)=\"download()\"></span>\r\n    </div>\r\n</div>", styles: [".qr-code-generator{position:relative}.qr-code-generator .mask{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(128,128,128,.8392156863);border-radius:3px}.qr-code-generator .mask .icon-download{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;color:#00ff2b;font-size:2rem}.qr-code-generator:hover .mask{display:initial}\n"], dependencies: [{ kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+QrCodeGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QrCodeGeneratorComponent, selector: "app-qr-code-generator", inputs: { width: "width", data: "data" }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"qr-code-generator\" [style.width.px]=\"width\" [style.height.px]=\"width\">\r\n    <canvas #canvasElement width=\"100%\" height=\"100%\"></canvas>\r\n    <div class=\"mask\">\r\n        <span class=\"icon-download fa fa-download\" pTooltip=\"B\u1EA5m \u0111\u1EC3 t\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n            (click)=\"download()\"></span>\r\n    </div>\r\n</div>", styles: [".qr-code-generator{position:relative}.qr-code-generator .mask{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(128,128,128,.8392156863);border-radius:3px}.qr-code-generator .mask .icon-download{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;color:#00ff2b;font-size:2rem}.qr-code-generator:hover .mask{display:initial}\n"], dependencies: [{ kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QrCodeGeneratorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-qr-code-generator', template: "<div class=\"qr-code-generator\" [style.width.px]=\"width\" [style.height.px]=\"width\">\r\n    <canvas #canvasElement width=\"100%\" height=\"100%\"></canvas>\r\n    <div class=\"mask\">\r\n        <span class=\"icon-download fa fa-download\" pTooltip=\"B\u1EA5m \u0111\u1EC3 t\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n            (click)=\"download()\"></span>\r\n    </div>\r\n</div>", styles: [".qr-code-generator{position:relative}.qr-code-generator .mask{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(128,128,128,.8392156863);border-radius:3px}.qr-code-generator .mask .icon-download{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;color:#00ff2b;font-size:2rem}.qr-code-generator:hover .mask{display:initial}\n"] }]

package/esm2020/components/query-builders/query-builder/query-builder.component.mjs

@@ -298,7 +298,7 @@ export class QueryBuilderComponent {
     }
 }
 QueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QueryBuilderComponent, deps: [{ token: i1.DM_ChucVuService }, { token: i2.RoleService }, { token: i3.UserGroupRealService }], target: i0.ɵɵFactoryTarget.Component });
-QueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QueryBuilderComponent, selector: "query-builder", inputs: { searchSchema: "searchSchema", filters: "filters", style: "style", styleClass: "styleClass", useScrollBar: "useScrollBar", hiddenButtons: "hiddenButtons" }, outputs: { onSearch: "onSearch", onSave: "onSave", onDeleteSave: "onDeleteSave" }, ngImport: i0, template: "<tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [style]=\"style\">\r\n    <div [class]=\"styleClass\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\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<ng-template #content>\r\n    <query-builder-group [dataSourceFields]=\"_dataSourceFields\" [query]=\"query\" [isRoot]=\"true\">\r\n    </query-builder-group>\r\n</ng-template>\r\n<div *ngIf=\"!hiddenButtons\" class=\"footer-search\">\r\n    <div class=\"footer-search-buttons-group\">\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text p-button-success\"\r\n                [pTooltip]=\"'L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i' | translate\" tooltipPosition=\"top\" (click)=\"saveFilter()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n                [pTooltip]=\"'X\u00F3a b\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' | translate\" tooltipPosition=\"top\" (click)=\"deleteSave()\"></button>\r\n        </div>\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-search\" class=\"p-button-text p-button-info\"\r\n                [label]=\"'T\u00ECm ki\u1EBFm' | translate\" (click)=\"search()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-undo\" class=\"p-button-text p-button-secondary\"\r\n                [label]=\"'X\u00F3a t\u00ECm ki\u1EBFm' | translate\" (click)=\"clearFilter()\"></button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;padding:10px 20px 10px 10px;position:sticky;bottom:0}.footer-search-buttons-group{display:flex}.footer-search-buttons-group>div:first-child{flex:1 1;text-align:left}@media (max-width: 640px){.footer-search-buttons-group{white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: i8.QueryBuilderGroupComponent, selector: "query-builder-group", inputs: ["dataSourceFields", "operators", "controlValue", "query", "canRemove", "isRoot", "templateFieldPicker"], outputs: ["onRemove"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+QueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QueryBuilderComponent, selector: "query-builder", inputs: { searchSchema: "searchSchema", filters: "filters", style: "style", styleClass: "styleClass", useScrollBar: "useScrollBar", hiddenButtons: "hiddenButtons" }, outputs: { onSearch: "onSearch", onSave: "onSave", onDeleteSave: "onDeleteSave" }, ngImport: i0, template: "<tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [style]=\"style\">\r\n    <div [class]=\"styleClass\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\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<ng-template #content>\r\n    <query-builder-group [dataSourceFields]=\"_dataSourceFields\" [query]=\"query\" [isRoot]=\"true\">\r\n    </query-builder-group>\r\n</ng-template>\r\n<div *ngIf=\"!hiddenButtons\" class=\"footer-search\">\r\n    <div class=\"footer-search-buttons-group\">\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text p-button-success\"\r\n                [pTooltip]=\"'L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i' | translate\" tooltipPosition=\"top\" (click)=\"saveFilter()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n                [pTooltip]=\"'X\u00F3a b\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' | translate\" tooltipPosition=\"top\" (click)=\"deleteSave()\"></button>\r\n        </div>\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-search\" class=\"p-button-text p-button-info\"\r\n                [label]=\"'T\u00ECm ki\u1EBFm' | translate\" (click)=\"search()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-undo\" class=\"p-button-text p-button-secondary\"\r\n                [label]=\"'X\u00F3a t\u00ECm ki\u1EBFm' | translate\" (click)=\"clearFilter()\"></button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;padding:10px 20px 10px 10px;position:sticky;bottom:0}.footer-search-buttons-group{display:flex}.footer-search-buttons-group>div:first-child{flex:1 1;text-align:left}@media (max-width: 640px){.footer-search-buttons-group{white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i7.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: i8.QueryBuilderGroupComponent, selector: "query-builder-group", inputs: ["dataSourceFields", "operators", "controlValue", "query", "canRemove", "isRoot", "templateFieldPicker"], outputs: ["onRemove"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QueryBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'query-builder', template: "<tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [style]=\"style\">\r\n    <div [class]=\"styleClass\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\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<ng-template #content>\r\n    <query-builder-group [dataSourceFields]=\"_dataSourceFields\" [query]=\"query\" [isRoot]=\"true\">\r\n    </query-builder-group>\r\n</ng-template>\r\n<div *ngIf=\"!hiddenButtons\" class=\"footer-search\">\r\n    <div class=\"footer-search-buttons-group\">\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text p-button-success\"\r\n                [pTooltip]=\"'L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i' | translate\" tooltipPosition=\"top\" (click)=\"saveFilter()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n                [pTooltip]=\"'X\u00F3a b\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' | translate\" tooltipPosition=\"top\" (click)=\"deleteSave()\"></button>\r\n        </div>\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-search\" class=\"p-button-text p-button-info\"\r\n                [label]=\"'T\u00ECm ki\u1EBFm' | translate\" (click)=\"search()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-undo\" class=\"p-button-text p-button-secondary\"\r\n                [label]=\"'X\u00F3a t\u00ECm ki\u1EBFm' | translate\" (click)=\"clearFilter()\"></button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;padding:10px 20px 10px 10px;position:sticky;bottom:0}.footer-search-buttons-group{display:flex}.footer-search-buttons-group>div:first-child{flex:1 1;text-align:left}@media (max-width: 640px){.footer-search-buttons-group{white-space:nowrap}}\n"] }]

package/esm2020/components/query-builders/query-builder-group/query-builder-group.component.mjs

@@ -39,7 +39,7 @@ export class QueryBuilderGroupComponent {
     }
 }
 QueryBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QueryBuilderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-QueryBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QueryBuilderGroupComponent, selector: "query-builder-group", inputs: { dataSourceFields: "dataSourceFields", operators: "operators", controlValue: "controlValue", query: "query", canRemove: "canRemove", isRoot: "isRoot", templateFieldPicker: "templateFieldPicker" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"tn__group-or-rule-container group-container\">\r\n    <div class=\"tn__group-or-rule group\" [ngClass]=\"{'root-group': isRoot, 'and-logic': query.operator}\">\r\n        <div class=\"tn__group-header\">\r\n            <div class=\"tn__group-operator\">\r\n                <p-inputSwitch [(ngModel)]=\"query.operator\"></p-inputSwitch>\r\n                <span class=\"tn__group-operator-label\">\r\n                    <ng-container *ngIf=\"query.operator\">Th\u1ECFa m\u00E3n <a [routerLink]=\"\"\r\n                            (click)=\"query.operator = !query.operator\"><b>t\u1EA5t\r\n                                c\u1EA3</b></a>\r\n                        c\u00E1c \u0111i\u1EC1u ki\u1EC7n trong nh\u00F3m:</ng-container>\r\n                    <ng-container *ngIf=\"!query.operator\">Th\u1ECFa m\u00E3n <a [routerLink]=\"\"\r\n                            (click)=\"query.operator = !query.operator\"><b>m\u1ED9t\r\n                                trong</b></a> c\u00E1c \u0111i\u1EC1u ki\u1EC7n trong nh\u00F3m:</ng-container>\r\n                </span>\r\n            </div>\r\n            <div class=\"tn__group-action\">\r\n                <button type=\"button\" pButton icon=\"pi pi-plus-circle\" class=\"p-button-text p-button-rounded\"\r\n                    pTooltip=\"Th\u00EAm \u0111i\u1EC1u ki\u1EC7n\" tooltipPosition=\"top\" (click)=\"addNewRule()\"></button>\r\n                <button type=\"button\" pButton icon=\"pi pi-table\" class=\"p-button-text p-button-rounded\"\r\n                    pTooltip=\"Th\u00EAm nh\u00F3m\" tooltipPosition=\"top\" (click)=\"addNewGroup()\"></button>\r\n                <button type=\"button\" pButton icon=\"pi pi-trash\" [disabled]=\"!canRemove\"\r\n                    class=\"p-button-text p-button-danger p-button-rounded\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                    (click)=\"removeGroup()\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngFor=\"let q of query.queryArr\" class=\"tn__group-children\">\r\n            <query-builder-rule *ngIf=\"!q.isGroup()\" [dataSourceFields]=\"dataSourceFields\" [operators]=\"operators\"\r\n                [controlValue]=\"controlValue\" [templateFieldPicker]=\"templateFieldPicker\" [query]=\"q\"\r\n                (onRemove)=\"onChildRemove($event)\">\r\n            </query-builder-rule>\r\n            <query-builder-group *ngIf=\"q.isGroup()\" [dataSourceFields]=\"dataSourceFields\" [operators]=\"operators\"\r\n                [controlValue]=\"controlValue\" [templateFieldPicker]=\"templateFieldPicker\" [query]=\"q\" [canRemove]=\"true\"\r\n                (onRemove)=\"onChildRemove($event)\">\r\n            </query-builder-group>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["::ng-deep query-builder-group .tn__group-or-rule-container{margin-top:2px;margin-bottom:2px}::ng-deep query-builder-group .tn__group-or-rule-container:first-child{margin-top:0;margin-bottom:0}::ng-deep query-builder-group .tn__group-or-rule{border-radius:3px;position:relative}::ng-deep query-builder-group .tn__group-header{display:flex;align-items:center;margin-top:2px;margin-bottom:2px;padding:5px 5px 2px}::ng-deep query-builder-group .tn__group-header .p-selectbutton .p-button{height:26px}::ng-deep query-builder-group .tn__group-operator{width:70%;z-index:1}::ng-deep query-builder-group .tn__group-operator-label{margin-left:5px;vertical-align:bottom;line-height:26px}::ng-deep query-builder-group .tn__group-operator-label b{color:#495057}::ng-deep query-builder-group .tn__group-action{display:flex;margin-left:2px;flex:1;justify-content:flex-end;transition:opacity .2s}::ng-deep query-builder-group .tn__group-children{margin-top:2px;margin-bottom:2px;margin-right:-1px;padding-left:24px;position:relative}::ng-deep query-builder-group .tn__group-children:before,::ng-deep query-builder-group .tn__group-children:after{content:\"\";position:absolute;left:10px;width:14px;height:calc(50% + 13px);border-color:#ced4da;border-style:solid;box-sizing:border-box}::ng-deep query-builder-group .tn__group-children:before{top:-13px;border-width:0 0 2px 2px}::ng-deep query-builder-group .tn__group-children:after{top:50%;border-width:0 0 0 2px}::ng-deep query-builder-group .tn__group-children:last-child:after{display:none}::ng-deep query-builder-group .tn__group-or-rule.group{border:1px solid #8dd0ff;box-shadow:1px 3px 6px 4px #5d7a9e69;margin-top:5px;margin-bottom:5px;padding-bottom:5px;z-index:1}::ng-deep query-builder-group .tn__group-or-rule.group.root-group{border:none;padding:0 10px 10px;box-shadow:unset}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children:before,::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children:after{border-color:#2196f3}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-header .tn__group-operator b{color:#2196f3}::ng-deep query-builder-group .tn__group-or-rule.rule{flex:1;display:flex;background-color:#fff;border:1px solid transparent;padding:2px;margin-right:1px}@media (max-width: 640px){::ng-deep query-builder-group .tn__group-header{flex-direction:column;align-items:stretch;position:relative}::ng-deep query-builder-group .tn__group-header:before{content:\"\";display:block;position:absolute;width:2px;background-color:#ced4da;top:10px;bottom:4px;left:10px}::ng-deep query-builder-group .tn__group-header:last-of-type:before{display:none}::ng-deep query-builder-group .tn__group-operator{width:auto;display:flex}::ng-deep query-builder-group .tn__group-children{padding-bottom:5px}::ng-deep query-builder-group .tn__group-children:before,::ng-deep query-builder-group .tn__group-children:after{width:12px}::ng-deep query-builder-group .tn__group-children:before{top:-31px}::ng-deep query-builder-group .tn__group-children:after{top:calc(50% - 18px)}::ng-deep query-builder-group query-builder-rule{display:block;position:relative}::ng-deep query-builder-group query-builder-rule:before{content:\"\";position:absolute;width:2px;background-color:#ced4da;top:3px;bottom:34px;left:-4px;z-index:10}::ng-deep query-builder-group .tn__group-or-rule.rule{align-items:flex-end;flex-direction:column}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-header:before,::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children>query-builder-rule:before{background-color:#2196f3}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { 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: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i7.QueryBuilderRuleComponent, selector: "query-builder-rule", inputs: ["dataSourceFields", "operators", "controlValue", "query", "templateFieldPicker"], outputs: ["onRemove"] }, { kind: "component", type: QueryBuilderGroupComponent, selector: "query-builder-group", inputs: ["dataSourceFields", "operators", "controlValue", "query", "canRemove", "isRoot", "templateFieldPicker"], outputs: ["onRemove"] }] });
+QueryBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QueryBuilderGroupComponent, selector: "query-builder-group", inputs: { dataSourceFields: "dataSourceFields", operators: "operators", controlValue: "controlValue", query: "query", canRemove: "canRemove", isRoot: "isRoot", templateFieldPicker: "templateFieldPicker" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"tn__group-or-rule-container group-container\">\r\n    <div class=\"tn__group-or-rule group\" [ngClass]=\"{'root-group': isRoot, 'and-logic': query.operator}\">\r\n        <div class=\"tn__group-header\">\r\n            <div class=\"tn__group-operator\">\r\n                <p-inputSwitch [(ngModel)]=\"query.operator\"></p-inputSwitch>\r\n                <span class=\"tn__group-operator-label\">\r\n                    <ng-container *ngIf=\"query.operator\">Th\u1ECFa m\u00E3n <a [routerLink]=\"\"\r\n                            (click)=\"query.operator = !query.operator\"><b>t\u1EA5t\r\n                                c\u1EA3</b></a>\r\n                        c\u00E1c \u0111i\u1EC1u ki\u1EC7n trong nh\u00F3m:</ng-container>\r\n                    <ng-container *ngIf=\"!query.operator\">Th\u1ECFa m\u00E3n <a [routerLink]=\"\"\r\n                            (click)=\"query.operator = !query.operator\"><b>m\u1ED9t\r\n                                trong</b></a> c\u00E1c \u0111i\u1EC1u ki\u1EC7n trong nh\u00F3m:</ng-container>\r\n                </span>\r\n            </div>\r\n            <div class=\"tn__group-action\">\r\n                <button type=\"button\" pButton icon=\"pi pi-plus-circle\" class=\"p-button-text p-button-rounded\"\r\n                    pTooltip=\"Th\u00EAm \u0111i\u1EC1u ki\u1EC7n\" tooltipPosition=\"top\" (click)=\"addNewRule()\"></button>\r\n                <button type=\"button\" pButton icon=\"pi pi-table\" class=\"p-button-text p-button-rounded\"\r\n                    pTooltip=\"Th\u00EAm nh\u00F3m\" tooltipPosition=\"top\" (click)=\"addNewGroup()\"></button>\r\n                <button type=\"button\" pButton icon=\"pi pi-trash\" [disabled]=\"!canRemove\"\r\n                    class=\"p-button-text p-button-danger p-button-rounded\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                    (click)=\"removeGroup()\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngFor=\"let q of query.queryArr\" class=\"tn__group-children\">\r\n            <query-builder-rule *ngIf=\"!q.isGroup()\" [dataSourceFields]=\"dataSourceFields\" [operators]=\"operators\"\r\n                [controlValue]=\"controlValue\" [templateFieldPicker]=\"templateFieldPicker\" [query]=\"q\"\r\n                (onRemove)=\"onChildRemove($event)\">\r\n            </query-builder-rule>\r\n            <query-builder-group *ngIf=\"q.isGroup()\" [dataSourceFields]=\"dataSourceFields\" [operators]=\"operators\"\r\n                [controlValue]=\"controlValue\" [templateFieldPicker]=\"templateFieldPicker\" [query]=\"q\" [canRemove]=\"true\"\r\n                (onRemove)=\"onChildRemove($event)\">\r\n            </query-builder-group>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["::ng-deep query-builder-group .tn__group-or-rule-container{margin-top:2px;margin-bottom:2px}::ng-deep query-builder-group .tn__group-or-rule-container:first-child{margin-top:0;margin-bottom:0}::ng-deep query-builder-group .tn__group-or-rule{border-radius:3px;position:relative}::ng-deep query-builder-group .tn__group-header{display:flex;align-items:center;margin-top:2px;margin-bottom:2px;padding:5px 5px 2px}::ng-deep query-builder-group .tn__group-header .p-selectbutton .p-button{height:26px}::ng-deep query-builder-group .tn__group-operator{width:70%;z-index:1}::ng-deep query-builder-group .tn__group-operator-label{margin-left:5px;vertical-align:bottom;line-height:26px}::ng-deep query-builder-group .tn__group-operator-label b{color:#495057}::ng-deep query-builder-group .tn__group-action{display:flex;margin-left:2px;flex:1;justify-content:flex-end;transition:opacity .2s}::ng-deep query-builder-group .tn__group-children{margin-top:2px;margin-bottom:2px;margin-right:-1px;padding-left:24px;position:relative}::ng-deep query-builder-group .tn__group-children:before,::ng-deep query-builder-group .tn__group-children:after{content:\"\";position:absolute;left:10px;width:14px;height:calc(50% + 13px);border-color:#ced4da;border-style:solid;box-sizing:border-box}::ng-deep query-builder-group .tn__group-children:before{top:-13px;border-width:0 0 2px 2px}::ng-deep query-builder-group .tn__group-children:after{top:50%;border-width:0 0 0 2px}::ng-deep query-builder-group .tn__group-children:last-child:after{display:none}::ng-deep query-builder-group .tn__group-or-rule.group{border:1px solid #8dd0ff;box-shadow:1px 3px 6px 4px #5d7a9e69;margin-top:5px;margin-bottom:5px;padding-bottom:5px;z-index:1}::ng-deep query-builder-group .tn__group-or-rule.group.root-group{border:none;padding:0 10px 10px;box-shadow:unset}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children:before,::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children:after{border-color:#2196f3}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-header .tn__group-operator b{color:#2196f3}::ng-deep query-builder-group .tn__group-or-rule.rule{flex:1;display:flex;background-color:#fff;border:1px solid transparent;padding:2px;margin-right:1px}@media (max-width: 640px){::ng-deep query-builder-group .tn__group-header{flex-direction:column;align-items:stretch;position:relative}::ng-deep query-builder-group .tn__group-header:before{content:\"\";display:block;position:absolute;width:2px;background-color:#ced4da;top:10px;bottom:4px;left:10px}::ng-deep query-builder-group .tn__group-header:last-of-type:before{display:none}::ng-deep query-builder-group .tn__group-operator{width:auto;display:flex}::ng-deep query-builder-group .tn__group-children{padding-bottom:5px}::ng-deep query-builder-group .tn__group-children:before,::ng-deep query-builder-group .tn__group-children:after{width:12px}::ng-deep query-builder-group .tn__group-children:before{top:-31px}::ng-deep query-builder-group .tn__group-children:after{top:calc(50% - 18px)}::ng-deep query-builder-group query-builder-rule{display:block;position:relative}::ng-deep query-builder-group query-builder-rule:before{content:\"\";position:absolute;width:2px;background-color:#ced4da;top:3px;bottom:34px;left:-4px;z-index:10}::ng-deep query-builder-group .tn__group-or-rule.rule{align-items:flex-end;flex-direction:column}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-header:before,::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children>query-builder-rule:before{background-color:#2196f3}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.InputSwitch, selector: "p-inputSwitch", inputs: ["disabled", "style", "styleClass", "tabindex", "inputId", "name", "readonly", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i7.QueryBuilderRuleComponent, selector: "query-builder-rule", inputs: ["dataSourceFields", "operators", "controlValue", "query", "templateFieldPicker"], outputs: ["onRemove"] }, { kind: "component", type: QueryBuilderGroupComponent, selector: "query-builder-group", inputs: ["dataSourceFields", "operators", "controlValue", "query", "canRemove", "isRoot", "templateFieldPicker"], outputs: ["onRemove"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QueryBuilderGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'query-builder-group', template: "<div class=\"tn__group-or-rule-container group-container\">\r\n    <div class=\"tn__group-or-rule group\" [ngClass]=\"{'root-group': isRoot, 'and-logic': query.operator}\">\r\n        <div class=\"tn__group-header\">\r\n            <div class=\"tn__group-operator\">\r\n                <p-inputSwitch [(ngModel)]=\"query.operator\"></p-inputSwitch>\r\n                <span class=\"tn__group-operator-label\">\r\n                    <ng-container *ngIf=\"query.operator\">Th\u1ECFa m\u00E3n <a [routerLink]=\"\"\r\n                            (click)=\"query.operator = !query.operator\"><b>t\u1EA5t\r\n                                c\u1EA3</b></a>\r\n                        c\u00E1c \u0111i\u1EC1u ki\u1EC7n trong nh\u00F3m:</ng-container>\r\n                    <ng-container *ngIf=\"!query.operator\">Th\u1ECFa m\u00E3n <a [routerLink]=\"\"\r\n                            (click)=\"query.operator = !query.operator\"><b>m\u1ED9t\r\n                                trong</b></a> c\u00E1c \u0111i\u1EC1u ki\u1EC7n trong nh\u00F3m:</ng-container>\r\n                </span>\r\n            </div>\r\n            <div class=\"tn__group-action\">\r\n                <button type=\"button\" pButton icon=\"pi pi-plus-circle\" class=\"p-button-text p-button-rounded\"\r\n                    pTooltip=\"Th\u00EAm \u0111i\u1EC1u ki\u1EC7n\" tooltipPosition=\"top\" (click)=\"addNewRule()\"></button>\r\n                <button type=\"button\" pButton icon=\"pi pi-table\" class=\"p-button-text p-button-rounded\"\r\n                    pTooltip=\"Th\u00EAm nh\u00F3m\" tooltipPosition=\"top\" (click)=\"addNewGroup()\"></button>\r\n                <button type=\"button\" pButton icon=\"pi pi-trash\" [disabled]=\"!canRemove\"\r\n                    class=\"p-button-text p-button-danger p-button-rounded\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                    (click)=\"removeGroup()\"></button>\r\n            </div>\r\n        </div>\r\n        <div *ngFor=\"let q of query.queryArr\" class=\"tn__group-children\">\r\n            <query-builder-rule *ngIf=\"!q.isGroup()\" [dataSourceFields]=\"dataSourceFields\" [operators]=\"operators\"\r\n                [controlValue]=\"controlValue\" [templateFieldPicker]=\"templateFieldPicker\" [query]=\"q\"\r\n                (onRemove)=\"onChildRemove($event)\">\r\n            </query-builder-rule>\r\n            <query-builder-group *ngIf=\"q.isGroup()\" [dataSourceFields]=\"dataSourceFields\" [operators]=\"operators\"\r\n                [controlValue]=\"controlValue\" [templateFieldPicker]=\"templateFieldPicker\" [query]=\"q\" [canRemove]=\"true\"\r\n                (onRemove)=\"onChildRemove($event)\">\r\n            </query-builder-group>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["::ng-deep query-builder-group .tn__group-or-rule-container{margin-top:2px;margin-bottom:2px}::ng-deep query-builder-group .tn__group-or-rule-container:first-child{margin-top:0;margin-bottom:0}::ng-deep query-builder-group .tn__group-or-rule{border-radius:3px;position:relative}::ng-deep query-builder-group .tn__group-header{display:flex;align-items:center;margin-top:2px;margin-bottom:2px;padding:5px 5px 2px}::ng-deep query-builder-group .tn__group-header .p-selectbutton .p-button{height:26px}::ng-deep query-builder-group .tn__group-operator{width:70%;z-index:1}::ng-deep query-builder-group .tn__group-operator-label{margin-left:5px;vertical-align:bottom;line-height:26px}::ng-deep query-builder-group .tn__group-operator-label b{color:#495057}::ng-deep query-builder-group .tn__group-action{display:flex;margin-left:2px;flex:1;justify-content:flex-end;transition:opacity .2s}::ng-deep query-builder-group .tn__group-children{margin-top:2px;margin-bottom:2px;margin-right:-1px;padding-left:24px;position:relative}::ng-deep query-builder-group .tn__group-children:before,::ng-deep query-builder-group .tn__group-children:after{content:\"\";position:absolute;left:10px;width:14px;height:calc(50% + 13px);border-color:#ced4da;border-style:solid;box-sizing:border-box}::ng-deep query-builder-group .tn__group-children:before{top:-13px;border-width:0 0 2px 2px}::ng-deep query-builder-group .tn__group-children:after{top:50%;border-width:0 0 0 2px}::ng-deep query-builder-group .tn__group-children:last-child:after{display:none}::ng-deep query-builder-group .tn__group-or-rule.group{border:1px solid #8dd0ff;box-shadow:1px 3px 6px 4px #5d7a9e69;margin-top:5px;margin-bottom:5px;padding-bottom:5px;z-index:1}::ng-deep query-builder-group .tn__group-or-rule.group.root-group{border:none;padding:0 10px 10px;box-shadow:unset}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children:before,::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children:after{border-color:#2196f3}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-header .tn__group-operator b{color:#2196f3}::ng-deep query-builder-group .tn__group-or-rule.rule{flex:1;display:flex;background-color:#fff;border:1px solid transparent;padding:2px;margin-right:1px}@media (max-width: 640px){::ng-deep query-builder-group .tn__group-header{flex-direction:column;align-items:stretch;position:relative}::ng-deep query-builder-group .tn__group-header:before{content:\"\";display:block;position:absolute;width:2px;background-color:#ced4da;top:10px;bottom:4px;left:10px}::ng-deep query-builder-group .tn__group-header:last-of-type:before{display:none}::ng-deep query-builder-group .tn__group-operator{width:auto;display:flex}::ng-deep query-builder-group .tn__group-children{padding-bottom:5px}::ng-deep query-builder-group .tn__group-children:before,::ng-deep query-builder-group .tn__group-children:after{width:12px}::ng-deep query-builder-group .tn__group-children:before{top:-31px}::ng-deep query-builder-group .tn__group-children:after{top:calc(50% - 18px)}::ng-deep query-builder-group query-builder-rule{display:block;position:relative}::ng-deep query-builder-group query-builder-rule:before{content:\"\";position:absolute;width:2px;background-color:#ced4da;top:3px;bottom:34px;left:-4px;z-index:10}::ng-deep query-builder-group .tn__group-or-rule.rule{align-items:flex-end;flex-direction:column}::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-header:before,::ng-deep query-builder-group .tn__group-or-rule.and-logic>.tn__group-children>query-builder-rule:before{background-color:#2196f3}}\n"] }]
@@ -60,4 +60,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             }], onRemove: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL3F1ZXJ5LWJ1aWxkZXJzL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAvcXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL3F1ZXJ5LWJ1aWxkZXJzL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAvcXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBRTVGLE9BQU8sRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7Ozs7OztBQU8xRCxNQUFNLE9BQU8sMEJBQTBCO0lBZW5DO1FBYlMscUJBQWdCLEdBQVUsRUFBRSxDQUFDO1FBQ3RDLG9FQUFvRTtRQUMzRCxjQUFTLEdBQVUsRUFBRSxDQUFDO1FBSXRCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUVkLGFBQVEsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUVoRSxpQkFBWSxHQUFHLEVBQUUsQ0FBQztJQUlsQixDQUFDO0lBRUQsUUFBUTtJQUNSLENBQUM7SUFHRCxVQUFVO1FBQ04sSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxXQUFXO1FBQ1AsTUFBTSxVQUFVLEdBQUcsSUFBSSxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxJQUFJLFNBQVMsRUFBRSxDQUFDLENBQUM7UUFDcEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVM7WUFBRSxPQUFPO1FBQzVCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDZixNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0MsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNyQyxDQUFDOzt1SEF6Q1EsMEJBQTBCOzJHQUExQiwwQkFBMEIsNFNDVHZDLGdzRkFvQ00sMjJLRDNCTywwQkFBMEI7MkZBQTFCLDBCQUEwQjtrQkFMdEMsU0FBUzsrQkFDSSxxQkFBcUI7MEVBTXRCLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUNvbnRyb2xCYXNlIH0gZnJvbSAnLi4vLi4vLi4vY2xhc3Nlcy9mb3JtLXNjaGVtYSc7XHJcbmltcG9ydCB7IFF1ZXJ5R3JvdXAsIFF1ZXJ5UnVsZSB9IGZyb20gJy4uL21vZGVscy9jbGFzc2VzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdxdWVyeS1idWlsZGVyLWdyb3VwJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9xdWVyeS1idWlsZGVyLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUXVlcnlCdWlsZGVyR3JvdXBDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAgIEBJbnB1dCgpIGRhdGFTb3VyY2VGaWVsZHM6IGFueVtdID0gW107XHJcbiAgICAvLyBEYW5oIHPDoWNoIGPDoWMgb3BlcmF0b3IgY+G7kSDEkeG7i25oLCBkw7luZyB0cm9uZyB0csaw4budbmcgaOG7o3AgY3VzdG9tIGZvcm1cclxuICAgIEBJbnB1dCgpIG9wZXJhdG9yczogYW55W10gPSBbXTtcclxuICAgIC8vIGNvbnRyb2wgdmFsdWUgY+G7kSDEkeG7i25oLCBkw7luZyB0cm9uZyB0csaw4budbmcgaOG7o3AgY3VzdG9tIGZvcm1cclxuICAgIEBJbnB1dCgpIGNvbnRyb2xWYWx1ZTogRm9ybUNvbnRyb2xCYXNlO1xyXG4gICAgQElucHV0KCkgcXVlcnk6IFF1ZXJ5R3JvdXA7XHJcbiAgICBASW5wdXQoKSBjYW5SZW1vdmUgPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIGlzUm9vdCA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgdGVtcGxhdGVGaWVsZFBpY2tlcjogVGVtcGxhdGVSZWY8YW55PjtcclxuICAgIEBPdXRwdXQoKSBvblJlbW92ZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgICBjb2x1bW5TY2hlbWEgPSBbXTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHtcclxuXHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICB9XHJcblxyXG5cclxuICAgIGFkZE5ld1J1bGUoKSB7XHJcbiAgICAgICAgdGhpcy5xdWVyeS5hZGRSdWxlKG5ldyBRdWVyeVJ1bGUoKSk7XHJcbiAgICB9XHJcblxyXG4gICAgYWRkTmV3R3JvdXAoKSB7XHJcbiAgICAgICAgY29uc3QgcXVlcnlHcm91cCA9IG5ldyBRdWVyeUdyb3VwKHRydWUpO1xyXG4gICAgICAgIHF1ZXJ5R3JvdXAuYWRkUnVsZShuZXcgUXVlcnlSdWxlKCkpO1xyXG4gICAgICAgIHRoaXMucXVlcnkuYWRkR3JvdXAocXVlcnlHcm91cCk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVtb3ZlR3JvdXAoKSB7XHJcbiAgICAgICAgaWYgKCF0aGlzLmNhblJlbW92ZSkgcmV0dXJuO1xyXG4gICAgICAgIHRoaXMub25SZW1vdmUuZW1pdCh0aGlzLnF1ZXJ5KTtcclxuICAgIH1cclxuXHJcbiAgICBvbkNoaWxkUmVtb3ZlKHF1ZXJ5KSB7XHJcbiAgICAgICAgY29uc3QgaSA9IHRoaXMucXVlcnkucXVlcnlBcnIuaW5kZXhPZihxdWVyeSk7XHJcbiAgICAgICAgdGhpcy5xdWVyeS5xdWVyeUFyci5zcGxpY2UoaSwgMSk7XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInRuX19ncm91cC1vci1ydWxlLWNvbnRhaW5lciBncm91cC1jb250YWluZXJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJ0bl9fZ3JvdXAtb3ItcnVsZSBncm91cFwiIFtuZ0NsYXNzXT1cInsncm9vdC1ncm91cCc6IGlzUm9vdCwgJ2FuZC1sb2dpYyc6IHF1ZXJ5Lm9wZXJhdG9yfVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0bl9fZ3JvdXAtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0bl9fZ3JvdXAtb3BlcmF0b3JcIj5cclxuICAgICAgICAgICAgICAgIDxwLWlucHV0U3dpdGNoIFsobmdNb2RlbCldPVwicXVlcnkub3BlcmF0b3JcIj48L3AtaW5wdXRTd2l0Y2g+XHJcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInRuX19ncm91cC1vcGVyYXRvci1sYWJlbFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJxdWVyeS5vcGVyYXRvclwiPlRo4buPYSBtw6NuIDxhIFtyb3V0ZXJMaW5rXT1cIlwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwicXVlcnkub3BlcmF0b3IgPSAhcXVlcnkub3BlcmF0b3JcIj48Yj504bqldFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGPhuqM8L2I+PC9hPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBjw6FjIMSRaeG7gXUga2nhu4duIHRyb25nIG5ow7NtOjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhcXVlcnkub3BlcmF0b3JcIj5UaOG7j2EgbcOjbiA8YSBbcm91dGVyTGlua109XCJcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInF1ZXJ5Lm9wZXJhdG9yID0gIXF1ZXJ5Lm9wZXJhdG9yXCI+PGI+beG7mXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0cm9uZzwvYj48L2E+IGPDoWMgxJFp4buBdSBraeG7h24gdHJvbmcgbmjDs206PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidG5fX2dyb3VwLWFjdGlvblwiPlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgcEJ1dHRvbiBpY29uPVwicGkgcGktcGx1cy1jaXJjbGVcIiBjbGFzcz1cInAtYnV0dG9uLXRleHQgcC1idXR0b24tcm91bmRlZFwiXHJcbiAgICAgICAgICAgICAgICAgICAgcFRvb2x0aXA9XCJUaMOqbSDEkWnhu4F1IGtp4buHblwiIHRvb2x0aXBQb3NpdGlvbj1cInRvcFwiIChjbGljayk9XCJhZGROZXdSdWxlKClcIj48L2J1dHRvbj5cclxuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIHBCdXR0b24gaWNvbj1cInBpIHBpLXRhYmxlXCIgY2xhc3M9XCJwLWJ1dHRvbi10ZXh0IHAtYnV0dG9uLXJvdW5kZWRcIlxyXG4gICAgICAgICAgICAgICAgICAgIHBUb29sdGlwPVwiVGjDqm0gbmjDs21cIiB0b29sdGlwUG9zaXRpb249XCJ0b3BcIiAoY2xpY2spPVwiYWRkTmV3R3JvdXAoKVwiPjwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgcEJ1dHRvbiBpY29uPVwicGkgcGktdHJhc2hcIiBbZGlzYWJsZWRdPVwiIWNhblJlbW92ZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJwLWJ1dHRvbi10ZXh0IHAtYnV0dG9uLWRhbmdlciBwLWJ1dHRvbi1yb3VuZGVkXCIgcFRvb2x0aXA9XCJYw7NhXCIgdG9vbHRpcFBvc2l0aW9uPVwidG9wXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwicmVtb3ZlR3JvdXAoKVwiPjwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBxIG9mIHF1ZXJ5LnF1ZXJ5QXJyXCIgY2xhc3M9XCJ0bl9fZ3JvdXAtY2hpbGRyZW5cIj5cclxuICAgICAgICAgICAgPHF1ZXJ5LWJ1aWxkZXItcnVsZSAqbmdJZj1cIiFxLmlzR3JvdXAoKVwiIFtkYXRhU291cmNlRmllbGRzXT1cImRhdGFTb3VyY2VGaWVsZHNcIiBbb3BlcmF0b3JzXT1cIm9wZXJhdG9yc1wiXHJcbiAgICAgICAgICAgICAgICBbY29udHJvbFZhbHVlXT1cImNvbnRyb2xWYWx1ZVwiIFt0ZW1wbGF0ZUZpZWxkUGlja2VyXT1cInRlbXBsYXRlRmllbGRQaWNrZXJcIiBbcXVlcnldPVwicVwiXHJcbiAgICAgICAgICAgICAgICAob25SZW1vdmUpPVwib25DaGlsZFJlbW92ZSgkZXZlbnQpXCI+XHJcbiAgICAgICAgICAgIDwvcXVlcnktYnVpbGRlci1ydWxlPlxyXG4gICAgICAgICAgICA8cXVlcnktYnVpbGRlci1ncm91cCAqbmdJZj1cInEuaXNHcm91cCgpXCIgW2RhdGFTb3VyY2VGaWVsZHNdPVwiZGF0YVNvdXJjZUZpZWxkc1wiIFtvcGVyYXRvcnNdPVwib3BlcmF0b3JzXCJcclxuICAgICAgICAgICAgICAgIFtjb250cm9sVmFsdWVdPVwiY29udHJvbFZhbHVlXCIgW3RlbXBsYXRlRmllbGRQaWNrZXJdPVwidGVtcGxhdGVGaWVsZFBpY2tlclwiIFtxdWVyeV09XCJxXCIgW2NhblJlbW92ZV09XCJ0cnVlXCJcclxuICAgICAgICAgICAgICAgIChvblJlbW92ZSk9XCJvbkNoaWxkUmVtb3ZlKCRldmVudClcIj5cclxuICAgICAgICAgICAgPC9xdWVyeS1idWlsZGVyLWdyb3VwPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL3F1ZXJ5LWJ1aWxkZXJzL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAvcXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaGFyZWQvc3JjL2xpYi9jb21wb25lbnRzL3F1ZXJ5LWJ1aWxkZXJzL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAvcXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBRTVGLE9BQU8sRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7Ozs7OztBQU8xRCxNQUFNLE9BQU8sMEJBQTBCO0lBZW5DO1FBYlMscUJBQWdCLEdBQVUsRUFBRSxDQUFDO1FBQ3RDLG9FQUFvRTtRQUMzRCxjQUFTLEdBQVUsRUFBRSxDQUFDO1FBSXRCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUVkLGFBQVEsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUVoRSxpQkFBWSxHQUFHLEVBQUUsQ0FBQztJQUlsQixDQUFDO0lBRUQsUUFBUTtJQUNSLENBQUM7SUFHRCxVQUFVO1FBQ04sSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxXQUFXO1FBQ1AsTUFBTSxVQUFVLEdBQUcsSUFBSSxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxJQUFJLFNBQVMsRUFBRSxDQUFDLENBQUM7UUFDcEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVM7WUFBRSxPQUFPO1FBQzVCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDZixNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0MsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNyQyxDQUFDOzt1SEF6Q1EsMEJBQTBCOzJHQUExQiwwQkFBMEIsNFNDVHZDLGdzRkFvQ00sMHVLRDNCTywwQkFBMEI7MkZBQTFCLDBCQUEwQjtrQkFMdEMsU0FBUzsrQkFDSSxxQkFBcUI7MEVBTXRCLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUNvbnRyb2xCYXNlIH0gZnJvbSAnLi4vLi4vLi4vY2xhc3Nlcy9mb3JtLXNjaGVtYSc7XHJcbmltcG9ydCB7IFF1ZXJ5R3JvdXAsIFF1ZXJ5UnVsZSB9IGZyb20gJy4uL21vZGVscy9jbGFzc2VzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdxdWVyeS1idWlsZGVyLWdyb3VwJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9xdWVyeS1idWlsZGVyLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUXVlcnlCdWlsZGVyR3JvdXBDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAgIEBJbnB1dCgpIGRhdGFTb3VyY2VGaWVsZHM6IGFueVtdID0gW107XHJcbiAgICAvLyBEYW5oIHPDoWNoIGPDoWMgb3BlcmF0b3IgY+G7kSDEkeG7i25oLCBkw7luZyB0cm9uZyB0csaw4budbmcgaOG7o3AgY3VzdG9tIGZvcm1cclxuICAgIEBJbnB1dCgpIG9wZXJhdG9yczogYW55W10gPSBbXTtcclxuICAgIC8vIGNvbnRyb2wgdmFsdWUgY+G7kSDEkeG7i25oLCBkw7luZyB0cm9uZyB0csaw4budbmcgaOG7o3AgY3VzdG9tIGZvcm1cclxuICAgIEBJbnB1dCgpIGNvbnRyb2xWYWx1ZTogRm9ybUNvbnRyb2xCYXNlO1xyXG4gICAgQElucHV0KCkgcXVlcnk6IFF1ZXJ5R3JvdXA7XHJcbiAgICBASW5wdXQoKSBjYW5SZW1vdmUgPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIGlzUm9vdCA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgdGVtcGxhdGVGaWVsZFBpY2tlcjogVGVtcGxhdGVSZWY8YW55PjtcclxuICAgIEBPdXRwdXQoKSBvblJlbW92ZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgICBjb2x1bW5TY2hlbWEgPSBbXTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHtcclxuXHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICB9XHJcblxyXG5cclxuICAgIGFkZE5ld1J1bGUoKSB7XHJcbiAgICAgICAgdGhpcy5xdWVyeS5hZGRSdWxlKG5ldyBRdWVyeVJ1bGUoKSk7XHJcbiAgICB9XHJcblxyXG4gICAgYWRkTmV3R3JvdXAoKSB7XHJcbiAgICAgICAgY29uc3QgcXVlcnlHcm91cCA9IG5ldyBRdWVyeUdyb3VwKHRydWUpO1xyXG4gICAgICAgIHF1ZXJ5R3JvdXAuYWRkUnVsZShuZXcgUXVlcnlSdWxlKCkpO1xyXG4gICAgICAgIHRoaXMucXVlcnkuYWRkR3JvdXAocXVlcnlHcm91cCk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVtb3ZlR3JvdXAoKSB7XHJcbiAgICAgICAgaWYgKCF0aGlzLmNhblJlbW92ZSkgcmV0dXJuO1xyXG4gICAgICAgIHRoaXMub25SZW1vdmUuZW1pdCh0aGlzLnF1ZXJ5KTtcclxuICAgIH1cclxuXHJcbiAgICBvbkNoaWxkUmVtb3ZlKHF1ZXJ5KSB7XHJcbiAgICAgICAgY29uc3QgaSA9IHRoaXMucXVlcnkucXVlcnlBcnIuaW5kZXhPZihxdWVyeSk7XHJcbiAgICAgICAgdGhpcy5xdWVyeS5xdWVyeUFyci5zcGxpY2UoaSwgMSk7XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInRuX19ncm91cC1vci1ydWxlLWNvbnRhaW5lciBncm91cC1jb250YWluZXJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJ0bl9fZ3JvdXAtb3ItcnVsZSBncm91cFwiIFtuZ0NsYXNzXT1cInsncm9vdC1ncm91cCc6IGlzUm9vdCwgJ2FuZC1sb2dpYyc6IHF1ZXJ5Lm9wZXJhdG9yfVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0bl9fZ3JvdXAtaGVhZGVyXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0bl9fZ3JvdXAtb3BlcmF0b3JcIj5cclxuICAgICAgICAgICAgICAgIDxwLWlucHV0U3dpdGNoIFsobmdNb2RlbCldPVwicXVlcnkub3BlcmF0b3JcIj48L3AtaW5wdXRTd2l0Y2g+XHJcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInRuX19ncm91cC1vcGVyYXRvci1sYWJlbFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJxdWVyeS5vcGVyYXRvclwiPlRo4buPYSBtw6NuIDxhIFtyb3V0ZXJMaW5rXT1cIlwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwicXVlcnkub3BlcmF0b3IgPSAhcXVlcnkub3BlcmF0b3JcIj48Yj504bqldFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGPhuqM8L2I+PC9hPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBjw6FjIMSRaeG7gXUga2nhu4duIHRyb25nIG5ow7NtOjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhcXVlcnkub3BlcmF0b3JcIj5UaOG7j2EgbcOjbiA8YSBbcm91dGVyTGlua109XCJcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInF1ZXJ5Lm9wZXJhdG9yID0gIXF1ZXJ5Lm9wZXJhdG9yXCI+PGI+beG7mXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0cm9uZzwvYj48L2E+IGPDoWMgxJFp4buBdSBraeG7h24gdHJvbmcgbmjDs206PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidG5fX2dyb3VwLWFjdGlvblwiPlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgcEJ1dHRvbiBpY29uPVwicGkgcGktcGx1cy1jaXJjbGVcIiBjbGFzcz1cInAtYnV0dG9uLXRleHQgcC1idXR0b24tcm91bmRlZFwiXHJcbiAgICAgICAgICAgICAgICAgICAgcFRvb2x0aXA9XCJUaMOqbSDEkWnhu4F1IGtp4buHblwiIHRvb2x0aXBQb3NpdGlvbj1cInRvcFwiIChjbGljayk9XCJhZGROZXdSdWxlKClcIj48L2J1dHRvbj5cclxuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIHBCdXR0b24gaWNvbj1cInBpIHBpLXRhYmxlXCIgY2xhc3M9XCJwLWJ1dHRvbi10ZXh0IHAtYnV0dG9uLXJvdW5kZWRcIlxyXG4gICAgICAgICAgICAgICAgICAgIHBUb29sdGlwPVwiVGjDqm0gbmjDs21cIiB0b29sdGlwUG9zaXRpb249XCJ0b3BcIiAoY2xpY2spPVwiYWRkTmV3R3JvdXAoKVwiPjwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgcEJ1dHRvbiBpY29uPVwicGkgcGktdHJhc2hcIiBbZGlzYWJsZWRdPVwiIWNhblJlbW92ZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJwLWJ1dHRvbi10ZXh0IHAtYnV0dG9uLWRhbmdlciBwLWJ1dHRvbi1yb3VuZGVkXCIgcFRvb2x0aXA9XCJYw7NhXCIgdG9vbHRpcFBvc2l0aW9uPVwidG9wXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwicmVtb3ZlR3JvdXAoKVwiPjwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBxIG9mIHF1ZXJ5LnF1ZXJ5QXJyXCIgY2xhc3M9XCJ0bl9fZ3JvdXAtY2hpbGRyZW5cIj5cclxuICAgICAgICAgICAgPHF1ZXJ5LWJ1aWxkZXItcnVsZSAqbmdJZj1cIiFxLmlzR3JvdXAoKVwiIFtkYXRhU291cmNlRmllbGRzXT1cImRhdGFTb3VyY2VGaWVsZHNcIiBbb3BlcmF0b3JzXT1cIm9wZXJhdG9yc1wiXHJcbiAgICAgICAgICAgICAgICBbY29udHJvbFZhbHVlXT1cImNvbnRyb2xWYWx1ZVwiIFt0ZW1wbGF0ZUZpZWxkUGlja2VyXT1cInRlbXBsYXRlRmllbGRQaWNrZXJcIiBbcXVlcnldPVwicVwiXHJcbiAgICAgICAgICAgICAgICAob25SZW1vdmUpPVwib25DaGlsZFJlbW92ZSgkZXZlbnQpXCI+XHJcbiAgICAgICAgICAgIDwvcXVlcnktYnVpbGRlci1ydWxlPlxyXG4gICAgICAgICAgICA8cXVlcnktYnVpbGRlci1ncm91cCAqbmdJZj1cInEuaXNHcm91cCgpXCIgW2RhdGFTb3VyY2VGaWVsZHNdPVwiZGF0YVNvdXJjZUZpZWxkc1wiIFtvcGVyYXRvcnNdPVwib3BlcmF0b3JzXCJcclxuICAgICAgICAgICAgICAgIFtjb250cm9sVmFsdWVdPVwiY29udHJvbFZhbHVlXCIgW3RlbXBsYXRlRmllbGRQaWNrZXJdPVwidGVtcGxhdGVGaWVsZFBpY2tlclwiIFtxdWVyeV09XCJxXCIgW2NhblJlbW92ZV09XCJ0cnVlXCJcclxuICAgICAgICAgICAgICAgIChvblJlbW92ZSk9XCJvbkNoaWxkUmVtb3ZlKCRldmVudClcIj5cclxuICAgICAgICAgICAgPC9xdWVyeS1idWlsZGVyLWdyb3VwPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==

package/esm2020/components/query-builders/query-builder-rule/query-builder-rule.component.mjs

@@ -6,8 +6,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../../services/component.service";
 import * as i2 from "@angular/common";
 import * as i3 from "tn-custom-primeng/button";
-import * as i4 from "tn-custom-primeng/tooltip";
-import * as i5 from "tn-custom-primeng/dropdown";
+import * as i4 from "tn-custom-primeng/dropdown";
+import * as i5 from "tn-custom-primeng/tooltip";
 import * as i6 from "@angular/forms";
 import * as i7 from "tn-custom-primeng/checkbox";
 import * as i8 from "tn-custom-primeng/inputtext";
@@ -168,7 +168,7 @@ export class QueryBuilderRuleComponent {
     }
 }
 QueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QueryBuilderRuleComponent, deps: [{ token: i1.ComponentService }], target: i0.ɵɵFactoryTarget.Component });
-QueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QueryBuilderRuleComponent, selector: "query-builder-rule", inputs: { dataSourceFields: "dataSourceFields", operators: "operators", controlValue: "controlValue", query: "query", templateFieldPicker: "templateFieldPicker" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"tn__group-or-rule-container rule-container\">\r\n    <div class=\"tn__group-or-rule rule\">\r\n        <div class=\"tn__rule-body\">\r\n            <ng-container *ngIf=\"templateFieldPicker\">\r\n                <div class=\"tn__rule-field\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"templateFieldPicker; context: {$implicit: query, handleChangedField: setDatasourceOperators}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!templateFieldPicker\">\r\n                <ng-container *ngTemplateOutlet=\"fieldPicker; context: {$implicit: query}\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"tn__rule-operator\">\r\n                <p-dropdown appendTo=\"body\" [options]=\"operators\" optionLabel=\"ten\" optionValue=\"id\"\r\n                    placeholder=\"Ch\u1ECDn to\u00E1n t\u1EED\" [(ngModel)]=\"query.compareType\" (onChange)=\"handleChangeOperator()\">\r\n                </p-dropdown>\r\n            </div>\r\n            <div *ngIf=\"!changingControl\" class=\"tn__rule-value\">\r\n                <ng-container *ngIf=\"control\">\r\n                    <ng-container [ngSwitch]=\"controlType\">\r\n                        <ng-container *ngSwitchCase=\"'textbox'\">\r\n                            <ng-template\r\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: false}\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'custom'\">\r\n                            <ng-template\r\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: disabled}\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <!-- <p-multiSelect *ngSwitchCase=\"'dropdown'\" [placeholder]=\"control.placeholder\"\r\n                            [appendTo]=\"'body'\" [options]=\"control.dataSource\" [disabled]=\"disabled\" optionLabel=\"ten\"\r\n                            optionValue=\"id\" [(ngModel)]=\"query.value\">\r\n                        </p-multiSelect> -->\r\n                        <dropdown *ngSwitchCase=\"'dropdown'\" [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                            [itemSelectedStyleClass]=\"'min'\" [(value)]=\"query.value\">\r\n                        </dropdown>\r\n                        <div *ngSwitchCase=\"'datetime'\" class=\"datetime-value-container\">\r\n                            <p-checkbox [binary]=\"true\" [label]=\"'T\u00F9y bi\u1EBFn'\" [(ngModel)]=\"custom\"></p-checkbox>\r\n                            <datetime-picker *ngIf=\"!custom\" [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\r\n                            </datetime-picker>\r\n                            <input *ngIf=\"custom\" pInputText placeholder=\"VD: [now] + 1d - 2h + 3m - 4s\"\r\n                                [(ngModel)]=\"query.value\" />\r\n                        </div>\r\n\r\n                        <tn-mask *ngSwitchCase=\"'number'\" [disabled]=\"disabled\" [maskType]=\"control.maskType\"\r\n                            [placeholder]=\"control.placeholder\" [(ngModel)]=\"query.value\">\r\n                        </tn-mask>\r\n                        <ng-container *ngSwitchCase=\"'user'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderUserPicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query, multiple: control.multiple\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderCoCauPicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query, multiple: control.multiple\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'role'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'groupuser'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'chucVu'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <!-- <user-picker *ngSwitchCase=\"'user'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\" [multiple]=\"control.multiple\">\r\n                        </user-picker>\r\n                        <cocautochuc-picker-list *ngSwitchCase=\"'cocautochuc'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </cocautochuc-picker-list> \r\n                        <autocomplete-picker *ngSwitchCase=\"'role'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'groupuser'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'chucVu'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'autocomplete-picker'\" [control]=\"control\"\r\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker> -->\r\n                        <app-autocomplete-datasource *ngSwitchCase=\"'autocomplete'\" [control]=\"control\"\r\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\" [suggestions]=\"control.dataSource\">\r\n                        </app-autocomplete-datasource>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control\">\r\n                    <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\r\n                </ng-container>\r\n            </div>\r\n            <after-view-checked *ngIf=\"changingControl\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n        </div>\r\n        <div class=\"tn__rule-action\">\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-rounded p-button-danger\"\r\n                pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" (click)=\"removeGroup()\"></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #fieldPicker let-query>\r\n    <ng-container *ngIf=\"controlType == 'custom'\">\r\n        <input type=\"text\" [class]=\"'tn__rule-field'\" pInputText placeholder=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\"\r\n            [(ngModel)]=\"query.fieldValue\" />\r\n    </ng-container>\r\n    <ng-container *ngIf=\"controlType != 'custom'\">\r\n        <p-dropdown [appendTo]=\"'body'\" [options]=\"dataSourceFields\" [class]=\"'tn__rule-field'\" optionLabel=\"ten\"\r\n            optionValue=\"id\" placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(ngModel)]=\"query.field\"\r\n            (onChange)=\"handleChangeField($event)\">\r\n        </p-dropdown>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #textBoxValue let-query>\r\n    <input [disabled]=\"disabled\" type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [(ngModel)]=\"query.value\" />\r\n</ng-template>", styles: ["::ng-deep query-builder-rule .tn__rule-body{display:flex;width:calc(100% - 34px);align-items:center}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:5px}::ng-deep query-builder-rule .tn__rule-body>*:last-child{margin-right:0}::ng-deep query-builder-rule .tn__rule-field{height:26px}::ng-deep query-builder-rule .tn__rule-value{min-height:26px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value{width:calc(50% - 80px);flex:0 0 calc(50% - 80px)}::ng-deep query-builder-rule .tn__rule-field.p-dropdown,::ng-deep query-builder-rule .tn__rule-field tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-field .p-dropdown,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete,::ng-deep query-builder-rule .tn__rule-field .p-multiselect,::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .p-calendar,::ng-deep query-builder-rule .tn__rule-value.p-dropdown,::ng-deep query-builder-rule .tn__rule-value tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-value .p-dropdown,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete,::ng-deep query-builder-rule .tn__rule-value .p-multiselect,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .p-calendar{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .custom-autocomplete-button,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .custom-autocomplete-button{padding:2px 12px;min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-dropdown,::ng-deep query-builder-rule .tn__rule-field .tn-dropdown.p-multiselect.p-component,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown.p-multiselect.p-component{min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-autocomplete .p-autocomplete-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-autocomplete .p-autocomplete-dropdown{height:26px;width:26px}::ng-deep query-builder-rule .tn__rule-field .p-calendar .p-button.p-button-icon-only,::ng-deep query-builder-rule .tn__rule-value .p-calendar .p-button.p-button-icon-only{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token{padding:0 .5rem;font-size:.9rem;margin:1px 2px}::ng-deep query-builder-rule .tn__rule-operator{width:145px;flex:0 0 145px;height:26px}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown .p-inputtext{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-action{flex:0 0 auto;white-space:nowrap}::ng-deep query-builder-rule .tn__rule-action button{height:26px!important;width:26px!important;margin-left:2px!important;margin-right:6px!important}::ng-deep query-builder-rule .datetime-value-container{display:flex;align-items:center}::ng-deep query-builder-rule .datetime-value-container p-checkbox{flex:0 0 auto;margin-right:5px}@media (max-width: 640px){::ng-deep query-builder-rule .tn__rule-body{flex-direction:column;padding-right:5px}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:0;margin-bottom:5px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value,::ng-deep query-builder-rule .tn__rule-operator{width:100%;flex:1 1 auto}}\n"], dependencies: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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.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: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: i8.InputText, selector: "[pInputText]" }, { kind: "component", type: i9.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i10.DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onInit", "onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }, { kind: "component", type: i11.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onInit", "onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i12.MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass", "autoFormat"], outputs: ["onInit", "onFocus", "onBlur", "onChanged"] }, { kind: "component", type: i13.AutocompleteDatasourceComponent, selector: "app-autocomplete-datasource", inputs: ["suggestions", "control"], outputs: ["onInit", "onValueChanged"] }] });
+QueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: QueryBuilderRuleComponent, selector: "query-builder-rule", inputs: { dataSourceFields: "dataSourceFields", operators: "operators", controlValue: "controlValue", query: "query", templateFieldPicker: "templateFieldPicker" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"tn__group-or-rule-container rule-container\">\r\n    <div class=\"tn__group-or-rule rule\">\r\n        <div class=\"tn__rule-body\">\r\n            <ng-container *ngIf=\"templateFieldPicker\">\r\n                <div class=\"tn__rule-field\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"templateFieldPicker; context: {$implicit: query, handleChangedField: setDatasourceOperators}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!templateFieldPicker\">\r\n                <ng-container *ngTemplateOutlet=\"fieldPicker; context: {$implicit: query}\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"tn__rule-operator\">\r\n                <p-dropdown appendTo=\"body\" [options]=\"operators\" optionLabel=\"ten\" optionValue=\"id\"\r\n                    placeholder=\"Ch\u1ECDn to\u00E1n t\u1EED\" [(ngModel)]=\"query.compareType\" (onChange)=\"handleChangeOperator()\">\r\n                </p-dropdown>\r\n            </div>\r\n            <div *ngIf=\"!changingControl\" class=\"tn__rule-value\">\r\n                <ng-container *ngIf=\"control\">\r\n                    <ng-container [ngSwitch]=\"controlType\">\r\n                        <ng-container *ngSwitchCase=\"'textbox'\">\r\n                            <ng-template\r\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: false}\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'custom'\">\r\n                            <ng-template\r\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: disabled}\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <!-- <p-multiSelect *ngSwitchCase=\"'dropdown'\" [placeholder]=\"control.placeholder\"\r\n                            [appendTo]=\"'body'\" [options]=\"control.dataSource\" [disabled]=\"disabled\" optionLabel=\"ten\"\r\n                            optionValue=\"id\" [(ngModel)]=\"query.value\">\r\n                        </p-multiSelect> -->\r\n                        <dropdown *ngSwitchCase=\"'dropdown'\" [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                            [itemSelectedStyleClass]=\"'min'\" [(value)]=\"query.value\">\r\n                        </dropdown>\r\n                        <div *ngSwitchCase=\"'datetime'\" class=\"datetime-value-container\">\r\n                            <p-checkbox [binary]=\"true\" [label]=\"'T\u00F9y bi\u1EBFn'\" [(ngModel)]=\"custom\"></p-checkbox>\r\n                            <datetime-picker *ngIf=\"!custom\" [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\r\n                            </datetime-picker>\r\n                            <input *ngIf=\"custom\" pInputText placeholder=\"VD: [now] + 1d - 2h + 3m - 4s\"\r\n                                [(ngModel)]=\"query.value\" />\r\n                        </div>\r\n\r\n                        <tn-mask *ngSwitchCase=\"'number'\" [disabled]=\"disabled\" [maskType]=\"control.maskType\"\r\n                            [placeholder]=\"control.placeholder\" [(ngModel)]=\"query.value\">\r\n                        </tn-mask>\r\n                        <ng-container *ngSwitchCase=\"'user'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderUserPicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query, multiple: control.multiple\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderCoCauPicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query, multiple: control.multiple\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'role'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'groupuser'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'chucVu'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <!-- <user-picker *ngSwitchCase=\"'user'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\" [multiple]=\"control.multiple\">\r\n                        </user-picker>\r\n                        <cocautochuc-picker-list *ngSwitchCase=\"'cocautochuc'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </cocautochuc-picker-list> \r\n                        <autocomplete-picker *ngSwitchCase=\"'role'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'groupuser'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'chucVu'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'autocomplete-picker'\" [control]=\"control\"\r\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker> -->\r\n                        <app-autocomplete-datasource *ngSwitchCase=\"'autocomplete'\" [control]=\"control\"\r\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\" [suggestions]=\"control.dataSource\">\r\n                        </app-autocomplete-datasource>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control\">\r\n                    <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\r\n                </ng-container>\r\n            </div>\r\n            <after-view-checked *ngIf=\"changingControl\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n        </div>\r\n        <div class=\"tn__rule-action\">\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-rounded p-button-danger\"\r\n                pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" (click)=\"removeGroup()\"></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #fieldPicker let-query>\r\n    <ng-container *ngIf=\"controlType == 'custom'\">\r\n        <input type=\"text\" [class]=\"'tn__rule-field'\" pInputText placeholder=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\"\r\n            [(ngModel)]=\"query.fieldValue\" />\r\n    </ng-container>\r\n    <ng-container *ngIf=\"controlType != 'custom'\">\r\n        <p-dropdown [appendTo]=\"'body'\" [options]=\"dataSourceFields\" [class]=\"'tn__rule-field'\" optionLabel=\"ten\"\r\n            optionValue=\"id\" placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(ngModel)]=\"query.field\"\r\n            (onChange)=\"handleChangeField($event)\">\r\n        </p-dropdown>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #textBoxValue let-query>\r\n    <input [disabled]=\"disabled\" type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [(ngModel)]=\"query.value\" />\r\n</ng-template>", styles: ["::ng-deep query-builder-rule .tn__rule-body{display:flex;width:calc(100% - 34px);align-items:center}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:5px}::ng-deep query-builder-rule .tn__rule-body>*:last-child{margin-right:0}::ng-deep query-builder-rule .tn__rule-field{height:26px}::ng-deep query-builder-rule .tn__rule-value{min-height:26px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value{width:calc(50% - 80px);flex:0 0 calc(50% - 80px)}::ng-deep query-builder-rule .tn__rule-field.p-dropdown,::ng-deep query-builder-rule .tn__rule-field tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-field .p-dropdown,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete,::ng-deep query-builder-rule .tn__rule-field .p-multiselect,::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .p-calendar,::ng-deep query-builder-rule .tn__rule-value.p-dropdown,::ng-deep query-builder-rule .tn__rule-value tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-value .p-dropdown,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete,::ng-deep query-builder-rule .tn__rule-value .p-multiselect,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .p-calendar{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .custom-autocomplete-button,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .custom-autocomplete-button{padding:2px 12px;min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-dropdown,::ng-deep query-builder-rule .tn__rule-field .tn-dropdown.p-multiselect.p-component,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown.p-multiselect.p-component{min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-autocomplete .p-autocomplete-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-autocomplete .p-autocomplete-dropdown{height:26px;width:26px}::ng-deep query-builder-rule .tn__rule-field .p-calendar .p-button.p-button-icon-only,::ng-deep query-builder-rule .tn__rule-value .p-calendar .p-button.p-button-icon-only{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token{padding:0 .5rem;font-size:.9rem;margin:1px 2px}::ng-deep query-builder-rule .tn__rule-operator{width:145px;flex:0 0 145px;height:26px}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown .p-inputtext{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-action{flex:0 0 auto;white-space:nowrap}::ng-deep query-builder-rule .tn__rule-action button{height:26px!important;width:26px!important;margin-left:2px!important;margin-right:6px!important}::ng-deep query-builder-rule .datetime-value-container{display:flex;align-items:center}::ng-deep query-builder-rule .datetime-value-container p-checkbox{flex:0 0 auto;margin-right:5px}@media (max-width: 640px){::ng-deep query-builder-rule .tn__rule-body{flex-direction:column;padding-right:5px}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:0;margin-bottom:5px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value,::ng-deep query-builder-rule .tn__rule-operator{width:100%;flex:1 1 auto}}\n"], dependencies: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i4.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: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: i8.InputText, selector: "[pInputText]" }, { kind: "component", type: i9.AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: i10.DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onInit", "onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }, { kind: "component", type: i11.DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onInit", "onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: i12.MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass", "autoFormat"], outputs: ["onInit", "onFocus", "onBlur", "onChanged"] }, { kind: "component", type: i13.AutocompleteDatasourceComponent, selector: "app-autocomplete-datasource", inputs: ["suggestions", "control"], outputs: ["onInit", "onValueChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: QueryBuilderRuleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'query-builder-rule', template: "<div class=\"tn__group-or-rule-container rule-container\">\r\n    <div class=\"tn__group-or-rule rule\">\r\n        <div class=\"tn__rule-body\">\r\n            <ng-container *ngIf=\"templateFieldPicker\">\r\n                <div class=\"tn__rule-field\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"templateFieldPicker; context: {$implicit: query, handleChangedField: setDatasourceOperators}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!templateFieldPicker\">\r\n                <ng-container *ngTemplateOutlet=\"fieldPicker; context: {$implicit: query}\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"tn__rule-operator\">\r\n                <p-dropdown appendTo=\"body\" [options]=\"operators\" optionLabel=\"ten\" optionValue=\"id\"\r\n                    placeholder=\"Ch\u1ECDn to\u00E1n t\u1EED\" [(ngModel)]=\"query.compareType\" (onChange)=\"handleChangeOperator()\">\r\n                </p-dropdown>\r\n            </div>\r\n            <div *ngIf=\"!changingControl\" class=\"tn__rule-value\">\r\n                <ng-container *ngIf=\"control\">\r\n                    <ng-container [ngSwitch]=\"controlType\">\r\n                        <ng-container *ngSwitchCase=\"'textbox'\">\r\n                            <ng-template\r\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: false}\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'custom'\">\r\n                            <ng-template\r\n                                *ngTemplateOutlet=\"textBoxValue; context: {$implicit: query, _disabled: disabled}\">\r\n                            </ng-template>\r\n                        </ng-container>\r\n                        <!-- <p-multiSelect *ngSwitchCase=\"'dropdown'\" [placeholder]=\"control.placeholder\"\r\n                            [appendTo]=\"'body'\" [options]=\"control.dataSource\" [disabled]=\"disabled\" optionLabel=\"ten\"\r\n                            optionValue=\"id\" [(ngModel)]=\"query.value\">\r\n                        </p-multiSelect> -->\r\n                        <dropdown *ngSwitchCase=\"'dropdown'\" [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                            [itemSelectedStyleClass]=\"'min'\" [(value)]=\"query.value\">\r\n                        </dropdown>\r\n                        <div *ngSwitchCase=\"'datetime'\" class=\"datetime-value-container\">\r\n                            <p-checkbox [binary]=\"true\" [label]=\"'T\u00F9y bi\u1EBFn'\" [(ngModel)]=\"custom\"></p-checkbox>\r\n                            <datetime-picker *ngIf=\"!custom\" [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\r\n                            </datetime-picker>\r\n                            <input *ngIf=\"custom\" pInputText placeholder=\"VD: [now] + 1d - 2h + 3m - 4s\"\r\n                                [(ngModel)]=\"query.value\" />\r\n                        </div>\r\n\r\n                        <tn-mask *ngSwitchCase=\"'number'\" [disabled]=\"disabled\" [maskType]=\"control.maskType\"\r\n                            [placeholder]=\"control.placeholder\" [(ngModel)]=\"query.value\">\r\n                        </tn-mask>\r\n                        <ng-container *ngSwitchCase=\"'user'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderUserPicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query, multiple: control.multiple\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderCoCauPicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query, multiple: control.multiple\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'role'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'groupuser'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'chucVu'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                            <ng-container *ngTemplateOutlet=\"customTemplate['queryBuilderAutocompletePicker']; context: {\r\n                                $implicit: control, disabled: disabled, query: query\r\n                            }\"></ng-container>\r\n                        </ng-container>\r\n                        <!-- <user-picker *ngSwitchCase=\"'user'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\" [multiple]=\"control.multiple\">\r\n                        </user-picker>\r\n                        <cocautochuc-picker-list *ngSwitchCase=\"'cocautochuc'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </cocautochuc-picker-list> \r\n                        <autocomplete-picker *ngSwitchCase=\"'role'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'groupuser'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'chucVu'\" [control]=\"control\" [disabled]=\"disabled\"\r\n                            [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker>\r\n                        <autocomplete-picker *ngSwitchCase=\"'autocomplete-picker'\" [control]=\"control\"\r\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\">\r\n                        </autocomplete-picker> -->\r\n                        <app-autocomplete-datasource *ngSwitchCase=\"'autocomplete'\" [control]=\"control\"\r\n                            [disabled]=\"disabled\" [(ngModel)]=\"query.value\" [suggestions]=\"control.dataSource\">\r\n                        </app-autocomplete-datasource>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control\">\r\n                    <input type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [disabled]=\"true\" />\r\n                </ng-container>\r\n            </div>\r\n            <after-view-checked *ngIf=\"changingControl\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n        </div>\r\n        <div class=\"tn__rule-action\">\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-rounded p-button-danger\"\r\n                pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" (click)=\"removeGroup()\"></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template #fieldPicker let-query>\r\n    <ng-container *ngIf=\"controlType == 'custom'\">\r\n        <input type=\"text\" [class]=\"'tn__rule-field'\" pInputText placeholder=\"Tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\"\r\n            [(ngModel)]=\"query.fieldValue\" />\r\n    </ng-container>\r\n    <ng-container *ngIf=\"controlType != 'custom'\">\r\n        <p-dropdown [appendTo]=\"'body'\" [options]=\"dataSourceFields\" [class]=\"'tn__rule-field'\" optionLabel=\"ten\"\r\n            optionValue=\"id\" placeholder=\"Ch\u1ECDn tr\u01B0\u1EDDng d\u1EEF li\u1EC7u\" [(ngModel)]=\"query.field\"\r\n            (onChange)=\"handleChangeField($event)\">\r\n        </p-dropdown>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #textBoxValue let-query>\r\n    <input [disabled]=\"disabled\" type=\"text\" pInputText placeholder=\"Gi\u00E1 tr\u1ECB\" [(ngModel)]=\"query.value\" />\r\n</ng-template>", styles: ["::ng-deep query-builder-rule .tn__rule-body{display:flex;width:calc(100% - 34px);align-items:center}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:5px}::ng-deep query-builder-rule .tn__rule-body>*:last-child{margin-right:0}::ng-deep query-builder-rule .tn__rule-field{height:26px}::ng-deep query-builder-rule .tn__rule-value{min-height:26px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value{width:calc(50% - 80px);flex:0 0 calc(50% - 80px)}::ng-deep query-builder-rule .tn__rule-field.p-dropdown,::ng-deep query-builder-rule .tn__rule-field tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-field .p-dropdown,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete,::ng-deep query-builder-rule .tn__rule-field .p-multiselect,::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .p-calendar,::ng-deep query-builder-rule .tn__rule-value.p-dropdown,::ng-deep query-builder-rule .tn__rule-value tn-mask .p-inputgroup,::ng-deep query-builder-rule .tn__rule-value .p-dropdown,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete,::ng-deep query-builder-rule .tn__rule-value .p-multiselect,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .p-calendar{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-field .p-inputtext,::ng-deep query-builder-rule .tn__rule-field .custom-autocomplete-button,::ng-deep query-builder-rule .tn__rule-value .p-inputtext,::ng-deep query-builder-rule .tn__rule-value .custom-autocomplete-button{padding:2px 12px;min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-dropdown,::ng-deep query-builder-rule .tn__rule-field .tn-dropdown.p-multiselect.p-component,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-dropdown.p-multiselect.p-component{min-height:26px}::ng-deep query-builder-rule .tn__rule-field .tn-autocomplete .p-autocomplete-dropdown,::ng-deep query-builder-rule .tn__rule-value .tn-autocomplete .p-autocomplete-dropdown{height:26px;width:26px}::ng-deep query-builder-rule .tn__rule-field .p-calendar .p-button.p-button-icon-only,::ng-deep query-builder-rule .tn__rule-value .p-calendar .p-button.p-button-icon-only{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-field .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token,::ng-deep query-builder-rule .tn__rule-value .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token{padding:0 .5rem;font-size:.9rem;margin:1px 2px}::ng-deep query-builder-rule .tn__rule-operator{width:145px;flex:0 0 145px;height:26px}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown{width:100%;height:100%}::ng-deep query-builder-rule .tn__rule-operator .p-dropdown .p-inputtext{padding:2px 12px}::ng-deep query-builder-rule .tn__rule-action{flex:0 0 auto;white-space:nowrap}::ng-deep query-builder-rule .tn__rule-action button{height:26px!important;width:26px!important;margin-left:2px!important;margin-right:6px!important}::ng-deep query-builder-rule .datetime-value-container{display:flex;align-items:center}::ng-deep query-builder-rule .datetime-value-container p-checkbox{flex:0 0 auto;margin-right:5px}@media (max-width: 640px){::ng-deep query-builder-rule .tn__rule-body{flex-direction:column;padding-right:5px}::ng-deep query-builder-rule .tn__rule-body>*{margin-right:0;margin-bottom:5px}::ng-deep query-builder-rule .tn__rule-field,::ng-deep query-builder-rule .tn__rule-value,::ng-deep query-builder-rule .tn__rule-operator{width:100%;flex:1 1 auto}}\n"] }]

package/esm2020/components/radio-button-list/radio-button-list.component.mjs

@@ -222,7 +222,7 @@ export class RadioButtonListComponent {
     }
 }
 RadioButtonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RadioButtonListComponent, deps: [{ token: i1.CrudService }, { token: i2.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: RadioButtonListComponent, selector: "radio-button-list", inputs: { control: "control", dataSource: "dataSource", value: "value", disabled: "disabled" }, outputs: { onInit: "onInit", valueChange: "valueChange", onChanged: "onChanged", onDataSourceLoaded: "onDataSourceLoaded", adjustValue: "adjustValue", onReady: "onReady" }, ngImport: i0, template: "<div class=\"p-grid tn-check-box-list\" [class.flex-end]=\"control.align == 'right'\"\r\n    [class.flex-center]=\"control.align == 'center'\">\r\n    <div [class]=\"classCheckBox\" *ngFor=\"let chk of dataSourceInternal\">\r\n        <p-radioButton [disabled]=\"disabled ? true : null\" [label]=\"chk.label\" [value]=\"chk.value\"\r\n            [(ngModel)]=\"_value\" (onClick)=\"change($event)\">\r\n        </p-radioButton>\r\n    </div>\r\n</div>\r\n", styles: [".tn-check-box-list.p-grid{margin-bottom:-.5em}.btn-clear{height:30px;cursor:pointer;border:none;background:#337ab7;color:#fff;border-radius:3px;padding:0 10px;margin:1px .5em 0}.p-col-horizontal{padding:.5em}::ng-deep .tn-check-box-list{position:relative}::ng-deep .tn-check-box-list.flex-end{justify-content:flex-end}::ng-deep .tn-check-box-list.flex-center{justify-content:center}::ng-deep .tn-check-box-list label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+RadioButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: RadioButtonListComponent, selector: "radio-button-list", inputs: { control: "control", dataSource: "dataSource", value: "value", disabled: "disabled" }, outputs: { onInit: "onInit", valueChange: "valueChange", onChanged: "onChanged", onDataSourceLoaded: "onDataSourceLoaded", adjustValue: "adjustValue", onReady: "onReady" }, ngImport: i0, template: "<div class=\"p-grid tn-check-box-list\" [class.flex-end]=\"control.align == 'right'\"\r\n    [class.flex-center]=\"control.align == 'center'\">\r\n    <div [class]=\"classCheckBox\" *ngFor=\"let chk of dataSourceInternal\">\r\n        <p-radioButton [disabled]=\"disabled ? true : null\" [label]=\"chk.label\" [value]=\"chk.value\"\r\n            [(ngModel)]=\"_value\" (onClick)=\"change($event)\">\r\n        </p-radioButton>\r\n    </div>\r\n</div>\r\n", styles: [".tn-check-box-list.p-grid{margin-bottom:-.5em}.btn-clear{height:30px;cursor:pointer;border:none;background:#337ab7;color:#fff;border-radius:3px;padding:0 10px;margin:1px .5em 0}.p-col-horizontal{padding:.5em}::ng-deep .tn-check-box-list{position:relative}::ng-deep .tn-check-box-list.flex-end{justify-content:flex-end}::ng-deep .tn-check-box-list.flex-center{justify-content:center}::ng-deep .tn-check-box-list label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.RadioButton, selector: "p-radioButton", inputs: ["disabled", "name", "value", "formControlName", "label", "tabindex", "inputId", "ariaLabelledBy", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RadioButtonListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'radio-button-list', template: "<div class=\"p-grid tn-check-box-list\" [class.flex-end]=\"control.align == 'right'\"\r\n    [class.flex-center]=\"control.align == 'center'\">\r\n    <div [class]=\"classCheckBox\" *ngFor=\"let chk of dataSourceInternal\">\r\n        <p-radioButton [disabled]=\"disabled ? true : null\" [label]=\"chk.label\" [value]=\"chk.value\"\r\n            [(ngModel)]=\"_value\" (onClick)=\"change($event)\">\r\n        </p-radioButton>\r\n    </div>\r\n</div>\r\n", styles: [".tn-check-box-list.p-grid{margin-bottom:-.5em}.btn-clear{height:30px;cursor:pointer;border:none;background:#337ab7;color:#fff;border-radius:3px;padding:0 10px;margin:1px .5em 0}.p-col-horizontal{padding:.5em}::ng-deep .tn-check-box-list{position:relative}::ng-deep .tn-check-box-list.flex-end{justify-content:flex-end}::ng-deep .tn-check-box-list.flex-center{justify-content:center}::ng-deep .tn-check-box-list label{cursor:pointer}\n"] }]