npm - tnx-shared - Versions diffs - 5.2.24 → 5.2.25 - Mend

tnx-shared 5.2.24 → 5.2.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/esm2020/components/tn-app-help/tn-app-help.component.mjs CHANGED Viewed

@@ -57,7 +57,7 @@ export class TnAppHelpComponent extends ComponentBase {
     }
 }
 TnAppHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnAppHelpComponent, deps: [{ token: i1.PathNameService }, { token: i2.DomService }, { token: i0.Injector }, { token: i3.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-TnAppHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnAppHelpComponent, selector: "li[tn-app-help]", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<a href=\"javascript:;\" tabindex=\"9\" (click)=\"showHelper()\" style=\"height: 30px;\" pTooltip=\"Tr\u1EE3 gi\u00FAp\"\r\n    tooltipPosition=\"bottom\">\r\n    <span class=\"topbar-icon-left\">\r\n        <!-- <svg focusable=\"false\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"\r\n            class=\"topbar-icon animated swing svgmodule\">\r\n            <path fill=\"currentColor\"\r\n                d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z\"\r\n                class=\"\"></path>\r\n        </svg> -->\r\n        <i class=\"topbar-icon animated swing pi pi-question-circle\"></i>\r\n    </span>\r\n    <span class=\"topbar-item-name\">{{ \"Tr\u1EE3 gi\u00FAp\" | translate }}</span>\r\n</a>\r\n\r\n<p-sidebar [styleClass]=\"'HelperSlideBar tn-l-sidebar-wrapper'\" [(visible)]=\"display\" position=\"right\"\r\n    [appendTo]=\"'body'\" [style]=\"{ width: '30em', border: 0, 'max-width': '100vw' }\">\r\n    <div style=\"background-color: #fff; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);\">\r\n        <h1 style=\"font-size: 16px; color: #212529;\">Trung t\u00E2m tr\u1EE3 gi\u00FAp</h1>\r\n    </div>\r\n\r\n    <div class=\"tn-l-help-wrapper\">\r\n        <tn-custom-scrollbar #scrollbar [style]=\"{'max-height':'calc(100vh - 50px)'}\">\r\n            <div class=\"HelpCenter\">\r\n                <div class=\"p-grid\" style=\"margin-top:10px; margin-bottom: 25px;\">\r\n                    <div class=\"p-col-8\">\r\n                        <p style=\"font-weight:bold;font-size: 16px;margin-bottom: 8px; margin-top:20px\">\r\n                            {{config.expertName}}\r\n                        </p>\r\n                        <p style=\"margin: 0px;\">\r\n                            <a [href]=\"config.hrefTelephone\"><i class=\"fas fa-phone\"\r\n                                    style=\"margin-right: 8px; width: 15px\"></i>{{config.phoneNumber}}</a>\r\n                        </p>\r\n                        <p style=\"margin-top: 8px;\">\r\n                            <a [href]=\"config.hrefMail\"><i class=\"fas fa-envelope\"\r\n                                    style=\"margin-right: 8px; width: 15px\"></i>{{config.mail}}</a>\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"p-col-4\">\r\n                        <img [src]=\"config.logoCompany\" style=\"width: 100%; float: right; opacity: 0.7;\" />\r\n                    </div>\r\n                </div>\r\n                <div class=\"p-grid p-m-0 HelpCenter-download\" style=\"margin-top: 0px; margin-bottom: 40px;\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">T\u00E0i li\u1EC7u - H\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng c\u00E1c ph\u00E2n h\u1EC7 </span>\r\n                    </div>\r\n                    <div class=\"tn-l-pmti p-grid\"\r\n                        style=\"border: 1px solid #ccc; width: 100%;margin:0;margin-bottom:20px;\">\r\n                        <div *ngFor=\"let item of helps\" class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" [href]=\"item.href\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <i class=\"{{item.icon}} app-switcher-item-icon\"\r\n                                        style=\"color: rgb(44 126 210);font-size: 3.5em;padding-bottom: 10px;\"></i>\r\n                                    <br />{{item.label}}\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"p-grid p-m-0 HelpCenter-video\" style=\"margin-top: 0px\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">Xem h\u01B0\u1EDBng d\u1EABn</span>\r\n                    </div>\r\n                    <div class=\"p-col-12 help-content\">\r\n                        <h2 *ngIf=\"showHelperCurrentPageState\" style=\"margin-top: 0px\">\r\n                            <a href=\"javascript:;\" (click)=\"showHelperCurrentPage(null)\"\r\n                                style=\"display:inline-block; position: relative; border-top: 1px solid #52abf5;\">\r\n                                <img src=\"/assets/images/bgvideo.png\" alt=\"screen shot\"\r\n                                    style=\"width:100%; filter: brightness(0.88);\" />\r\n                                <i class=\"fab fa-youtube fa-2x\"></i>\r\n                            </a>\r\n                        </h2>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"p-grid p-m-0 HelpCenter-download\" style=\"margin-top: 0px; margin-bottom: 40px;\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">Ph\u1EA7n m\u1EC1m ti\u1EC7n \u00EDch</span>\r\n                    </div>\r\n                    <div class=\"tn-l-pmti\" style=\"border: 1px solid #ccc; width: 100%\">\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" [href]=\"config.linkDownloadClientApp\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/icon-appTN64x64.png\" />\r\n                                    <br />TN Client\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" href=\"https://ultraviewer.net/vi/UltraViewer_setup_6.2_vi.exe\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/ultraviewer.ico\" />\r\n                                    <br />Ultraviewer\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" href=\"https://www.teamviewer.com/vi/tai-xuong-tu-dong-teamviewer/\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/icon-teamviewer.png\" />\r\n                                    <br />Teamviewer\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</p-sidebar>", styles: [".HelpCenter{color:#555;padding:0 20px}::ng-deep .tn-l-sidebar-wrapper{padding:0}.tn-l-pmti{display:flex}.HelpCenter p:first-child img{margin-bottom:10px}::ng-deep .HelperSlideBar .p-sidebar-content>button{margin-top:10px;margin-right:14px;font-size:20px;color:#212529;cursor:pointer}::ng-deep .ui-sidebar{padding:0}::ng-deep .HelperSlideBar h1{margin:0;height:50px;line-height:50px;text-transform:uppercase;padding-left:20px}.HelpCenter-video{position:relative}.HelpCenter-video i{color:#454545;position:absolute;top:calc(50% - 10px);left:50%;transform:translate(-50%) translateY(-50%);cursor:pointer;transition:.5s;opacity:.5}.HelpCenter-video video{opacity:1}.HelpCenter-video:hover video{opacity:.5;cursor:pointer}.HelpCenter-video:hover i{opacity:1}.HelpCenter-download img{width:45px;height:45px}.HelpCenter .help-title{background-color:#3192e1e0;color:#fff}.HelpCenter .help-title .tit-name{font-size:14px;font-weight:700}.HelpCenter .help-content{padding:0}.HelpCenter .HelpCenter-comment .help-content{padding:0;text-align:center}.HelpCenter-video,.HelpCenter-download,.HelpCenter-comment{margin-bottom:15px}.tn-l-help-wrapper{display:flex;overflow:auto;max-height:calc(100vh - 60px)}\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: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i6.Sidebar, selector: "p-sidebar", inputs: ["position", "blockScroll", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "visible", "fullScreen", "appendTo", "style", "styleClass", "ariaCloseLabel"], outputs: ["onShow", "onHide", "visibleChange"] }, { 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: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+TnAppHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnAppHelpComponent, selector: "li[tn-app-help]", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<a href=\"javascript:;\" tabindex=\"9\" (click)=\"showHelper()\" style=\"height: 30px;\" pTooltip=\"Tr\u1EE3 gi\u00FAp\"\r\n    tooltipPosition=\"bottom\">\r\n    <span class=\"topbar-icon-left\">\r\n        <!-- <svg focusable=\"false\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"\r\n            class=\"topbar-icon animated swing svgmodule\">\r\n            <path fill=\"currentColor\"\r\n                d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z\"\r\n                class=\"\"></path>\r\n        </svg> -->\r\n        <i class=\"topbar-icon animated swing pi pi-question-circle\"></i>\r\n    </span>\r\n    <span class=\"topbar-item-name\">{{ \"Tr\u1EE3 gi\u00FAp\" | translate }}</span>\r\n</a>\r\n\r\n<p-sidebar [styleClass]=\"'HelperSlideBar tn-l-sidebar-wrapper'\" [(visible)]=\"display\" position=\"right\"\r\n    [appendTo]=\"'body'\" [style]=\"{ width: '30em', border: 0, 'max-width': '100vw' }\">\r\n    <div style=\"background-color: #fff; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);\">\r\n        <h1 style=\"font-size: 16px; color: #212529;\">Trung t\u00E2m tr\u1EE3 gi\u00FAp</h1>\r\n    </div>\r\n\r\n    <div class=\"tn-l-help-wrapper\">\r\n        <tn-custom-scrollbar #scrollbar [style]=\"{'max-height':'calc(100vh - 50px)'}\">\r\n            <div class=\"HelpCenter\">\r\n                <div class=\"p-grid\" style=\"margin-top:10px; margin-bottom: 25px;\">\r\n                    <div class=\"p-col-8\">\r\n                        <p style=\"font-weight:bold;font-size: 16px;margin-bottom: 8px; margin-top:20px\">\r\n                            {{config.expertName}}\r\n                        </p>\r\n                        <p style=\"margin: 0px;\">\r\n                            <a [href]=\"config.hrefTelephone\"><i class=\"fas fa-phone\"\r\n                                    style=\"margin-right: 8px; width: 15px\"></i>{{config.phoneNumber}}</a>\r\n                        </p>\r\n                        <p style=\"margin-top: 8px;\">\r\n                            <a [href]=\"config.hrefMail\"><i class=\"fas fa-envelope\"\r\n                                    style=\"margin-right: 8px; width: 15px\"></i>{{config.mail}}</a>\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"p-col-4\">\r\n                        <img [src]=\"config.logoCompany\" style=\"width: 100%; float: right; opacity: 0.7;\" />\r\n                    </div>\r\n                </div>\r\n                <div class=\"p-grid p-m-0 HelpCenter-download\" style=\"margin-top: 0px; margin-bottom: 40px;\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">T\u00E0i li\u1EC7u - H\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng c\u00E1c ph\u00E2n h\u1EC7 </span>\r\n                    </div>\r\n                    <div class=\"tn-l-pmti p-grid\"\r\n                        style=\"border: 1px solid #ccc; width: 100%;margin:0;margin-bottom:20px;\">\r\n                        <div *ngFor=\"let item of helps\" class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" [href]=\"item.href\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <i class=\"{{item.icon}} app-switcher-item-icon\"\r\n                                        style=\"color: rgb(44 126 210);font-size: 3.5em;padding-bottom: 10px;\"></i>\r\n                                    <br />{{item.label}}\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"p-grid p-m-0 HelpCenter-video\" style=\"margin-top: 0px\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">Xem h\u01B0\u1EDBng d\u1EABn</span>\r\n                    </div>\r\n                    <div class=\"p-col-12 help-content\">\r\n                        <h2 *ngIf=\"showHelperCurrentPageState\" style=\"margin-top: 0px\">\r\n                            <a href=\"javascript:;\" (click)=\"showHelperCurrentPage(null)\"\r\n                                style=\"display:inline-block; position: relative; border-top: 1px solid #52abf5;\">\r\n                                <img src=\"/assets/images/bgvideo.png\" alt=\"screen shot\"\r\n                                    style=\"width:100%; filter: brightness(0.88);\" />\r\n                                <i class=\"fab fa-youtube fa-2x\"></i>\r\n                            </a>\r\n                        </h2>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"p-grid p-m-0 HelpCenter-download\" style=\"margin-top: 0px; margin-bottom: 40px;\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">Ph\u1EA7n m\u1EC1m ti\u1EC7n \u00EDch</span>\r\n                    </div>\r\n                    <div class=\"tn-l-pmti\" style=\"border: 1px solid #ccc; width: 100%\">\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" [href]=\"config.linkDownloadClientApp\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/icon-appTN64x64.png\" />\r\n                                    <br />TN Client\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" href=\"https://ultraviewer.net/vi/UltraViewer_setup_6.2_vi.exe\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/ultraviewer.ico\" />\r\n                                    <br />Ultraviewer\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" href=\"https://www.teamviewer.com/vi/tai-xuong-tu-dong-teamviewer/\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/icon-teamviewer.png\" />\r\n                                    <br />Teamviewer\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</p-sidebar>", styles: [".HelpCenter{color:#555;padding:0 20px}::ng-deep .tn-l-sidebar-wrapper{padding:0}.tn-l-pmti{display:flex}.HelpCenter p:first-child img{margin-bottom:10px}::ng-deep .HelperSlideBar .p-sidebar-content>button{margin-top:10px;margin-right:14px;font-size:20px;color:#212529;cursor:pointer}::ng-deep .ui-sidebar{padding:0}::ng-deep .HelperSlideBar h1{margin:0;height:50px;line-height:50px;text-transform:uppercase;padding-left:20px}.HelpCenter-video{position:relative}.HelpCenter-video i{color:#454545;position:absolute;top:calc(50% - 10px);left:50%;transform:translate(-50%) translateY(-50%);cursor:pointer;transition:.5s;opacity:.5}.HelpCenter-video video{opacity:1}.HelpCenter-video:hover video{opacity:.5;cursor:pointer}.HelpCenter-video:hover i{opacity:1}.HelpCenter-download img{width:45px;height:45px}.HelpCenter .help-title{background-color:#3192e1e0;color:#fff}.HelpCenter .help-title .tit-name{font-size:14px;font-weight:700}.HelpCenter .help-content{padding:0}.HelpCenter .HelpCenter-comment .help-content{padding:0;text-align:center}.HelpCenter-video,.HelpCenter-download,.HelpCenter-comment{margin-bottom:15px}.tn-l-help-wrapper{display:flex;overflow:auto;max-height:calc(100vh - 60px)}\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: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { 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: "pipe", type: i8.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnAppHelpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[tn-app-help]', providers: [ComponentContextService], template: "<a href=\"javascript:;\" tabindex=\"9\" (click)=\"showHelper()\" style=\"height: 30px;\" pTooltip=\"Tr\u1EE3 gi\u00FAp\"\r\n    tooltipPosition=\"bottom\">\r\n    <span class=\"topbar-icon-left\">\r\n        <!-- <svg focusable=\"false\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"\r\n            class=\"topbar-icon animated swing svgmodule\">\r\n            <path fill=\"currentColor\"\r\n                d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z\"\r\n                class=\"\"></path>\r\n        </svg> -->\r\n        <i class=\"topbar-icon animated swing pi pi-question-circle\"></i>\r\n    </span>\r\n    <span class=\"topbar-item-name\">{{ \"Tr\u1EE3 gi\u00FAp\" | translate }}</span>\r\n</a>\r\n\r\n<p-sidebar [styleClass]=\"'HelperSlideBar tn-l-sidebar-wrapper'\" [(visible)]=\"display\" position=\"right\"\r\n    [appendTo]=\"'body'\" [style]=\"{ width: '30em', border: 0, 'max-width': '100vw' }\">\r\n    <div style=\"background-color: #fff; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);\">\r\n        <h1 style=\"font-size: 16px; color: #212529;\">Trung t\u00E2m tr\u1EE3 gi\u00FAp</h1>\r\n    </div>\r\n\r\n    <div class=\"tn-l-help-wrapper\">\r\n        <tn-custom-scrollbar #scrollbar [style]=\"{'max-height':'calc(100vh - 50px)'}\">\r\n            <div class=\"HelpCenter\">\r\n                <div class=\"p-grid\" style=\"margin-top:10px; margin-bottom: 25px;\">\r\n                    <div class=\"p-col-8\">\r\n                        <p style=\"font-weight:bold;font-size: 16px;margin-bottom: 8px; margin-top:20px\">\r\n                            {{config.expertName}}\r\n                        </p>\r\n                        <p style=\"margin: 0px;\">\r\n                            <a [href]=\"config.hrefTelephone\"><i class=\"fas fa-phone\"\r\n                                    style=\"margin-right: 8px; width: 15px\"></i>{{config.phoneNumber}}</a>\r\n                        </p>\r\n                        <p style=\"margin-top: 8px;\">\r\n                            <a [href]=\"config.hrefMail\"><i class=\"fas fa-envelope\"\r\n                                    style=\"margin-right: 8px; width: 15px\"></i>{{config.mail}}</a>\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"p-col-4\">\r\n                        <img [src]=\"config.logoCompany\" style=\"width: 100%; float: right; opacity: 0.7;\" />\r\n                    </div>\r\n                </div>\r\n                <div class=\"p-grid p-m-0 HelpCenter-download\" style=\"margin-top: 0px; margin-bottom: 40px;\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">T\u00E0i li\u1EC7u - H\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng c\u00E1c ph\u00E2n h\u1EC7 </span>\r\n                    </div>\r\n                    <div class=\"tn-l-pmti p-grid\"\r\n                        style=\"border: 1px solid #ccc; width: 100%;margin:0;margin-bottom:20px;\">\r\n                        <div *ngFor=\"let item of helps\" class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" [href]=\"item.href\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <i class=\"{{item.icon}} app-switcher-item-icon\"\r\n                                        style=\"color: rgb(44 126 210);font-size: 3.5em;padding-bottom: 10px;\"></i>\r\n                                    <br />{{item.label}}\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"p-grid p-m-0 HelpCenter-video\" style=\"margin-top: 0px\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">Xem h\u01B0\u1EDBng d\u1EABn</span>\r\n                    </div>\r\n                    <div class=\"p-col-12 help-content\">\r\n                        <h2 *ngIf=\"showHelperCurrentPageState\" style=\"margin-top: 0px\">\r\n                            <a href=\"javascript:;\" (click)=\"showHelperCurrentPage(null)\"\r\n                                style=\"display:inline-block; position: relative; border-top: 1px solid #52abf5;\">\r\n                                <img src=\"/assets/images/bgvideo.png\" alt=\"screen shot\"\r\n                                    style=\"width:100%; filter: brightness(0.88);\" />\r\n                                <i class=\"fab fa-youtube fa-2x\"></i>\r\n                            </a>\r\n                        </h2>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"p-grid p-m-0 HelpCenter-download\" style=\"margin-top: 0px; margin-bottom: 40px;\">\r\n                    <div class=\"p-col-12 help-title\">\r\n                        <span class=\"tit-name\">Ph\u1EA7n m\u1EC1m ti\u1EC7n \u00EDch</span>\r\n                    </div>\r\n                    <div class=\"tn-l-pmti\" style=\"border: 1px solid #ccc; width: 100%\">\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" [href]=\"config.linkDownloadClientApp\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/icon-appTN64x64.png\" />\r\n                                    <br />TN Client\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" href=\"https://ultraviewer.net/vi/UltraViewer_setup_6.2_vi.exe\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/ultraviewer.ico\" />\r\n                                    <br />Ultraviewer\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"p-col-4 help-content\">\r\n                            <p style=\"margin-top: 18px; text-align: center;\">\r\n                                <a target=\"_blank\" href=\"https://www.teamviewer.com/vi/tai-xuong-tu-dong-teamviewer/\"\r\n                                    style=\"display: inline-block; text-align: center;\">\r\n                                    <img src=\"/assets/images/icon-teamviewer.png\" />\r\n                                    <br />Teamviewer\r\n                                </a>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </tn-custom-scrollbar>\r\n    </div>\r\n</p-sidebar>", styles: [".HelpCenter{color:#555;padding:0 20px}::ng-deep .tn-l-sidebar-wrapper{padding:0}.tn-l-pmti{display:flex}.HelpCenter p:first-child img{margin-bottom:10px}::ng-deep .HelperSlideBar .p-sidebar-content>button{margin-top:10px;margin-right:14px;font-size:20px;color:#212529;cursor:pointer}::ng-deep .ui-sidebar{padding:0}::ng-deep .HelperSlideBar h1{margin:0;height:50px;line-height:50px;text-transform:uppercase;padding-left:20px}.HelpCenter-video{position:relative}.HelpCenter-video i{color:#454545;position:absolute;top:calc(50% - 10px);left:50%;transform:translate(-50%) translateY(-50%);cursor:pointer;transition:.5s;opacity:.5}.HelpCenter-video video{opacity:1}.HelpCenter-video:hover video{opacity:.5;cursor:pointer}.HelpCenter-video:hover i{opacity:1}.HelpCenter-download img{width:45px;height:45px}.HelpCenter .help-title{background-color:#3192e1e0;color:#fff}.HelpCenter .help-title .tit-name{font-size:14px;font-weight:700}.HelpCenter .help-content{padding:0}.HelpCenter .HelpCenter-comment .help-content{padding:0;text-align:center}.HelpCenter-video,.HelpCenter-download,.HelpCenter-comment{margin-bottom:15px}.tn-l-help-wrapper{display:flex;overflow:auto;max-height:calc(100vh - 60px)}\n"] }]

package/esm2020/components/tn-app-notification/tn-app-notification.component.mjs CHANGED Viewed

@@ -222,7 +222,7 @@ export class TnAppNotificationComponent extends ComponentBase {
     }
 }
 TnAppNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnAppNotificationComponent, deps: [{ token: i1.SignalRService }, { token: i2.UserV5Service }, { token: i3.NotificationService }, { token: i4.Router }, { token: i5.EnvironmentService }, { token: i6.CrudService }, { token: i7.NotifierService }, { token: i8.CustomRouterService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TnAppNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnAppNotificationComponent, selector: "li[tn-app-notification]", outputs: { openMenu: "openMenu" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "notificationDetail", first: true, predicate: ["notificationdetail"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a href=\"#\" tabindex=\"8\" (click)=\"openMenuEvent($event)\" pTooltip=\"Th\u00F4ng b\u00E1o\" tooltipPosition=\"bottom\"\r\n    style=\"height: 30px;\">\r\n    <span class=\"topbar-icon-left\">\r\n        <i class=\"topbar-icon animated swing pi pi-bell\"></i>\r\n    </span>\r\n    <span class=\"topbar-badge animated rubberBand\" *ngIf=\"totalUnRead > 0\"\r\n        [ngClass]=\"{'topbar-badge-bounce': bounceNoti}\">{{totalUnRead}}</span>\r\n    <span class=\"topbar-item-name\">Th\u00F4ng b\u00E1o</span>\r\n</a>\r\n<ul class=\"fadeInDown custom-notification\">\r\n    <div class=\"noti-header\" (click)=\"headerClick($event)\">\r\n        <div class=\"ui-toolbar-group-center button-group master-title-notification\">\r\n            <span style=\"float: left; color: #666;\">Th\u00F4ng b\u00E1o</span>\r\n            <div class=\"circleButton\" pTooltip=\"\u0110\u00E1nh d\u1EA5u t\u1EA5t c\u1EA3 l\u00E0 \u0111\u00E3 \u0111\u1ECDc\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\" (click)=\"readAll($event)\"><i class=\"fas fa-flag-checkered\"></i></a>\r\n            </div>\r\n            <div class=\"circleButton\" pTooltip=\"C\u1EA5u h\u00ECnh th\u00F4ng b\u00E1o\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\"><i class=\"fas fa-cog\"></i></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <tn-custom-scrollbar #scrollbar [style]=\"{'width': '100%', 'height': '350px'}\" [class]=\"'notification-box-detail'\">\r\n        <div role=\"menuitem\" *ngFor=\"let item of notifications\" class=\"noti-item\" [class.un-read]=\"!item.readedTime\">\r\n            <a href=\"javascript:\" (click)=\"goToLink(item)\" class=\"topbar-message\">\r\n                <div class=\"p-grid\">\r\n                    <div class=\"noti-avatar p-md-2\">\r\n                        <i *ngIf=\"!isHasAvatar(item)\" class=\"fas fa-globe-asia\"></i>\r\n                        <img *ngIf=\"isHasAvatar(item)\" src=\"{{getCurrentUserAvatar(item.avatarId)}}\" />\r\n                    </div>\r\n                    <div class=\"noti-content p-md-10\">\r\n                        <div class=\"noti-title\" [innerHTML]=\"item.messageTitle | summary : 40\"></div>\r\n                        <div class=\"noti-message\" [innerHTML]=\"item.messageContent | summary : 40\"></div>\r\n                        <div class=\"noti-time\">\r\n                            <span pTooltip=\"{{item.created | date:'dd/MM/yyyy HH:mm'}}\" tooltipPosition=\"top\">\r\n                                <i style=\"font-size: 1em;\" class=\"pi pi-clock\"></i>\r\n                                {{_crudService.renderDateTime(item.created)}}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </a>\r\n        </div>\r\n    </tn-custom-scrollbar>\r\n    <div class=\"noti-footer\">\r\n        <a href=\"javascript:;\" style=\"font-size: 14px\" (click)=\"handleClicked()\">\r\n            <span>\r\n                <i class=\"pi pi-chevron-down\" style=\"font-size: 0.9em; margin-right: 3px\"></i>\r\n                Xem t\u1EA5t c\u1EA3\r\n            </span>\r\n        </a>\r\n    </div>\r\n</ul>", styles: [".noti-item{border-bottom:1px solid #eee;box-sizing:border-box}.noti-item .noti-message{color:#aaa}.noti-item .noti-message b,.noti-item .noti-message strong{color:#888}.noti-item.un-read{background:#e6f6e6;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;margin-top:-1px}.noti-item.un-read .noti-message{color:#777}.noti-item.un-read .noti-message b,.noti-item.un-read .noti-message strong{color:#555}.noti-item.un-read .noti-avatar i{color:#888!important}.noti-item.un-read img{filter:grayscale(0)}.noti-item a:hover{background-color:#ffffeb!important}.noti-item img{filter:grayscale(.6)}.noti-item.un-read .noti-content .noti-time{color:#444}.layout-wrapper .topbar-items>li>ul.custom-notification{width:350px;top:47px;right:-7px}.layout-wrapper .topbar-items>li>ul.custom-notification:before{right:15px}.noti-content{font-size:.95em}.noti-content .noti-title{font-weight:700;margin-bottom:.25em}.noti-content .noti-message{margin-bottom:0;font-size:.9em;line-height:18px;text-align:left;margin-top:0;-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.noti-content .noti-message p{margin:0}.noti-content .noti-time{margin-top:2px;font-size:.8em;font-weight:700}.noti-header{font-size:.9em;box-sizing:border-box;border-bottom:1px solid #ddd}.noti-header a{font-weight:700}.noti-header a:hover{background:none}.layout-wrapper .layout-menu li div.noti-time i:first-child{margin-right:0;width:15px;line-height:15px}.noti-avatar img{width:50px;margin-top:-2px;border:0;height:50px;border-radius:50%;box-shadow:0 1px 2px #00000030}.noti-avatar i{font-size:50px!important;color:#d4d4d4!important;margin-top:-2px;text-shadow:0 1px 2px rgba(0,0,0,.19)}.custom-notification{width:360px!important}.notifications{min-width:390px;padding-top:0;padding-bottom:0;top:43px!important;position:absolute;right:0px;border:1px solid #d5d5d5!important;box-shadow:0 1px 3px #0000004d;border-radius:3px}.notifications .notifications-wrapper{display:block;margin:0;outline:none;position:relative;text-decoration:none}.notifications .notifications-wrapper .notifications-header{background-clip:padding-box;background-color:#fff;border-bottom:solid 1px #dddfe2;border-top-left-radius:3px;border-top-right-radius:3px;padding:0 12px;position:relative;z-index:100;float:left;width:100%;font-size:11.5px}.notifications .notifications-wrapper .notifications-header span{color:#333!important;font-weight:700}.notifications .notifications-wrapper .notifications-header .notifications-title{float:left;width:30%;margin-top:6px}.notifications .notifications-wrapper .notifications-body{display:block;position:relative;float:left;width:100%;background-color:#fff}.notifications .notifications-wrapper .notifications-body img{float:left;margin:0 5px;border-radius:50%;overflow:hidden;width:38px;height:38px}.notifications .notifications-wrapper .notifications-body a:hover{background-color:#edf2fa;background-image:linear-gradient(rgba(29,33,41,.04),rgba(29,33,41,.04))!important}.notifications .notifications-wrapper .notifications-footer{background-color:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top:1px solid #dddfe2;display:block;font-weight:600;position:relative;text-align:center;z-index:100;float:left;width:100%;font-size:11.5px;background-color:#337ab7}.notifications .notifications-wrapper .notifications-footer a{font-weight:700;text-align:center;color:#fff;border:0px solid;padding-top:3px;padding-bottom:3px}.notifications .notifications-wrapper .notifications-footer a:hover{background:inherit}.notifications .notifications-wrapper .notifications-footer:hover{background-color:#2d6da3}.notifications a{position:relative;width:100%;float:left;border-bottom:1px solid #ccc;text-decoration:none;padding:5px;color:#1d2129;background:#fff}.notifications .un-read{background-color:#edf2fa}.notifications .title{font-weight:700;display:block;font-size:10.5px}.notifications .time{font-size:9.5px;display:block}.navbar-nav .badge{position:absolute;border-radius:50%;min-height:20px;min-width:20px;top:9px;left:10px;cursor:pointer}.badge-danger{color:#fff;background-color:#d50000;position:absolute;right:-14px;top:10px;cursor:pointer}.notifications-setting{display:flex;display:-webkit-flex;float:right;width:60%}.notifications-setting span{font-weight:400!important}.notifications-setting a{border-bottom:none}.notifications-setting a:hover{color:#3992e6;background-color:#fff!important}.notifications-body{height:300px;overflow:hidden;overflow-y:scroll}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.notifications-body a{white-space:normal}.notifications-content{float:left;width:80%;margin-left:10px}.content{font-size:10px}:host ::ng-deep .notification-box-detail{border:none}:host ::ng-deep .notification-box-detail .ui-scrollpanel-content{padding:0 1px 0 0}.custom-notification{list-style:none;padding:0}.custom-notification li a i:first-child{color:#777}.custom-notification .master-title-notification{height:40px;line-height:40px;padding-right:10px;padding-left:10px;display:flex;align-items:center}.custom-notification .master-title-notification>span{flex:1 1;text-align:left}.custom-notification .master-title-notification>div.circleButton{flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center}.custom-notification .master-title-notification>div.circleButton a{color:gray}.custom-notification .noti-item{padding:1rem 1rem .5rem}.custom-notification .noti-item .noti-content .noti-time{color:#777}.custom-notification .noti-item.un-read .noti-content .noti-time{color:#318bff}.custom-notification .noti-footer>a{padding:0;height:30px;display:flex;align-items:center;justify-content:center;color:#fff;background:#397ac3}.noti-avatar{width:auto}.noti-content{flex:1 1}@media (max-width: 1024px){.topbar-icon.fa-bell{position:relative;left:5px}}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i11.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i9.DatePipe, name: "date" }, { kind: "pipe", type: i12.SummaryPipe, name: "summary" }] });
+TnAppNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnAppNotificationComponent, selector: "li[tn-app-notification]", outputs: { openMenu: "openMenu" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "notificationDetail", first: true, predicate: ["notificationdetail"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a href=\"#\" tabindex=\"8\" (click)=\"openMenuEvent($event)\" pTooltip=\"Th\u00F4ng b\u00E1o\" tooltipPosition=\"bottom\"\r\n    style=\"height: 30px;\">\r\n    <span class=\"topbar-icon-left\">\r\n        <i class=\"topbar-icon animated swing pi pi-bell\"></i>\r\n    </span>\r\n    <span class=\"topbar-badge animated rubberBand\" *ngIf=\"totalUnRead > 0\"\r\n        [ngClass]=\"{'topbar-badge-bounce': bounceNoti}\">{{totalUnRead}}</span>\r\n    <span class=\"topbar-item-name\">Th\u00F4ng b\u00E1o</span>\r\n</a>\r\n<ul class=\"fadeInDown custom-notification\">\r\n    <div class=\"noti-header\" (click)=\"headerClick($event)\">\r\n        <div class=\"ui-toolbar-group-center button-group master-title-notification\">\r\n            <span style=\"float: left; color: #666;\">Th\u00F4ng b\u00E1o</span>\r\n            <div class=\"circleButton\" pTooltip=\"\u0110\u00E1nh d\u1EA5u t\u1EA5t c\u1EA3 l\u00E0 \u0111\u00E3 \u0111\u1ECDc\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\" (click)=\"readAll($event)\"><i class=\"fas fa-flag-checkered\"></i></a>\r\n            </div>\r\n            <div class=\"circleButton\" pTooltip=\"C\u1EA5u h\u00ECnh th\u00F4ng b\u00E1o\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\"><i class=\"fas fa-cog\"></i></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <tn-custom-scrollbar #scrollbar [style]=\"{'width': '100%', 'height': '350px'}\" [class]=\"'notification-box-detail'\">\r\n        <div role=\"menuitem\" *ngFor=\"let item of notifications\" class=\"noti-item\" [class.un-read]=\"!item.readedTime\">\r\n            <a href=\"javascript:\" (click)=\"goToLink(item)\" class=\"topbar-message\">\r\n                <div class=\"p-grid\">\r\n                    <div class=\"noti-avatar p-md-2\">\r\n                        <i *ngIf=\"!isHasAvatar(item)\" class=\"fas fa-globe-asia\"></i>\r\n                        <img *ngIf=\"isHasAvatar(item)\" src=\"{{getCurrentUserAvatar(item.avatarId)}}\" />\r\n                    </div>\r\n                    <div class=\"noti-content p-md-10\">\r\n                        <div class=\"noti-title\" [innerHTML]=\"item.messageTitle | summary : 40\"></div>\r\n                        <div class=\"noti-message\" [innerHTML]=\"item.messageContent | summary : 40\"></div>\r\n                        <div class=\"noti-time\">\r\n                            <span pTooltip=\"{{item.created | date:'dd/MM/yyyy HH:mm'}}\" tooltipPosition=\"top\">\r\n                                <i style=\"font-size: 1em;\" class=\"pi pi-clock\"></i>\r\n                                {{_crudService.renderDateTime(item.created)}}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </a>\r\n        </div>\r\n    </tn-custom-scrollbar>\r\n    <div class=\"noti-footer\">\r\n        <a href=\"javascript:;\" style=\"font-size: 14px\" (click)=\"handleClicked()\">\r\n            <span>\r\n                <i class=\"pi pi-chevron-down\" style=\"font-size: 0.9em; margin-right: 3px\"></i>\r\n                Xem t\u1EA5t c\u1EA3\r\n            </span>\r\n        </a>\r\n    </div>\r\n</ul>", styles: [".noti-item{border-bottom:1px solid #eee;box-sizing:border-box}.noti-item .noti-message{color:#aaa}.noti-item .noti-message b,.noti-item .noti-message strong{color:#888}.noti-item.un-read{background:#e6f6e6;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;margin-top:-1px}.noti-item.un-read .noti-message{color:#777}.noti-item.un-read .noti-message b,.noti-item.un-read .noti-message strong{color:#555}.noti-item.un-read .noti-avatar i{color:#888!important}.noti-item.un-read img{filter:grayscale(0)}.noti-item a:hover{background-color:#ffffeb!important}.noti-item img{filter:grayscale(.6)}.noti-item.un-read .noti-content .noti-time{color:#444}.layout-wrapper .topbar-items>li>ul.custom-notification{width:350px;top:47px;right:-7px}.layout-wrapper .topbar-items>li>ul.custom-notification:before{right:15px}.noti-content{font-size:.95em}.noti-content .noti-title{font-weight:700;margin-bottom:.25em}.noti-content .noti-message{margin-bottom:0;font-size:.9em;line-height:18px;text-align:left;margin-top:0;-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.noti-content .noti-message p{margin:0}.noti-content .noti-time{margin-top:2px;font-size:.8em;font-weight:700}.noti-header{font-size:.9em;box-sizing:border-box;border-bottom:1px solid #ddd}.noti-header a{font-weight:700}.noti-header a:hover{background:none}.layout-wrapper .layout-menu li div.noti-time i:first-child{margin-right:0;width:15px;line-height:15px}.noti-avatar img{width:50px;margin-top:-2px;border:0;height:50px;border-radius:50%;box-shadow:0 1px 2px #00000030}.noti-avatar i{font-size:50px!important;color:#d4d4d4!important;margin-top:-2px;text-shadow:0 1px 2px rgba(0,0,0,.19)}.custom-notification{width:360px!important}.notifications{min-width:390px;padding-top:0;padding-bottom:0;top:43px!important;position:absolute;right:0px;border:1px solid #d5d5d5!important;box-shadow:0 1px 3px #0000004d;border-radius:3px}.notifications .notifications-wrapper{display:block;margin:0;outline:none;position:relative;text-decoration:none}.notifications .notifications-wrapper .notifications-header{background-clip:padding-box;background-color:#fff;border-bottom:solid 1px #dddfe2;border-top-left-radius:3px;border-top-right-radius:3px;padding:0 12px;position:relative;z-index:100;float:left;width:100%;font-size:11.5px}.notifications .notifications-wrapper .notifications-header span{color:#333!important;font-weight:700}.notifications .notifications-wrapper .notifications-header .notifications-title{float:left;width:30%;margin-top:6px}.notifications .notifications-wrapper .notifications-body{display:block;position:relative;float:left;width:100%;background-color:#fff}.notifications .notifications-wrapper .notifications-body img{float:left;margin:0 5px;border-radius:50%;overflow:hidden;width:38px;height:38px}.notifications .notifications-wrapper .notifications-body a:hover{background-color:#edf2fa;background-image:linear-gradient(rgba(29,33,41,.04),rgba(29,33,41,.04))!important}.notifications .notifications-wrapper .notifications-footer{background-color:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top:1px solid #dddfe2;display:block;font-weight:600;position:relative;text-align:center;z-index:100;float:left;width:100%;font-size:11.5px;background-color:#337ab7}.notifications .notifications-wrapper .notifications-footer a{font-weight:700;text-align:center;color:#fff;border:0px solid;padding-top:3px;padding-bottom:3px}.notifications .notifications-wrapper .notifications-footer a:hover{background:inherit}.notifications .notifications-wrapper .notifications-footer:hover{background-color:#2d6da3}.notifications a{position:relative;width:100%;float:left;border-bottom:1px solid #ccc;text-decoration:none;padding:5px;color:#1d2129;background:#fff}.notifications .un-read{background-color:#edf2fa}.notifications .title{font-weight:700;display:block;font-size:10.5px}.notifications .time{font-size:9.5px;display:block}.navbar-nav .badge{position:absolute;border-radius:50%;min-height:20px;min-width:20px;top:9px;left:10px;cursor:pointer}.badge-danger{color:#fff;background-color:#d50000;position:absolute;right:-14px;top:10px;cursor:pointer}.notifications-setting{display:flex;display:-webkit-flex;float:right;width:60%}.notifications-setting span{font-weight:400!important}.notifications-setting a{border-bottom:none}.notifications-setting a:hover{color:#3992e6;background-color:#fff!important}.notifications-body{height:300px;overflow:hidden;overflow-y:scroll}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.notifications-body a{white-space:normal}.notifications-content{float:left;width:80%;margin-left:10px}.content{font-size:10px}:host ::ng-deep .notification-box-detail{border:none}:host ::ng-deep .notification-box-detail .ui-scrollpanel-content{padding:0 1px 0 0}.custom-notification{list-style:none;padding:0}.custom-notification li a i:first-child{color:#777}.custom-notification .master-title-notification{height:40px;line-height:40px;padding-right:10px;padding-left:10px;display:flex;align-items:center}.custom-notification .master-title-notification>span{flex:1 1;text-align:left}.custom-notification .master-title-notification>div.circleButton{flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center}.custom-notification .master-title-notification>div.circleButton a{color:gray}.custom-notification .noti-item{padding:1rem 1rem .5rem}.custom-notification .noti-item .noti-content .noti-time{color:#777}.custom-notification .noti-item.un-read .noti-content .noti-time{color:#318bff}.custom-notification .noti-footer>a{padding:0;height:30px;display:flex;align-items:center;justify-content:center;color:#fff;background:#397ac3}.noti-avatar{width:auto}.noti-content{flex:1 1}@media (max-width: 1024px){.topbar-icon.fa-bell{position:relative;left:5px}}\n"], dependencies: [{ kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i9.DatePipe, name: "date" }, { kind: "pipe", type: i12.SummaryPipe, name: "summary" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnAppNotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[tn-app-notification]', providers: [ComponentContextService], template: "<a href=\"#\" tabindex=\"8\" (click)=\"openMenuEvent($event)\" pTooltip=\"Th\u00F4ng b\u00E1o\" tooltipPosition=\"bottom\"\r\n    style=\"height: 30px;\">\r\n    <span class=\"topbar-icon-left\">\r\n        <i class=\"topbar-icon animated swing pi pi-bell\"></i>\r\n    </span>\r\n    <span class=\"topbar-badge animated rubberBand\" *ngIf=\"totalUnRead > 0\"\r\n        [ngClass]=\"{'topbar-badge-bounce': bounceNoti}\">{{totalUnRead}}</span>\r\n    <span class=\"topbar-item-name\">Th\u00F4ng b\u00E1o</span>\r\n</a>\r\n<ul class=\"fadeInDown custom-notification\">\r\n    <div class=\"noti-header\" (click)=\"headerClick($event)\">\r\n        <div class=\"ui-toolbar-group-center button-group master-title-notification\">\r\n            <span style=\"float: left; color: #666;\">Th\u00F4ng b\u00E1o</span>\r\n            <div class=\"circleButton\" pTooltip=\"\u0110\u00E1nh d\u1EA5u t\u1EA5t c\u1EA3 l\u00E0 \u0111\u00E3 \u0111\u1ECDc\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\" (click)=\"readAll($event)\"><i class=\"fas fa-flag-checkered\"></i></a>\r\n            </div>\r\n            <div class=\"circleButton\" pTooltip=\"C\u1EA5u h\u00ECnh th\u00F4ng b\u00E1o\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\"><i class=\"fas fa-cog\"></i></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <tn-custom-scrollbar #scrollbar [style]=\"{'width': '100%', 'height': '350px'}\" [class]=\"'notification-box-detail'\">\r\n        <div role=\"menuitem\" *ngFor=\"let item of notifications\" class=\"noti-item\" [class.un-read]=\"!item.readedTime\">\r\n            <a href=\"javascript:\" (click)=\"goToLink(item)\" class=\"topbar-message\">\r\n                <div class=\"p-grid\">\r\n                    <div class=\"noti-avatar p-md-2\">\r\n                        <i *ngIf=\"!isHasAvatar(item)\" class=\"fas fa-globe-asia\"></i>\r\n                        <img *ngIf=\"isHasAvatar(item)\" src=\"{{getCurrentUserAvatar(item.avatarId)}}\" />\r\n                    </div>\r\n                    <div class=\"noti-content p-md-10\">\r\n                        <div class=\"noti-title\" [innerHTML]=\"item.messageTitle | summary : 40\"></div>\r\n                        <div class=\"noti-message\" [innerHTML]=\"item.messageContent | summary : 40\"></div>\r\n                        <div class=\"noti-time\">\r\n                            <span pTooltip=\"{{item.created | date:'dd/MM/yyyy HH:mm'}}\" tooltipPosition=\"top\">\r\n                                <i style=\"font-size: 1em;\" class=\"pi pi-clock\"></i>\r\n                                {{_crudService.renderDateTime(item.created)}}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </a>\r\n        </div>\r\n    </tn-custom-scrollbar>\r\n    <div class=\"noti-footer\">\r\n        <a href=\"javascript:;\" style=\"font-size: 14px\" (click)=\"handleClicked()\">\r\n            <span>\r\n                <i class=\"pi pi-chevron-down\" style=\"font-size: 0.9em; margin-right: 3px\"></i>\r\n                Xem t\u1EA5t c\u1EA3\r\n            </span>\r\n        </a>\r\n    </div>\r\n</ul>", styles: [".noti-item{border-bottom:1px solid #eee;box-sizing:border-box}.noti-item .noti-message{color:#aaa}.noti-item .noti-message b,.noti-item .noti-message strong{color:#888}.noti-item.un-read{background:#e6f6e6;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;margin-top:-1px}.noti-item.un-read .noti-message{color:#777}.noti-item.un-read .noti-message b,.noti-item.un-read .noti-message strong{color:#555}.noti-item.un-read .noti-avatar i{color:#888!important}.noti-item.un-read img{filter:grayscale(0)}.noti-item a:hover{background-color:#ffffeb!important}.noti-item img{filter:grayscale(.6)}.noti-item.un-read .noti-content .noti-time{color:#444}.layout-wrapper .topbar-items>li>ul.custom-notification{width:350px;top:47px;right:-7px}.layout-wrapper .topbar-items>li>ul.custom-notification:before{right:15px}.noti-content{font-size:.95em}.noti-content .noti-title{font-weight:700;margin-bottom:.25em}.noti-content .noti-message{margin-bottom:0;font-size:.9em;line-height:18px;text-align:left;margin-top:0;-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.noti-content .noti-message p{margin:0}.noti-content .noti-time{margin-top:2px;font-size:.8em;font-weight:700}.noti-header{font-size:.9em;box-sizing:border-box;border-bottom:1px solid #ddd}.noti-header a{font-weight:700}.noti-header a:hover{background:none}.layout-wrapper .layout-menu li div.noti-time i:first-child{margin-right:0;width:15px;line-height:15px}.noti-avatar img{width:50px;margin-top:-2px;border:0;height:50px;border-radius:50%;box-shadow:0 1px 2px #00000030}.noti-avatar i{font-size:50px!important;color:#d4d4d4!important;margin-top:-2px;text-shadow:0 1px 2px rgba(0,0,0,.19)}.custom-notification{width:360px!important}.notifications{min-width:390px;padding-top:0;padding-bottom:0;top:43px!important;position:absolute;right:0px;border:1px solid #d5d5d5!important;box-shadow:0 1px 3px #0000004d;border-radius:3px}.notifications .notifications-wrapper{display:block;margin:0;outline:none;position:relative;text-decoration:none}.notifications .notifications-wrapper .notifications-header{background-clip:padding-box;background-color:#fff;border-bottom:solid 1px #dddfe2;border-top-left-radius:3px;border-top-right-radius:3px;padding:0 12px;position:relative;z-index:100;float:left;width:100%;font-size:11.5px}.notifications .notifications-wrapper .notifications-header span{color:#333!important;font-weight:700}.notifications .notifications-wrapper .notifications-header .notifications-title{float:left;width:30%;margin-top:6px}.notifications .notifications-wrapper .notifications-body{display:block;position:relative;float:left;width:100%;background-color:#fff}.notifications .notifications-wrapper .notifications-body img{float:left;margin:0 5px;border-radius:50%;overflow:hidden;width:38px;height:38px}.notifications .notifications-wrapper .notifications-body a:hover{background-color:#edf2fa;background-image:linear-gradient(rgba(29,33,41,.04),rgba(29,33,41,.04))!important}.notifications .notifications-wrapper .notifications-footer{background-color:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top:1px solid #dddfe2;display:block;font-weight:600;position:relative;text-align:center;z-index:100;float:left;width:100%;font-size:11.5px;background-color:#337ab7}.notifications .notifications-wrapper .notifications-footer a{font-weight:700;text-align:center;color:#fff;border:0px solid;padding-top:3px;padding-bottom:3px}.notifications .notifications-wrapper .notifications-footer a:hover{background:inherit}.notifications .notifications-wrapper .notifications-footer:hover{background-color:#2d6da3}.notifications a{position:relative;width:100%;float:left;border-bottom:1px solid #ccc;text-decoration:none;padding:5px;color:#1d2129;background:#fff}.notifications .un-read{background-color:#edf2fa}.notifications .title{font-weight:700;display:block;font-size:10.5px}.notifications .time{font-size:9.5px;display:block}.navbar-nav .badge{position:absolute;border-radius:50%;min-height:20px;min-width:20px;top:9px;left:10px;cursor:pointer}.badge-danger{color:#fff;background-color:#d50000;position:absolute;right:-14px;top:10px;cursor:pointer}.notifications-setting{display:flex;display:-webkit-flex;float:right;width:60%}.notifications-setting span{font-weight:400!important}.notifications-setting a{border-bottom:none}.notifications-setting a:hover{color:#3992e6;background-color:#fff!important}.notifications-body{height:300px;overflow:hidden;overflow-y:scroll}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.notifications-body a{white-space:normal}.notifications-content{float:left;width:80%;margin-left:10px}.content{font-size:10px}:host ::ng-deep .notification-box-detail{border:none}:host ::ng-deep .notification-box-detail .ui-scrollpanel-content{padding:0 1px 0 0}.custom-notification{list-style:none;padding:0}.custom-notification li a i:first-child{color:#777}.custom-notification .master-title-notification{height:40px;line-height:40px;padding-right:10px;padding-left:10px;display:flex;align-items:center}.custom-notification .master-title-notification>span{flex:1 1;text-align:left}.custom-notification .master-title-notification>div.circleButton{flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center}.custom-notification .master-title-notification>div.circleButton a{color:gray}.custom-notification .noti-item{padding:1rem 1rem .5rem}.custom-notification .noti-item .noti-content .noti-time{color:#777}.custom-notification .noti-item.un-read .noti-content .noti-time{color:#318bff}.custom-notification .noti-footer>a{padding:0;height:30px;display:flex;align-items:center;justify-content:center;color:#fff;background:#397ac3}.noti-avatar{width:auto}.noti-content{flex:1 1}@media (max-width: 1024px){.topbar-icon.fa-bell{position:relative;left:5px}}\n"] }]

package/esm2020/components/tn-checkbox/tn-checkbox.component.mjs CHANGED Viewed

@@ -42,7 +42,7 @@ TnCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             multi: true
         },
         ComponentContextService
-    ], viewQueries: [{ propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-checkbox [disabled]=\"disabled\" [(ngModel)]=\"model.value\" [label]=\"!control.hiddenLabel ? control.label : null\"\r\n    (onChange)=\"handleChange($event)\" [binary]=\"true\">\r\n</p-checkbox>", styles: ["::ng-deep body .p-inputgroup.tn-color-picker .p-inputgroup-addon{padding:unset;border-color:#ccc!important;padding:2px}::ng-deep body .p-inputgroup.tn-color-picker .p-inputtext{max-width:100px}::ng-deep body .p-inputgroup.tn-color-picker .p-colorpicker-preview{border:none;border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }] });
+    ], viewQueries: [{ propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-checkbox [disabled]=\"disabled\" [(ngModel)]=\"model.value\" [label]=\"!control.hiddenLabel ? control.label : null\"\r\n    (onChange)=\"handleChange($event)\" [binary]=\"true\">\r\n</p-checkbox>", styles: ["::ng-deep body .p-inputgroup.tn-color-picker .p-inputgroup-addon{padding:unset;border-color:#ccc!important;padding:2px}::ng-deep body .p-inputgroup.tn-color-picker .p-inputtext{max-width:100px}::ng-deep body .p-inputgroup.tn-color-picker .p-colorpicker-preview{border:none;border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-checkbox', providers: [

package/esm2020/components/tn-color-picker/tn-color-picker.component.mjs CHANGED Viewed

@@ -55,7 +55,7 @@ TnColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             multi: true
         },
         ComponentContextService
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"p-inputgroup tn-color-picker\">\r\n    <div class=\"p-inputgroup-addon\">\r\n        <p-colorPicker [appendTo]=\"appendTo\" [(ngModel)]=\"model.value\" (onChange)=\"changePicker($event);\" [disabled]=\"disabled\"\r\n            [ngStyle]=\"{'max-width':'40px', display:'inline-block'}\"></p-colorPicker>\r\n    </div>\r\n    <input type=\"text\" pInputText [(ngModel)]=\"model.inputValue\" [disabled]=\"disabled\" (keyup)=\"changeInput($event)\" />\r\n</div>", styles: ["::ng-deep body .p-inputgroup.tn-color-picker .p-inputgroup-addon{padding:unset;border-color:#ccc!important;padding:2px}::ng-deep body .p-inputgroup.tn-color-picker .p-inputtext{max-width:100px}::ng-deep body .p-inputgroup.tn-color-picker .p-colorpicker-preview{border:none;border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]" }, { kind: "component", type: i4.ColorPicker, selector: "p-colorPicker", inputs: ["format", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "disabled", "style", "styleClass", "inline", "appendTo", "tabindex", "inputId"], outputs: ["onChange", "onShow", "onHide"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"p-inputgroup tn-color-picker\">\r\n    <div class=\"p-inputgroup-addon\">\r\n        <p-colorPicker [appendTo]=\"appendTo\" [(ngModel)]=\"model.value\" (onChange)=\"changePicker($event);\" [disabled]=\"disabled\"\r\n            [ngStyle]=\"{'max-width':'40px', display:'inline-block'}\"></p-colorPicker>\r\n    </div>\r\n    <input type=\"text\" pInputText [(ngModel)]=\"model.inputValue\" [disabled]=\"disabled\" (keyup)=\"changeInput($event)\" />\r\n</div>", styles: ["::ng-deep body .p-inputgroup.tn-color-picker .p-inputgroup-addon{padding:unset;border-color:#ccc!important;padding:2px}::ng-deep body .p-inputgroup.tn-color-picker .p-inputtext{max-width:100px}::ng-deep body .p-inputgroup.tn-color-picker .p-colorpicker-preview{border:none;border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]" }, { kind: "component", type: i4.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-color-picker', providers: [

package/esm2020/components/tn-dialog/tn-dialog.component.mjs CHANGED Viewed

@@ -101,7 +101,7 @@ export class TnDialogComponent {
     }
 }
 TnDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnDialogComponent, deps: [{ token: i0.Injector }, { token: i1.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
-TnDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnDialogComponent, selector: "tn-dialog", inputs: { maskClass: "maskClass", styleClass: "styleClass", scrollBarStyleClass: "scrollBarStyleClass", useDefaultScrollBar: "useDefaultScrollBar", visible: "visible", disabledButton: "disabledButton", modal: "modal", header: "header", popupSize: "popupSize", closeOnEscape: "closeOnEscape", showFooter: "showFooter", positionTop: "positionTop", minY: "minY", hiddenSave: "hiddenSave", maximizable: "maximizable" }, outputs: { onSave: "onSave", onCancel: "onCancel", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "formBase", first: true, predicate: ["formBase"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "children", predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }], ngImport: i0, template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"maximizable\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter\">\r\n        <p-footer *ngIf=\"formBase && formBase.buttonTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n            </ng-container>\r\n        </p-footer>\r\n        <ng-container *ngIf=\"!formBase || !formBase.buttonTemplate\">\r\n            <p-footer *ngIf=\"footer\">\r\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n            </p-footer>\r\n            <p-footer *ngIf=\"!footer\">\r\n                <button pButton preventTab type=\"button\" icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n                    [label]=\"'FORM.CANCEL' | translate\" (click)=\"handleHideDialog($event)\"></button>\r\n            </p-footer>\r\n        </ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.Footer, selector: "p-footer" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["draggable", "resizable", "closeOnEscape", "closable", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "minimizeIcon", "maximizeIcon", "positionLeft", "positionTop", "responsive", "breakpoint", "visible", "style", "position", "header", "contentStyle", "contentStyleClass", "modal", "dismissableMask", "rtl", "appendTo", "styleClass", "maskStyleClass", "maximizable"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i6.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+TnDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnDialogComponent, selector: "tn-dialog", inputs: { maskClass: "maskClass", styleClass: "styleClass", scrollBarStyleClass: "scrollBarStyleClass", useDefaultScrollBar: "useDefaultScrollBar", visible: "visible", disabledButton: "disabledButton", modal: "modal", header: "header", popupSize: "popupSize", closeOnEscape: "closeOnEscape", showFooter: "showFooter", positionTop: "positionTop", minY: "minY", hiddenSave: "hiddenSave", maximizable: "maximizable" }, outputs: { onSave: "onSave", onCancel: "onCancel", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "formBase", first: true, predicate: ["formBase"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "children", predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true, static: true }], ngImport: i0, template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"maximizable\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter\">\r\n        <p-footer *ngIf=\"formBase && formBase.buttonTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n            </ng-container>\r\n        </p-footer>\r\n        <ng-container *ngIf=\"!formBase || !formBase.buttonTemplate\">\r\n            <p-footer *ngIf=\"footer\">\r\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n            </p-footer>\r\n            <p-footer *ngIf=\"!footer\">\r\n                <button pButton preventTab type=\"button\" icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n                    [label]=\"'FORM.CANCEL' | translate\" (click)=\"handleHideDialog($event)\"></button>\r\n            </p-footer>\r\n        </ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.Footer, selector: "p-footer" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-dialog', template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"maximizable\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter\">\r\n        <p-footer *ngIf=\"formBase && formBase.buttonTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n            </ng-container>\r\n        </p-footer>\r\n        <ng-container *ngIf=\"!formBase || !formBase.buttonTemplate\">\r\n            <p-footer *ngIf=\"footer\">\r\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n            </p-footer>\r\n            <p-footer *ngIf=\"!footer\">\r\n                <button pButton preventTab type=\"button\" icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n                    [label]=\"'FORM.CANCEL' | translate\" (click)=\"handleHideDialog($event)\"></button>\r\n            </p-footer>\r\n        </ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n" }]

package/esm2020/components/tn-tabview/tn-tabview.component.mjs CHANGED Viewed

@@ -137,7 +137,7 @@ export class TnTabViewComponent {
     }
 }
 TnTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTabViewComponent, deps: [{ token: i1.CommonService }], target: i0.ɵɵFactoryTarget.Component });
-TnTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnTabViewComponent, selector: "tn-tabview", inputs: { vertical: "vertical", data: "data", allowViewAll: "allowViewAll", activeCode: "activeCode", isDynamicHeight: "isDynamicHeight" }, outputs: { activeCodeChange: "activeCodeChange", tabContentChange: "tabContentChange" }, queries: [{ propertyName: "children", predicate: TemplateRef }, { propertyName: "tabContents", predicate: ["tabContent"], descendants: true }], ngImport: i0, template: "<div [style.height]=\"height\">\r\n    <p-tabView #tab orientation=\"top\" [styleClass]=\"styleClass\" [activeIndex]=\"currentTabIndex\"\r\n        (onChange)=\"handleTabChange($event)\">\r\n        <ng-container *ngFor=\"let item of data; let i = index\">\r\n            <p-tabPanel *ngIf=\"!item.hidden && template[item.code]\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container\r\n                    *ngIf=\"allowViewAll || item.alwayRender || currentTabCode == item.code || (item.doNotReload && dicOpenedTab[item.code])\">\r\n                    <tn-custom-scrollbar *ngIf=\"item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </tn-custom-scrollbar>\r\n                    <ng-container *ngIf=\"!item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </p-tabPanel>\r\n        </ng-container>\r\n    </p-tabView>\r\n</div>", styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{padding-left:0;list-style:none;margin-top:0;margin-bottom:0}.accordion-link ul li{border-radius:4px;display:inline-block;padding:6px 12px;line-height:20px;background-color:#a4a5a4;color:#fff;margin-left:.5rem;margin-bottom:.5rem;transition:all .3s ease-out}.accordion-link ul li:hover{cursor:pointer;background-color:#3db762}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{padding:.5rem .5rem 0;display:flex}.hoso-container{max-height:none;height:auto}.tab-number{background:#a4a5a4;color:#fff;margin-right:.5rem;font-size:.9em;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:2px;padding-top:2px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{display:flex;flex:1;overflow:auto;border-radius:4px;margin-left:.5rem;margin-right:.5rem}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width: 640px){.toolbar,.accordion-link{white-space:nowrap;overflow-x:auto}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.TabView, selector: "p-tabView", inputs: ["orientation", "activeIndex", "style", "styleClass", "controlClose"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i3.TabPanel, selector: "p-tabPanel", inputs: ["cache", "tooltipPosition", "tooltipPositionStyle", "selected", "disabled", "header", "closable", "headerStyle", "headerStyleClass", "leftIcon", "rightIcon", "tooltip", "tooltipStyleClass"] }, { kind: "component", type: i4.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }] });
+TnTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnTabViewComponent, selector: "tn-tabview", inputs: { vertical: "vertical", data: "data", allowViewAll: "allowViewAll", activeCode: "activeCode", isDynamicHeight: "isDynamicHeight" }, outputs: { activeCodeChange: "activeCodeChange", tabContentChange: "tabContentChange" }, queries: [{ propertyName: "children", predicate: TemplateRef }, { propertyName: "tabContents", predicate: ["tabContent"], descendants: true }], ngImport: i0, template: "<div [style.height]=\"height\">\r\n    <p-tabView #tab orientation=\"top\" [styleClass]=\"styleClass\" [activeIndex]=\"currentTabIndex\"\r\n        (onChange)=\"handleTabChange($event)\">\r\n        <ng-container *ngFor=\"let item of data; let i = index\">\r\n            <p-tabPanel *ngIf=\"!item.hidden && template[item.code]\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container\r\n                    *ngIf=\"allowViewAll || item.alwayRender || currentTabCode == item.code || (item.doNotReload && dicOpenedTab[item.code])\">\r\n                    <tn-custom-scrollbar *ngIf=\"item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </tn-custom-scrollbar>\r\n                    <ng-container *ngIf=\"!item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </p-tabPanel>\r\n        </ng-container>\r\n    </p-tabView>\r\n</div>", styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{padding-left:0;list-style:none;margin-top:0;margin-bottom:0}.accordion-link ul li{border-radius:4px;display:inline-block;padding:6px 12px;line-height:20px;background-color:#a4a5a4;color:#fff;margin-left:.5rem;margin-bottom:.5rem;transition:all .3s ease-out}.accordion-link ul li:hover{cursor:pointer;background-color:#3db762}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{padding:.5rem .5rem 0;display:flex}.hoso-container{max-height:none;height:auto}.tab-number{background:#a4a5a4;color:#fff;margin-right:.5rem;font-size:.9em;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:2px;padding-top:2px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{display:flex;flex:1;overflow:auto;border-radius:4px;margin-left:.5rem;margin-right:.5rem}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width: 640px){.toolbar,.accordion-link{white-space:nowrap;overflow-x:auto}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i3.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i4.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: TnTabViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-tabview', template: "<div [style.height]=\"height\">\r\n    <p-tabView #tab orientation=\"top\" [styleClass]=\"styleClass\" [activeIndex]=\"currentTabIndex\"\r\n        (onChange)=\"handleTabChange($event)\">\r\n        <ng-container *ngFor=\"let item of data; let i = index\">\r\n            <p-tabPanel *ngIf=\"!item.hidden && template[item.code]\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container\r\n                    *ngIf=\"allowViewAll || item.alwayRender || currentTabCode == item.code || (item.doNotReload && dicOpenedTab[item.code])\">\r\n                    <tn-custom-scrollbar *ngIf=\"item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </tn-custom-scrollbar>\r\n                    <ng-container *ngIf=\"!item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </p-tabPanel>\r\n        </ng-container>\r\n    </p-tabView>\r\n</div>", styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{padding-left:0;list-style:none;margin-top:0;margin-bottom:0}.accordion-link ul li{border-radius:4px;display:inline-block;padding:6px 12px;line-height:20px;background-color:#a4a5a4;color:#fff;margin-left:.5rem;margin-bottom:.5rem;transition:all .3s ease-out}.accordion-link ul li:hover{cursor:pointer;background-color:#3db762}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{padding:.5rem .5rem 0;display:flex}.hoso-container{max-height:none;height:auto}.tab-number{background:#a4a5a4;color:#fff;margin-right:.5rem;font-size:.9em;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:2px;padding-top:2px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{display:flex;flex:1;overflow:auto;border-radius:4px;margin-left:.5rem;margin-right:.5rem}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width: 640px){.toolbar,.accordion-link{white-space:nowrap;overflow-x:auto}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}\n"] }]

package/esm2020/components/tn-template/tn-template.component.mjs CHANGED Viewed

@@ -13,7 +13,7 @@ export class TnTemplateComponent extends ComponentBase {
     }
 }
 TnTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTemplateComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TnTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnTemplateComponent, selector: "tn-template", outputs: { onChanged: "onChanged" }, usesInheritance: true, ngImport: i0, template: "<button\r\n    (click)=\"addTemplate($event)\"\r\n    pButton\r\n    type=\"button\"\r\n    label=\"Th\u00EAm\"\r\n    icon=\"pi pi-plus\"\r\n    iconPos=\"left\"\r\n    class=\"p-button-rounded p-button-text p-button-info\"></button>\r\n    <div class=\"mceTmpl\">\r\n        <div class=\"span8\">\r\n            <h1>Title</h1>\r\n            <p class=\"introduction\">This is some introduction text</p>\r\n            <div class=\"row\">\r\n                <div class=\"span8 clearfix\">\r\n    \r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"block  articlepage teaserblock  span4\">\r\n                    <div class=\"border\">\r\n                        <a href=\"/en/about-us/news-events/press-releases/newworld-wildlife-fund-chooses-alloy/\" title=\"Alloy Saves Bears\">\r\n                            <h2>itemTitle</h2>\r\n                            <p>Subtitle.</p>\r\n                            <img src=\"/contentassets/02ffd2e49e2043fa9abecc3c2a8bd07d/polarbearonice.png\" alt=\"\">\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n    \r\n        </div>\r\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }] });
+TnTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnTemplateComponent, selector: "tn-template", outputs: { onChanged: "onChanged" }, usesInheritance: true, ngImport: i0, template: "<button\r\n    (click)=\"addTemplate($event)\"\r\n    pButton\r\n    type=\"button\"\r\n    label=\"Th\u00EAm\"\r\n    icon=\"pi pi-plus\"\r\n    iconPos=\"left\"\r\n    class=\"p-button-rounded p-button-text p-button-info\"></button>\r\n    <div class=\"mceTmpl\">\r\n        <div class=\"span8\">\r\n            <h1>Title</h1>\r\n            <p class=\"introduction\">This is some introduction text</p>\r\n            <div class=\"row\">\r\n                <div class=\"span8 clearfix\">\r\n    \r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"block  articlepage teaserblock  span4\">\r\n                    <div class=\"border\">\r\n                        <a href=\"/en/about-us/news-events/press-releases/newworld-wildlife-fund-chooses-alloy/\" title=\"Alloy Saves Bears\">\r\n                            <h2>itemTitle</h2>\r\n                            <p>Subtitle.</p>\r\n                            <img src=\"/contentassets/02ffd2e49e2043fa9abecc3c2a8bd07d/polarbearonice.png\" alt=\"\">\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n    \r\n        </div>\r\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-template', template: "<button\r\n    (click)=\"addTemplate($event)\"\r\n    pButton\r\n    type=\"button\"\r\n    label=\"Th\u00EAm\"\r\n    icon=\"pi pi-plus\"\r\n    iconPos=\"left\"\r\n    class=\"p-button-rounded p-button-text p-button-info\"></button>\r\n    <div class=\"mceTmpl\">\r\n        <div class=\"span8\">\r\n            <h1>Title</h1>\r\n            <p class=\"introduction\">This is some introduction text</p>\r\n            <div class=\"row\">\r\n                <div class=\"span8 clearfix\">\r\n    \r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"block  articlepage teaserblock  span4\">\r\n                    <div class=\"border\">\r\n                        <a href=\"/en/about-us/news-events/press-releases/newworld-wildlife-fund-chooses-alloy/\" title=\"Alloy Saves Bears\">\r\n                            <h2>itemTitle</h2>\r\n                            <p>Subtitle.</p>\r\n                            <img src=\"/contentassets/02ffd2e49e2043fa9abecc3c2a8bd07d/polarbearonice.png\" alt=\"\">\r\n                        </a>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n    \r\n        </div>\r\n    </div>" }]

package/esm2020/components/tn-tinymce/tn-tinymce.component.mjs CHANGED Viewed

@@ -399,7 +399,7 @@ TnTinymceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             multi: true
         },
         ComponentContextService
-    ], viewQueries: [{ propertyName: "equationForm", first: true, predicate: EquationEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<input *ngIf=\"!_deviceDetectorService.isDesktop()\" class=\"input-tab-trap\" (focus)=\"focusTrap($event)\" />\r\n<textarea class=\"tinymce-control\" id={{id}} [ngStyle]=\"{height: height+'px'}\">\r\n</textarea>\r\n<tn-dialog #dialog *ngIf=\"equationFormModel.show\" [closeOnEscape]=\"false\"\r\n    [header]=\"'C\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc (d\u00F9ng laTex)' | translate\" [popupSize]=\"popupSize\">\r\n    <tn-custom-scrollbar #scrollbar>\r\n        <equation-editor [data]=\"dataEquation\">\r\n        </equation-editor>\r\n    </tn-custom-scrollbar>\r\n    <ng-template #footer>\r\n        <button icon=\"fas fa-check\" [disabled]=\"model.submitting\" pButton type=\"button\" (click)=\"handleOk($event)\"\r\n            [label]=\"'Ok' | translate\"></button>\r\n        <button icon=\"fas fa-undo\" [disabled]=\"model.submitting\" pButton class=\"ui-button-secondary\" type=\"button\"\r\n            (click)=\"equationFormModel.show = false\" [label]=\"'FORM.CANCEL' | translate\"></button>\r\n    </ng-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddNews\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddNews = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['tinyMceAddNews']; context: {\r\n        languageCode: languageCode, showChange: showChanged\r\n    }\"></ng-container>\r\n    <!-- <add-news #listBase [languageCode]=\"languageCode\" (showChange)=\"showChanged($event)\"></add-news> -->\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showTemplate\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\"\r\n    [popupSize]=\"popupSize\" (onHide)=\"showTemplate = false\">\r\n    <tn-template (onChanged)=\"addTemplate($event)\"></tn-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddFile\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddFile = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['tinyMceFilePickerDialog']; context: {\r\n        parentModel: model, parentContext: context, closeForm: handleCloseFormAddFile, onCancel: handleRFCancel,\r\n        onChanged: showChanged, onInit: handleInitFormAddFile\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"addFileFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <file-picker-dialog #formBase [parentModel]=\" model\" [parentContext]=\"context\" (closeForm)=\"isAddFile = false\"\r\n        (onCancel)=\"handleRFCancel($event)\" (onChanged)=\"showChanged($event)\">\r\n    </file-picker-dialog> -->\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i7.EquationEditorComponent, selector: "equation-editor", inputs: ["data"] }, { kind: "component", type: i8.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i9.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: i10.TnTemplateComponent, selector: "tn-template", outputs: ["onChanged"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "equationForm", first: true, predicate: EquationEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<input *ngIf=\"!_deviceDetectorService.isDesktop()\" class=\"input-tab-trap\" (focus)=\"focusTrap($event)\" />\r\n<textarea class=\"tinymce-control\" id={{id}} [ngStyle]=\"{height: height+'px'}\">\r\n</textarea>\r\n<tn-dialog #dialog *ngIf=\"equationFormModel.show\" [closeOnEscape]=\"false\"\r\n    [header]=\"'C\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc (d\u00F9ng laTex)' | translate\" [popupSize]=\"popupSize\">\r\n    <tn-custom-scrollbar #scrollbar>\r\n        <equation-editor [data]=\"dataEquation\">\r\n        </equation-editor>\r\n    </tn-custom-scrollbar>\r\n    <ng-template #footer>\r\n        <button icon=\"fas fa-check\" [disabled]=\"model.submitting\" pButton type=\"button\" (click)=\"handleOk($event)\"\r\n            [label]=\"'Ok' | translate\"></button>\r\n        <button icon=\"fas fa-undo\" [disabled]=\"model.submitting\" pButton class=\"ui-button-secondary\" type=\"button\"\r\n            (click)=\"equationFormModel.show = false\" [label]=\"'FORM.CANCEL' | translate\"></button>\r\n    </ng-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddNews\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddNews = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['tinyMceAddNews']; context: {\r\n        languageCode: languageCode, showChange: showChanged\r\n    }\"></ng-container>\r\n    <!-- <add-news #listBase [languageCode]=\"languageCode\" (showChange)=\"showChanged($event)\"></add-news> -->\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showTemplate\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\"\r\n    [popupSize]=\"popupSize\" (onHide)=\"showTemplate = false\">\r\n    <tn-template (onChanged)=\"addTemplate($event)\"></tn-template>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"isAddFile\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\r\n    (onHide)=\"isAddFile = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['tinyMceFilePickerDialog']; context: {\r\n        parentModel: model, parentContext: context, closeForm: handleCloseFormAddFile, onCancel: handleRFCancel,\r\n        onChanged: showChanged, onInit: handleInitFormAddFile\r\n    }\"></ng-container>\r\n    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"addFileFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n    <!-- <file-picker-dialog #formBase [parentModel]=\" model\" [parentContext]=\"context\" (closeForm)=\"isAddFile = false\"\r\n        (onCancel)=\"handleRFCancel($event)\" (onChanged)=\"showChanged($event)\">\r\n    </file-picker-dialog> -->\r\n</tn-dialog>", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7.EquationEditorComponent, selector: "equation-editor", inputs: ["data"] }, { kind: "component", type: i8.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i9.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: i10.TnTemplateComponent, selector: "tn-template", outputs: ["onChanged"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTinymceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-tinymce', providers: [

package/esm2020/components/tn-tree/tn-tree.component.mjs CHANGED Viewed

@@ -32,7 +32,7 @@ export class TnTreeComponent {
     }
 }
 TnTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTreeComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TnTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnTreeComponent, selector: "tn-tree", inputs: { data: "data", styleClass: "styleClass" }, ngImport: i0, template: "<p-tree [style]=\"{'width': '100%'}\" [styleClass]=\"styleClass\" [value]=\"treeData\"\r\n    filterPlaceholder=\"L\u1ECDc theo t\u00EAn nh\u00F3m\" selectionMode=\"single\" [filter]=\"true\" [(selection)]=\"selectedTreeNode\"\r\n    (onNodeSelect)=\"checkAndGetData()\">\r\n    <ng-template let-node pTemplate=\"default\">\r\n        <span class=\"medium-tree-node-text tree-node-text\" [attr.level]=\"node.level\">{{node.label}}</span>\r\n        <button *ngIf=\"node.parent\" [disabled]=\"loading\" pTooltip=\"{{'FORM.EDIT' | translate}}\"\r\n            tooltipPosition=\"top\" pButton class=\"p-button-info p-button-text\" type=\"button\" icon=\"fa fa-edit\"\r\n            (click)=\"editNhomTuChonFromTree(node.data,$event)\"></button>\r\n        <button *ngIf=\"node.parent\" [disabled]=\"loading\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" class=\"p-button-danger p-button-text\" icon=\"far fa-trash-alt\"\r\n            (click)=\"deleteNhomTuChonFromTree(node.data,$event)\"></button>\r\n    </ng-template>\r\n</p-tree>", styles: [""], dependencies: [{ kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i5.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"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+TnTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnTreeComponent, selector: "tn-tree", inputs: { data: "data", styleClass: "styleClass" }, ngImport: i0, template: "<p-tree [style]=\"{'width': '100%'}\" [styleClass]=\"styleClass\" [value]=\"treeData\"\r\n    filterPlaceholder=\"L\u1ECDc theo t\u00EAn nh\u00F3m\" selectionMode=\"single\" [filter]=\"true\" [(selection)]=\"selectedTreeNode\"\r\n    (onNodeSelect)=\"checkAndGetData()\">\r\n    <ng-template let-node pTemplate=\"default\">\r\n        <span class=\"medium-tree-node-text tree-node-text\" [attr.level]=\"node.level\">{{node.label}}</span>\r\n        <button *ngIf=\"node.parent\" [disabled]=\"loading\" pTooltip=\"{{'FORM.EDIT' | translate}}\"\r\n            tooltipPosition=\"top\" pButton class=\"p-button-info p-button-text\" type=\"button\" icon=\"fa fa-edit\"\r\n            (click)=\"editNhomTuChonFromTree(node.data,$event)\"></button>\r\n        <button *ngIf=\"node.parent\" [disabled]=\"loading\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" class=\"p-button-danger p-button-text\" icon=\"far fa-trash-alt\"\r\n            (click)=\"deleteNhomTuChonFromTree(node.data,$event)\"></button>\r\n    </ng-template>\r\n</p-tree>", styles: [""], dependencies: [{ kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.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"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-tree', template: "<p-tree [style]=\"{'width': '100%'}\" [styleClass]=\"styleClass\" [value]=\"treeData\"\r\n    filterPlaceholder=\"L\u1ECDc theo t\u00EAn nh\u00F3m\" selectionMode=\"single\" [filter]=\"true\" [(selection)]=\"selectedTreeNode\"\r\n    (onNodeSelect)=\"checkAndGetData()\">\r\n    <ng-template let-node pTemplate=\"default\">\r\n        <span class=\"medium-tree-node-text tree-node-text\" [attr.level]=\"node.level\">{{node.label}}</span>\r\n        <button *ngIf=\"node.parent\" [disabled]=\"loading\" pTooltip=\"{{'FORM.EDIT' | translate}}\"\r\n            tooltipPosition=\"top\" pButton class=\"p-button-info p-button-text\" type=\"button\" icon=\"fa fa-edit\"\r\n            (click)=\"editNhomTuChonFromTree(node.data,$event)\"></button>\r\n        <button *ngIf=\"node.parent\" [disabled]=\"loading\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" class=\"p-button-danger p-button-text\" icon=\"far fa-trash-alt\"\r\n            (click)=\"deleteNhomTuChonFromTree(node.data,$event)\"></button>\r\n    </ng-template>\r\n</p-tree>" }]

package/esm2020/components/user-picker/user-picker-box/user-picker-box.component.mjs CHANGED Viewed

@@ -166,7 +166,7 @@ export class UserPickerBoxComponent extends ComponentBase {
     }
 }
 UserPickerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UserPickerBoxComponent, deps: [{ token: i0.Injector }, { token: i1.UserV5Service }, { token: i2.OrganizationService }], target: i0.ɵɵFactoryTarget.Component });
-UserPickerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UserPickerBoxComponent, selector: "user-picker-box", inputs: { multiple: "multiple", disabled: "disabled", enableCaching: "enableCaching", controlSetting: "controlSetting", parentSetting: "parentSetting", advanceData: "advanceData", control: "control", width: "width", height: "height", selectedValue: "selectedValue", readOnlyValues: "readOnlyValues" }, outputs: { onRowSelect: "onRowSelect", onChanged: "onChanged", onSelect: "onSelect", onUnSelect: "onUnSelect", onDone: "onDone" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "entityPickerBox", first: true, predicate: ["entityPickerBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'p-grid p-m-0': controlSetting.userType == userType.CanBo}\" class=\"p-grid p-m-0 tn-l-user-picker-box\">\r\n    <ng-container [ngIf]=\"controlSetting.userType == userType.CanBo\">\r\n        <as-split [unit]=\"'pixel'\">\r\n            <as-split-area [size]=\"330\">\r\n                <tn-custom-scrollbar>\r\n                    <p-tree [style]=\"{'width': '100%'}\" styleClass=\"tn-tree-beauty tree-organization-picker\"\r\n                        [value]=\"rootTreeNode\" filterPlaceholder=\"T\u00ECm \u0111\u01A1n v\u1ECB / ph\u00F2ng ban\" selectionMode=\"single\"\r\n                        [filter]=\"true\" [(selection)]=\"selectedTreeNode\" (onNodeExpand)=\"onNodeExpand($event)\"\r\n                        (onNodeSelect)=\"nodeSelect($event)\" [emptyMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3'\">\r\n                        <ng-template let-node pTemplate=\"default\">\r\n                            <span id=\"{{node.data}}\" class=\"custom-node\">{{node.label}}</span>\r\n                        </ng-template>\r\n                    </p-tree>\r\n                </tn-custom-scrollbar>\r\n            </as-split-area>\r\n            <as-split-area [size]=\"0\">\r\n                <ng-container *ngTemplateOutlet=\"entityPickerBox\"></ng-container>\r\n            </as-split-area>\r\n        </as-split>\r\n    </ng-container>\r\n    <ng-container [ngIf]=\"controlSetting.userType == userType.Normal\">\r\n        <ng-container *ngTemplateOutlet=\"entityPickerBox\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n<ng-template #entityPickerBox>\r\n    <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\"\r\n        [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\" (onChanged)=\"handleChangedEntity($event)\"\r\n        (onSelect)=\"handleSelectEntity($event)\" (onUnSelect)=\"handleUnSelectEntity($event)\"\r\n        (onDone)=\"handleDone($event)\" (onRowSelect)=\"handleRowSelect($event)\">\r\n    </entity-picker-box>\r\n</ng-template>\r\n<ng-template #buttonTemplate>\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'Ch\u1ECDn'\"\r\n        (click)=\"handleSelect($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"handleCancelDialog($event)\"></button>\r\n</ng-template>", styles: [".action-btn{border:1px solid #0a89bf;color:#0a89bf;background-color:#fff;font-size:16px;width:40px;cursor:pointer;text-align:center;margin:4px 2px}.content-all{display:flex;flex-direction:column}.content-top{padding:5px 0;overflow:hidden;flex-grow:1}.content-bottom{border-top:1px solid #ddd;padding:5px 0;overflow:hidden;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{text-align:center;position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{height:100%;border-right:1px solid #aaa}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{padding-bottom:0;padding-top:0;height:100%}@media (max-width: 640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{position:static;top:auto;left:auto;transform:none;padding-bottom:5px}.tn-l-left-sidebar-wrapper{height:calc(100vh - 300px);border-right:unset;border-bottom:1px solid #aaa}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{padding:0;border:none}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{position:sticky;top:0;z-index:4;padding:.5em;margin-bottom:0;background-color:#fff}::ng-deep .user-picker-box-dialog .p-tree-empty-message{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container .p-tree-filter-icon{right:1em}::ng-deep .user-picker-box-dialog .ps__rail-y{z-index:10}@media (max-width: 640px){::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:auto}::ng-deep .user-picker-box-dialog .tn-dialog-scrollbar>div{min-height:100%!important}::ng-deep .user-picker-box-dialog .tn-l-right-content-wrapper{padding:0}}\n"], dependencies: [{ kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i4.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i7.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"] }, { kind: "component", type: i8.EntityPickerBoxComponent, selector: "entity-picker-box", inputs: ["parentSetting", "advanceData", "control", "width", "height", "readOnlyValues", "selectedValue", "currentNode"], outputs: ["onContentLeftInit", "onContentRightInit", "onRowSelect", "onChanged", "onSelect", "onUnSelect", "onDone"] }, { kind: "component", type: i9.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+UserPickerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UserPickerBoxComponent, selector: "user-picker-box", inputs: { multiple: "multiple", disabled: "disabled", enableCaching: "enableCaching", controlSetting: "controlSetting", parentSetting: "parentSetting", advanceData: "advanceData", control: "control", width: "width", height: "height", selectedValue: "selectedValue", readOnlyValues: "readOnlyValues" }, outputs: { onRowSelect: "onRowSelect", onChanged: "onChanged", onSelect: "onSelect", onUnSelect: "onUnSelect", onDone: "onDone" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "entityPickerBox", first: true, predicate: ["entityPickerBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'p-grid p-m-0': controlSetting.userType == userType.CanBo}\" class=\"p-grid p-m-0 tn-l-user-picker-box\">\r\n    <ng-container [ngIf]=\"controlSetting.userType == userType.CanBo\">\r\n        <as-split [unit]=\"'pixel'\">\r\n            <as-split-area [size]=\"330\">\r\n                <tn-custom-scrollbar>\r\n                    <p-tree [style]=\"{'width': '100%'}\" styleClass=\"tn-tree-beauty tree-organization-picker\"\r\n                        [value]=\"rootTreeNode\" filterPlaceholder=\"T\u00ECm \u0111\u01A1n v\u1ECB / ph\u00F2ng ban\" selectionMode=\"single\"\r\n                        [filter]=\"true\" [(selection)]=\"selectedTreeNode\" (onNodeExpand)=\"onNodeExpand($event)\"\r\n                        (onNodeSelect)=\"nodeSelect($event)\" [emptyMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3'\">\r\n                        <ng-template let-node pTemplate=\"default\">\r\n                            <span id=\"{{node.data}}\" class=\"custom-node\">{{node.label}}</span>\r\n                        </ng-template>\r\n                    </p-tree>\r\n                </tn-custom-scrollbar>\r\n            </as-split-area>\r\n            <as-split-area [size]=\"0\">\r\n                <ng-container *ngTemplateOutlet=\"entityPickerBox\"></ng-container>\r\n            </as-split-area>\r\n        </as-split>\r\n    </ng-container>\r\n    <ng-container [ngIf]=\"controlSetting.userType == userType.Normal\">\r\n        <ng-container *ngTemplateOutlet=\"entityPickerBox\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n<ng-template #entityPickerBox>\r\n    <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\"\r\n        [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\" (onChanged)=\"handleChangedEntity($event)\"\r\n        (onSelect)=\"handleSelectEntity($event)\" (onUnSelect)=\"handleUnSelectEntity($event)\"\r\n        (onDone)=\"handleDone($event)\" (onRowSelect)=\"handleRowSelect($event)\">\r\n    </entity-picker-box>\r\n</ng-template>\r\n<ng-template #buttonTemplate>\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'Ch\u1ECDn'\"\r\n        (click)=\"handleSelect($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"handleCancelDialog($event)\"></button>\r\n</ng-template>", styles: [".action-btn{border:1px solid #0a89bf;color:#0a89bf;background-color:#fff;font-size:16px;width:40px;cursor:pointer;text-align:center;margin:4px 2px}.content-all{display:flex;flex-direction:column}.content-top{padding:5px 0;overflow:hidden;flex-grow:1}.content-bottom{border-top:1px solid #ddd;padding:5px 0;overflow:hidden;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{text-align:center;position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{height:100%;border-right:1px solid #aaa}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{padding-bottom:0;padding-top:0;height:100%}@media (max-width: 640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{position:static;top:auto;left:auto;transform:none;padding-bottom:5px}.tn-l-left-sidebar-wrapper{height:calc(100vh - 300px);border-right:unset;border-bottom:1px solid #aaa}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{padding:0;border:none}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{position:sticky;top:0;z-index:4;padding:.5em;margin-bottom:0;background-color:#fff}::ng-deep .user-picker-box-dialog .p-tree-empty-message{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container .p-tree-filter-icon{right:1em}::ng-deep .user-picker-box-dialog .ps__rail-y{z-index:10}@media (max-width: 640px){::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:auto}::ng-deep .user-picker-box-dialog .tn-dialog-scrollbar>div{min-height:100%!important}::ng-deep .user-picker-box-dialog .tn-l-right-content-wrapper{padding:0}}\n"], dependencies: [{ kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i4.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7.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"] }, { kind: "component", type: i8.EntityPickerBoxComponent, selector: "entity-picker-box", inputs: ["parentSetting", "advanceData", "control", "width", "height", "readOnlyValues", "selectedValue", "currentNode"], outputs: ["onContentLeftInit", "onContentRightInit", "onRowSelect", "onChanged", "onSelect", "onUnSelect", "onDone"] }, { kind: "component", type: i9.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UserPickerBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'user-picker-box', providers: [ComponentContextService], template: "<div [ngClass]=\"{'p-grid p-m-0': controlSetting.userType == userType.CanBo}\" class=\"p-grid p-m-0 tn-l-user-picker-box\">\r\n    <ng-container [ngIf]=\"controlSetting.userType == userType.CanBo\">\r\n        <as-split [unit]=\"'pixel'\">\r\n            <as-split-area [size]=\"330\">\r\n                <tn-custom-scrollbar>\r\n                    <p-tree [style]=\"{'width': '100%'}\" styleClass=\"tn-tree-beauty tree-organization-picker\"\r\n                        [value]=\"rootTreeNode\" filterPlaceholder=\"T\u00ECm \u0111\u01A1n v\u1ECB / ph\u00F2ng ban\" selectionMode=\"single\"\r\n                        [filter]=\"true\" [(selection)]=\"selectedTreeNode\" (onNodeExpand)=\"onNodeExpand($event)\"\r\n                        (onNodeSelect)=\"nodeSelect($event)\" [emptyMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3'\">\r\n                        <ng-template let-node pTemplate=\"default\">\r\n                            <span id=\"{{node.data}}\" class=\"custom-node\">{{node.label}}</span>\r\n                        </ng-template>\r\n                    </p-tree>\r\n                </tn-custom-scrollbar>\r\n            </as-split-area>\r\n            <as-split-area [size]=\"0\">\r\n                <ng-container *ngTemplateOutlet=\"entityPickerBox\"></ng-container>\r\n            </as-split-area>\r\n        </as-split>\r\n    </ng-container>\r\n    <ng-container [ngIf]=\"controlSetting.userType == userType.Normal\">\r\n        <ng-container *ngTemplateOutlet=\"entityPickerBox\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n<ng-template #entityPickerBox>\r\n    <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"parentSetting\" [advanceData]=\"advanceData\"\r\n        [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\" (onChanged)=\"handleChangedEntity($event)\"\r\n        (onSelect)=\"handleSelectEntity($event)\" (onUnSelect)=\"handleUnSelectEntity($event)\"\r\n        (onDone)=\"handleDone($event)\" (onRowSelect)=\"handleRowSelect($event)\">\r\n    </entity-picker-box>\r\n</ng-template>\r\n<ng-template #buttonTemplate>\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'Ch\u1ECDn'\"\r\n        (click)=\"handleSelect($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"handleCancelDialog($event)\"></button>\r\n</ng-template>", styles: [".action-btn{border:1px solid #0a89bf;color:#0a89bf;background-color:#fff;font-size:16px;width:40px;cursor:pointer;text-align:center;margin:4px 2px}.content-all{display:flex;flex-direction:column}.content-top{padding:5px 0;overflow:hidden;flex-grow:1}.content-bottom{border-top:1px solid #ddd;padding:5px 0;overflow:hidden;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{text-align:center;position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{height:100%;border-right:1px solid #aaa}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{padding-bottom:0;padding-top:0;height:100%}@media (max-width: 640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{position:static;top:auto;left:auto;transform:none;padding-bottom:5px}.tn-l-left-sidebar-wrapper{height:calc(100vh - 300px);border-right:unset;border-bottom:1px solid #aaa}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{padding:0;border:none}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{position:sticky;top:0;z-index:4;padding:.5em;margin-bottom:0;background-color:#fff}::ng-deep .user-picker-box-dialog .p-tree-empty-message{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container .p-tree-filter-icon{right:1em}::ng-deep .user-picker-box-dialog .ps__rail-y{z-index:10}@media (max-width: 640px){::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:auto}::ng-deep .user-picker-box-dialog .tn-dialog-scrollbar>div{min-height:100%!important}::ng-deep .user-picker-box-dialog .tn-l-right-content-wrapper{padding:0}}\n"] }]

package/esm2020/components/user-picker/user-picker.component.mjs CHANGED Viewed

@@ -559,7 +559,7 @@ UserPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             multi: true
         },
         ComponentContextService
-    ], viewQueries: [{ propertyName: "filterChucVuRef", first: true, predicate: ["filterChucVuRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-inputgroup user-picker\" [class.multiple]=\"multiple\" [class.hasValue]=\"hasValue\">\r\n    <div style=\"width: calc(100% - 28px)\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\">\r\n        <p-autoComplete emptyMessage=\"Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3 n\u00E0o\" [ngClass]=\"'custom-autocomplete'\" [disabled]=\"disabled\"\r\n            [placeholder]=\"control.placeholder\" [appendTo]=\"control.appendTo\" [suggestions]=\"results\" field=\"label\"\r\n            [styleClass]=\"control.validators && control.required ? 'rq' : ''\" [multiple]=\"control.multiple\"\r\n            [minLength]=\"2\" [(ngModel)]=\"selectedValueObject\" (onFocus)=\"handleFocus($event)\"\r\n            (onBlur)=\"handleBlur($event)\" (completeMethod)=\"search($event)\" (onKeyUp)=\"handleKeyUp($event)\"\r\n            (onSelect)=\"handleSelect($event)\" (onUnselect)=\"handleUnSelect($event)\">\r\n        </p-autoComplete>\r\n    </div>\r\n    <span *ngIf=\"!control.multiple && !disabled && hasValue\" class=\"icon-clear\" (click)=\"clearValue()\"><i\r\n            class=\"fas fa-times\"></i></span>\r\n    <button class=\"custom-autocomplete-button\" [disabled]=\"disabled\" tabindex=\"-1\" (click)=\"showPickForm()\" pButton\r\n        [pTooltip]=\"control.title\" icon=\"fas fa-external-link-alt\" type=\"button\"></button>\r\n</div>\r\n<tn-dialog #dialog *ngIf=\"showFormPicker\" styleClass=\"user-picker-box-dialog no-padding\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"control.title | translate\" [popupSize]=\"popupSize\" (onHide)=\"handleHide($event)\">\r\n    <user-picker-box #userPickerBox [controlSetting]=\"control\" [control]=\"controlPicker\" [parentSetting]=\"settingPicker\"\r\n        [advanceData]=\"advanceDataPicker\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\r\n        (onChanged)=\"handleChangeEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\r\n        (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleHide($event)\"\r\n        (onRowSelect)=\"handleRowSelect($event)\">\r\n    </user-picker-box>\r\n    <ng-template #footer>\r\n        <button type=\" button\" pButton class=\"p-button-text\" (click)=\"onClickSubmitButton($event, userPickerBox)\"\r\n            [label]=\"'Ho\u00E0n th\u00E0nh'\" icon=\"pi pi-check\"></button>\r\n    </ng-template>\r\n</tn-dialog>\r\n\r\n<ng-template #filterChucVuRef let-col=\"col\" let-filterData=\"filterData\" let-onSearch=\"onSearch\"\r\n    let-onShowFilterDropdownPanel=\"onShowFilterDropdownPanel\" let-onHideFilterDropdownPanel=\"onHideFilterDropdownPanel\">\r\n    <dropdown [control]=\"searchSchema.idChucVus\" [(value)]=\"filterData[col.field]\" (onHideSmartEvent)=\"onSearch()\"\r\n        (onShow)=\"onShowFilterDropdownPanel($event)\" (onHideSmartEvent)=\"onHideFilterDropdownPanel($event)\">\r\n    </dropdown>\r\n</ng-template>", styles: [".user-picker{position:relative}.user-picker .icon-clear{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:11px;color:#555;padding:3px;cursor:pointer}::ng-deep .user-picker.has-value:not(.multiple):not(.disabled) p-autocomplete .p-inputtext{padding-right:34px}::ng-deep .user-picker .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token{padding:.143rem 0}::ng-deep .user-picker .p-autocomplete .p-autocomplete-multiple-container,::ng-deep .user-picker .p-autocomplete .p-autocomplete-input{border-radius:4px 0 0 4px}@media (max-width: 640px){::ng-deep user-picker .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token{padding:0 0 3px}::ng-deep user-picker .p-autocomplete-input-token>input{height:21.5px!important}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "type", "autoZIndex", "baseZIndex", "dropdownIcon", "unique", "completeOnFocus", "scrollHeight", "dropdownMode", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "suggestions", "disabled", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "ariaLabel", "ariaLabelledBy", "field", "dropdown", "multiple", "tabindex", "dataKey", "emptyMessage", "autofocus"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide"] }, { kind: "component", type: i9.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: i10.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i11.UserPickerBoxComponent, selector: "user-picker-box", inputs: ["multiple", "disabled", "enableCaching", "controlSetting", "parentSetting", "advanceData", "control", "width", "height", "selectedValue", "readOnlyValues"], outputs: ["onRowSelect", "onChanged", "onSelect", "onUnSelect", "onDone"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "filterChucVuRef", first: true, predicate: ["filterChucVuRef"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-inputgroup user-picker\" [class.multiple]=\"multiple\" [class.hasValue]=\"hasValue\">\r\n    <div style=\"width: calc(100% - 28px)\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\">\r\n        <p-autoComplete emptyMessage=\"Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3 n\u00E0o\" [ngClass]=\"'custom-autocomplete'\" [disabled]=\"disabled\"\r\n            [placeholder]=\"control.placeholder\" [appendTo]=\"control.appendTo\" [suggestions]=\"results\" field=\"label\"\r\n            [styleClass]=\"control.validators && control.required ? 'rq' : ''\" [multiple]=\"control.multiple\"\r\n            [minLength]=\"2\" [(ngModel)]=\"selectedValueObject\" (onFocus)=\"handleFocus($event)\"\r\n            (onBlur)=\"handleBlur($event)\" (completeMethod)=\"search($event)\" (onKeyUp)=\"handleKeyUp($event)\"\r\n            (onSelect)=\"handleSelect($event)\" (onUnselect)=\"handleUnSelect($event)\">\r\n        </p-autoComplete>\r\n    </div>\r\n    <span *ngIf=\"!control.multiple && !disabled && hasValue\" class=\"icon-clear\" (click)=\"clearValue()\"><i\r\n            class=\"fas fa-times\"></i></span>\r\n    <button class=\"custom-autocomplete-button\" [disabled]=\"disabled\" tabindex=\"-1\" (click)=\"showPickForm()\" pButton\r\n        [pTooltip]=\"control.title\" icon=\"fas fa-external-link-alt\" type=\"button\"></button>\r\n</div>\r\n<tn-dialog #dialog *ngIf=\"showFormPicker\" styleClass=\"user-picker-box-dialog no-padding\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"control.title | translate\" [popupSize]=\"popupSize\" (onHide)=\"handleHide($event)\">\r\n    <user-picker-box #userPickerBox [controlSetting]=\"control\" [control]=\"controlPicker\" [parentSetting]=\"settingPicker\"\r\n        [advanceData]=\"advanceDataPicker\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\r\n        (onChanged)=\"handleChangeEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\r\n        (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleHide($event)\"\r\n        (onRowSelect)=\"handleRowSelect($event)\">\r\n    </user-picker-box>\r\n    <ng-template #footer>\r\n        <button type=\" button\" pButton class=\"p-button-text\" (click)=\"onClickSubmitButton($event, userPickerBox)\"\r\n            [label]=\"'Ho\u00E0n th\u00E0nh'\" icon=\"pi pi-check\"></button>\r\n    </ng-template>\r\n</tn-dialog>\r\n\r\n<ng-template #filterChucVuRef let-col=\"col\" let-filterData=\"filterData\" let-onSearch=\"onSearch\"\r\n    let-onShowFilterDropdownPanel=\"onShowFilterDropdownPanel\" let-onHideFilterDropdownPanel=\"onHideFilterDropdownPanel\">\r\n    <dropdown [control]=\"searchSchema.idChucVus\" [(value)]=\"filterData[col.field]\" (onHideSmartEvent)=\"onSearch()\"\r\n        (onShow)=\"onShowFilterDropdownPanel($event)\" (onHideSmartEvent)=\"onHideFilterDropdownPanel($event)\">\r\n    </dropdown>\r\n</ng-template>", styles: [".user-picker{position:relative}.user-picker .icon-clear{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:11px;color:#555;padding:3px;cursor:pointer}::ng-deep .user-picker.has-value:not(.multiple):not(.disabled) p-autocomplete .p-inputtext{padding-right:34px}::ng-deep .user-picker .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token{padding:.143rem 0}::ng-deep .user-picker .p-autocomplete .p-autocomplete-multiple-container,::ng-deep .user-picker .p-autocomplete .p-autocomplete-input{border-radius:4px 0 0 4px}@media (max-width: 640px){::ng-deep user-picker .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token{padding:0 0 3px}::ng-deep user-picker .p-autocomplete-input-token>input{height:21.5px!important}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i9.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: i10.TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: i11.UserPickerBoxComponent, selector: "user-picker-box", inputs: ["multiple", "disabled", "enableCaching", "controlSetting", "parentSetting", "advanceData", "control", "width", "height", "selectedValue", "readOnlyValues"], outputs: ["onRowSelect", "onChanged", "onSelect", "onUnSelect", "onDone"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UserPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'user-picker', providers: [

package/esm2020/components/usmart/chuoi-phan-tiet/chuoi-phan-tiet.component.mjs CHANGED Viewed

@@ -35,7 +35,7 @@ ChuoiPhanTietComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => ChuoiPhanTietComponent),
             multi: true
         }
-    ], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"data && data.length > 0\">\r\n    <ng-container *ngFor=\"let item of data; index as i; trackBy: trackByFunc\">\r\n        <span [pTooltip]=\"item.ten\" tooltipPosition=\"top\"\r\n            [ngStyle]=\"{'color': item.colorCode}\">{{ item.soTietTheoKhung }}</span>\r\n        <ng-container *ngIf=\"i < data.length - 1\">/</ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }] });
+    ], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"data && data.length > 0\">\r\n    <ng-container *ngFor=\"let item of data; index as i; trackBy: trackByFunc\">\r\n        <span [pTooltip]=\"item.ten\" tooltipPosition=\"top\"\r\n            [ngStyle]=\"{'color': item.colorCode}\">{{ item.soTietTheoKhung }}</span>\r\n        <ng-container *ngIf=\"i < data.length - 1\">/</ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ChuoiPhanTietComponent, decorators: [{
             type: Component,
             args: [{ selector: 'chuoi-phan-tiet', providers: [