tnx-shared 5.2.17 → 5.2.18

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

@@ -6,10 +6,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "./services/path-name.service";
 import * as i2 from "../../services/dom.service";
 import * as i3 from "../../services/environment.service";
-import * as i4 from "tn-custom-primeng/sidebar";
-import * as i5 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
-import * as i6 from "tn-custom-primeng/tooltip";
-import * as i7 from "@angular/common";
+import * as i4 from "@angular/common";
+import * as i5 from "tn-custom-primeng/tooltip";
+import * as i6 from "tn-custom-primeng/sidebar";
+import * as i7 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
 import * as i8 from "@ngx-translate/core";
 export class TnAppHelpComponent extends ComponentBase {
     constructor(_pathNameService, _domService, _injector, _environmentService) {
@@ -56,9 +56,9 @@ export class TnAppHelpComponent extends ComponentBase {
         }, 500);
     }
 }
-TnAppHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", 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: "12.0.0", version: "13.2.6", 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"], components: [{ type: i4.Sidebar, selector: "p-sidebar", inputs: ["position", "blockScroll", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "visible", "fullScreen", "appendTo", "style", "styleClass", "ariaCloseLabel"], outputs: ["onShow", "onHide", "visibleChange"] }, { type: i5.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }], directives: [{ type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnAppHelpComponent, decorators: [{
+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" }] });
+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"] }]
         }], ctorParameters: function () { return [{ type: i1.PathNameService }, { type: i2.DomService }, { type: i0.Injector }, { type: i3.EnvironmentService }]; } });

package/esm2020/components/tn-app-notification/tn-app-notification-list/tn-app-notification-list.component.mjs

@@ -5,10 +5,10 @@ export class TnAppNotificationListComponent {
     ngOnInit() {
     }
 }
-TnAppNotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnAppNotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TnAppNotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TnAppNotificationListComponent, selector: "tn-app-notification-list", ngImport: i0, template: "<p>\r\n  tn-app-notification-list works!\r\n</p>\r\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnAppNotificationListComponent, decorators: [{
+TnAppNotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnAppNotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TnAppNotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnAppNotificationListComponent, selector: "tn-app-notification-list", ngImport: i0, template: "<p>\r\n  tn-app-notification-list works!\r\n</p>\r\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnAppNotificationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-app-notification-list', template: "<p>\r\n  tn-app-notification-list works!\r\n</p>\r\n", styles: [""] }]
+            args: [{ selector: 'tn-app-notification-list', template: "<p>\r\n  tn-app-notification-list works!\r\n</p>\r\n" }]
         }], ctorParameters: function () { return []; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG4tYXBwLW5vdGlmaWNhdGlvbi1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC9zcmMvbGliL2NvbXBvbmVudHMvdG4tYXBwLW5vdGlmaWNhdGlvbi90bi1hcHAtbm90aWZpY2F0aW9uLWxpc3QvdG4tYXBwLW5vdGlmaWNhdGlvbi1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC9zcmMvbGliL2NvbXBvbmVudHMvdG4tYXBwLW5vdGlmaWNhdGlvbi90bi1hcHAtbm90aWZpY2F0aW9uLWxpc3QvdG4tYXBwLW5vdGlmaWNhdGlvbi1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxlQUFlLENBQUM7O0FBT2xELE1BQU0sT0FBTyw4QkFBOEI7SUFFdkMsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7OzJIQUxRLDhCQUE4QjsrR0FBOUIsOEJBQThCLGdFQ1AzQyxzREFHQTsyRkRJYSw4QkFBOEI7a0JBTDFDLFNBQVM7K0JBQ0ksMEJBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICd0bi1hcHAtbm90aWZpY2F0aW9uLWxpc3QnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RuLWFwcC1ub3RpZmljYXRpb24tbGlzdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi90bi1hcHAtbm90aWZpY2F0aW9uLWxpc3QuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVG5BcHBOb3RpZmljYXRpb25MaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgfVxyXG5cclxufVxyXG4iLCI8cD5cclxuICB0bi1hcHAtbm90aWZpY2F0aW9uLWxpc3Qgd29ya3MhXHJcbjwvcD5cclxuIl19

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

@@ -14,9 +14,9 @@ import * as i5 from "../../services/environment.service";
 import * as i6 from "../../services/crud.service";
 import * as i7 from "../../services/notifier.service";
 import * as i8 from "../../services/custom-router.service";
-import * as i9 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
+import * as i9 from "@angular/common";
 import * as i10 from "tn-custom-primeng/tooltip";
-import * as i11 from "@angular/common";
+import * as i11 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
 import * as i12 from "../../pipes/summary.pipe";
 export class TnAppNotificationComponent extends ComponentBase {
     constructor(_signalRService, _userV5Service, _notificationService, _router, _environmentService, _crudService, _notifierService, _customRouterService, injector) {
@@ -212,9 +212,9 @@ export class TnAppNotificationComponent extends ComponentBase {
         window.open(thongBaoDomain);
     }
 }
-TnAppNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", 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: "12.0.0", version: "13.2.6", 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"], components: [{ 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"] }], directives: [{ type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "summary": i12.SummaryPipe, "date": i11.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnAppNotificationComponent, decorators: [{
+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" }] });
+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"] }]
         }], ctorParameters: function () { return [{ type: i1.SignalRService }, { type: i2.UserV5Service }, { type: i3.NotificationService }, { type: i4.Router }, { type: i5.EnvironmentService }, { type: i6.CrudService }, { type: i7.NotifierService }, { type: i8.CustomRouterService }, { type: i0.Injector }]; }, propDecorators: { notificationDetail: [{

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

@@ -4,8 +4,8 @@ import { Checkbox } from 'tn-custom-primeng/checkbox';
 import { ComponentContextService } from '../../app-context/component-context.service';
 import { ComponentBase } from '../../classes/base/component-base';
 import * as i0 from "@angular/core";
-import * as i1 from "tn-custom-primeng/checkbox";
-import * as i2 from "@angular/forms";
+import * as i1 from "@angular/forms";
+import * as i2 from "tn-custom-primeng/checkbox";
 export class TnCheckboxComponent extends ComponentBase {
     constructor(injector) {
         super(injector);
@@ -34,16 +34,16 @@ export class TnCheckboxComponent extends ComponentBase {
         this.disabled = isDisabled;
     }
 }
-TnCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnCheckboxComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TnCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: { control: "control", disabled: "disabled", appendTo: "appendTo" }, outputs: { onChange: "onChange" }, providers: [
+TnCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnCheckboxComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+TnCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: { control: "control", disabled: "disabled", appendTo: "appendTo" }, outputs: { onChange: "onChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TnCheckboxComponent),
             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"], components: [{ type: i1.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnCheckboxComponent, decorators: [{
+    ], 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"] }] });
+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

@@ -3,10 +3,10 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentContextService } from '../../app-context/component-context.service';
 import { ComponentBase } from '../../classes/base/component-base';
 import * as i0 from "@angular/core";
-import * as i1 from "tn-custom-primeng/colorpicker";
+import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@angular/common";
-import * as i4 from "tn-custom-primeng/inputtext";
+import * as i3 from "tn-custom-primeng/inputtext";
+import * as i4 from "tn-custom-primeng/colorpicker";
 export class TnColorPickerComponent extends ComponentBase {
     constructor(injector) {
         super(injector);
@@ -46,16 +46,16 @@ export class TnColorPickerComponent extends ComponentBase {
         this.change.next(this.model.value);
     }
 }
-TnColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnColorPickerComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TnColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TnColorPickerComponent, selector: "tn-color-picker", inputs: { disabled: "disabled", appendTo: "appendTo" }, outputs: { change: "change" }, providers: [
+TnColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnColorPickerComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+TnColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnColorPickerComponent, selector: "tn-color-picker", inputs: { disabled: "disabled", appendTo: "appendTo" }, outputs: { change: "change" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TnColorPickerComponent),
             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"], components: [{ type: i1.ColorPicker, selector: "p-colorPicker", inputs: ["format", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "disabled", "style", "styleClass", "inline", "appendTo", "tabindex", "inputId"], outputs: ["onChange", "onShow", "onHide"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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]" }, { type: i4.InputText, selector: "[pInputText]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnColorPickerComponent, decorators: [{
+    ], 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"] }] });
+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-custom-scrollbar/tn-custom-scrollbar.component.mjs

@@ -2,8 +2,8 @@ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core
 import * as i0 from "@angular/core";
 import * as i1 from "ngx-device-detector";
 import * as i2 from "@angular/platform-browser";
-import * as i3 from "ngx-perfect-scrollbar";
-import * as i4 from "@angular/common";
+import * as i3 from "@angular/common";
+import * as i4 from "ngx-perfect-scrollbar";
 export class TnCustomScrollbarComponent {
     constructor(elm, _deviceDetectorService, sanitizer) {
         this._deviceDetectorService = _deviceDetectorService;
@@ -227,11 +227,11 @@ export class TnCustomScrollbarComponent {
         this._checkScrollBar = false;
     }
 }
-TnCustomScrollbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnCustomScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.DeviceDetectorService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TnCustomScrollbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: { style: "style", useDefaultScrollBar: "useDefaultScrollBar", autoMode: "autoMode", class: "class", config: "config", whiteBackGround: "whiteBackGround", showScrollHorizontal: "showScrollHorizontal" }, outputs: { scrollY: "scrollY", scrollUp: "scrollUp", scrollDown: "scrollDown", scrollLeft: "scrollLeft", scrollRight: "scrollRight", scrollYReachEnd: "scrollYReachEnd", scrollYReachStart: "scrollYReachStart", scrollXReachEnd: "scrollXReachEnd", scrollXReachStart: "scrollXReachStart" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "defaulScrollbar", first: true, predicate: ["defaulScrollbar"], descendants: true }], ngImport: i0, template: "<div style=\"display: none;\" [innerHtml]=\"_styleText\">\r\n</div>\r\n<div *ngIf=\"useDefaultScrollBar\" #defaulScrollbar [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    (scroll)=\"onDefaultScrollY($event)\"\r\n    style=\"padding:0 !important; margin:0 !important; overflow: auto; width: 100%; height: 100%\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</div>\r\n<perfect-scrollbar *ngIf=\"!useDefaultScrollBar\" #scrollbar [config]=\"_config\" [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    class=\"tn-scroll-bar\" [class.bgWhite]=\"whiteBackGround\" (psScrollY)=\"onScrollY($event)\"\r\n    (psYReachEnd)=\"onScrollYReachEnd($event)\" (psYReachStart)=\"onScrollYReachStart($event)\"\r\n    (psXReachEnd)=\"onScrollXReachEnd($event)\" (psXReachStart)=\"onScrollXReachStart($event)\"\r\n    (psScrollUp)=\"onScrollUp($event)\" (psScrollDown)=\"onScrollDown($event)\" (psScrollLeft)=\"onScrollLeft($event)\"\r\n    (psScrollRight)=\"onScrollRight($event)\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</perfect-scrollbar>\r\n<ng-template #content>\r\n    <ng-content></ng-content>\r\n</ng-template>", styles: [""], components: [{ type: i3.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnCustomScrollbarComponent, decorators: [{
+TnCustomScrollbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnCustomScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.DeviceDetectorService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+TnCustomScrollbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: { style: "style", useDefaultScrollBar: "useDefaultScrollBar", autoMode: "autoMode", class: "class", config: "config", whiteBackGround: "whiteBackGround", showScrollHorizontal: "showScrollHorizontal" }, outputs: { scrollY: "scrollY", scrollUp: "scrollUp", scrollDown: "scrollDown", scrollLeft: "scrollLeft", scrollRight: "scrollRight", scrollYReachEnd: "scrollYReachEnd", scrollYReachStart: "scrollYReachStart", scrollXReachEnd: "scrollXReachEnd", scrollXReachStart: "scrollXReachStart" }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "defaulScrollbar", first: true, predicate: ["defaulScrollbar"], descendants: true }], ngImport: i0, template: "<div style=\"display: none;\" [innerHtml]=\"_styleText\">\r\n</div>\r\n<div *ngIf=\"useDefaultScrollBar\" #defaulScrollbar [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    (scroll)=\"onDefaultScrollY($event)\"\r\n    style=\"padding:0 !important; margin:0 !important; overflow: auto; width: 100%; height: 100%\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</div>\r\n<perfect-scrollbar *ngIf=\"!useDefaultScrollBar\" #scrollbar [config]=\"_config\" [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    class=\"tn-scroll-bar\" [class.bgWhite]=\"whiteBackGround\" (psScrollY)=\"onScrollY($event)\"\r\n    (psYReachEnd)=\"onScrollYReachEnd($event)\" (psYReachStart)=\"onScrollYReachStart($event)\"\r\n    (psXReachEnd)=\"onScrollXReachEnd($event)\" (psXReachStart)=\"onScrollXReachStart($event)\"\r\n    (psScrollUp)=\"onScrollUp($event)\" (psScrollDown)=\"onScrollDown($event)\" (psScrollLeft)=\"onScrollLeft($event)\"\r\n    (psScrollRight)=\"onScrollRight($event)\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</perfect-scrollbar>\r\n<ng-template #content>\r\n    <ng-content></ng-content>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TnCustomScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tn-custom-scrollbar', template: "<div style=\"display: none;\" [innerHtml]=\"_styleText\">\r\n</div>\r\n<div *ngIf=\"useDefaultScrollBar\" #defaulScrollbar [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    (scroll)=\"onDefaultScrollY($event)\"\r\n    style=\"padding:0 !important; margin:0 !important; overflow: auto; width: 100%; height: 100%\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</div>\r\n<perfect-scrollbar *ngIf=\"!useDefaultScrollBar\" #scrollbar [config]=\"_config\" [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    class=\"tn-scroll-bar\" [class.bgWhite]=\"whiteBackGround\" (psScrollY)=\"onScrollY($event)\"\r\n    (psYReachEnd)=\"onScrollYReachEnd($event)\" (psYReachStart)=\"onScrollYReachStart($event)\"\r\n    (psXReachEnd)=\"onScrollXReachEnd($event)\" (psXReachStart)=\"onScrollXReachStart($event)\"\r\n    (psScrollUp)=\"onScrollUp($event)\" (psScrollDown)=\"onScrollDown($event)\" (psScrollLeft)=\"onScrollLeft($event)\"\r\n    (psScrollRight)=\"onScrollRight($event)\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</perfect-scrollbar>\r\n<ng-template #content>\r\n    <ng-content></ng-content>\r\n</ng-template>", styles: [""] }]
+            args: [{ selector: 'tn-custom-scrollbar', template: "<div style=\"display: none;\" [innerHtml]=\"_styleText\">\r\n</div>\r\n<div *ngIf=\"useDefaultScrollBar\" #defaulScrollbar [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    (scroll)=\"onDefaultScrollY($event)\"\r\n    style=\"padding:0 !important; margin:0 !important; overflow: auto; width: 100%; height: 100%\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</div>\r\n<perfect-scrollbar *ngIf=\"!useDefaultScrollBar\" #scrollbar [config]=\"_config\" [ngStyle]=\"style\" [ngClass]=\"class\"\r\n    class=\"tn-scroll-bar\" [class.bgWhite]=\"whiteBackGround\" (psScrollY)=\"onScrollY($event)\"\r\n    (psYReachEnd)=\"onScrollYReachEnd($event)\" (psYReachStart)=\"onScrollYReachStart($event)\"\r\n    (psXReachEnd)=\"onScrollXReachEnd($event)\" (psXReachStart)=\"onScrollXReachStart($event)\"\r\n    (psScrollUp)=\"onScrollUp($event)\" (psScrollDown)=\"onScrollDown($event)\" (psScrollLeft)=\"onScrollLeft($event)\"\r\n    (psScrollRight)=\"onScrollRight($event)\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</perfect-scrollbar>\r\n<ng-template #content>\r\n    <ng-content></ng-content>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DeviceDetectorService }, { type: i2.DomSanitizer }]; }, propDecorators: { scrollbar: [{
                 type: ViewChild,
                 args: ['scrollbar']

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

@@ -4,10 +4,10 @@ import { CommonService } from '../../services/common.service';
 import { DomService } from '../../services/dom.service';
 import * as i0 from "@angular/core";
 import * as i1 from "ngx-device-detector";
-import * as i2 from "tn-custom-primeng/dialog";
-import * as i3 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
-import * as i4 from "tn-custom-primeng/api";
-import * as i5 from "@angular/common";
+import * as i2 from "tn-custom-primeng/api";
+import * as i3 from "@angular/common";
+import * as i4 from "tn-custom-primeng/dialog";
+import * as i5 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
 import * as i6 from "@ngx-translate/core";
 export class TnDialogComponent {
     constructor(_injector, _deviceDetectorService) {
@@ -94,11 +94,11 @@ export class TnDialogComponent {
         return this._commonService.findTemplateFromList(this.children, controlType);
     }
 }
-TnDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnDialogComponent, deps: [{ token: i0.Injector }, { token: i1.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
-TnDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", 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: "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)\" (onShow)=\"handleShowDialog($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 && formBase && formBase.buttonTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n        </ng-container>\r\n    </p-footer>\r\n    <p-footer *ngIf=\"showFooter && footer\">\r\n        <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n", styles: [""], components: [{ type: i2.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"] }, { type: i3.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { type: i4.Footer, selector: "p-footer" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnDialogComponent, decorators: [{
+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: "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)\" (onShow)=\"handleShowDialog($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 && formBase && formBase.buttonTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n        </ng-container>\r\n    </p-footer>\r\n    <p-footer *ngIf=\"showFooter && footer\">\r\n        <ng-container *ngTemplateOutlet=\"footer\"></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: "component", type: i5.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: i6.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)\" (onShow)=\"handleShowDialog($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 && formBase && formBase.buttonTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n        </ng-container>\r\n    </p-footer>\r\n    <p-footer *ngIf=\"showFooter && footer\">\r\n        <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n", styles: [""] }]
+            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)\" (onShow)=\"handleShowDialog($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 && formBase && formBase.buttonTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n        </ng-container>\r\n    </p-footer>\r\n    <p-footer *ngIf=\"showFooter && footer\">\r\n        <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DeviceDetectorService }]; }, propDecorators: { dialog: [{
                 type: ViewChild,
                 args: ['dialog', { static: true }]

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

@@ -1,9 +1,9 @@
 import { Component, ContentChildren, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/common.service";
-import * as i2 from "tn-custom-primeng/tabview";
-import * as i3 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
-import * as i4 from "@angular/common";
+import * as i2 from "@angular/common";
+import * as i3 from "tn-custom-primeng/tabview";
+import * as i4 from "../tn-custom-scrollbar/tn-custom-scrollbar.component";
 export class TnTabViewComponent {
     constructor(_commonService) {
         this._commonService = _commonService;
@@ -65,9 +65,9 @@ export class TnTabViewComponent {
         this.onTabChange.emit(evt);
     }
 }
-TnTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnTabViewComponent, deps: [{ token: i1.CommonService }], target: i0.ɵɵFactoryTarget.Component });
-TnTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TnTabViewComponent, selector: "tn-tabview", inputs: { vertical: "vertical", data: "data", allowViewAll: "allowViewAll", activeIndex: "activeIndex", isDynamicHeight: "isDynamicHeight", useScrollbar: "useScrollbar" }, outputs: { onTabChange: "onTabChange", activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "children", predicate: TemplateRef }], 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\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container *ngIf=\"allowViewAll || currentTabIndex == i\">\r\n                    <tn-custom-scrollbar *ngIf=\"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=\"!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"], components: [{ type: i2.TabView, selector: "p-tabView", inputs: ["orientation", "activeIndex", "style", "styleClass", "controlClose"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { type: i2.TabPanel, selector: "p-tabPanel", inputs: ["cache", "tooltipPosition", "tooltipPositionStyle", "selected", "disabled", "header", "closable", "headerStyle", "headerStyleClass", "leftIcon", "rightIcon", "tooltip", "tooltipStyleClass"] }, { type: i3.TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnTabViewComponent, decorators: [{
+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", activeIndex: "activeIndex", isDynamicHeight: "isDynamicHeight", useScrollbar: "useScrollbar" }, outputs: { onTabChange: "onTabChange", activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "children", predicate: TemplateRef }], 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\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container *ngIf=\"allowViewAll || currentTabIndex == i\">\r\n                    <tn-custom-scrollbar *ngIf=\"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=\"!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"] }] });
+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\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container *ngIf=\"allowViewAll || currentTabIndex == i\">\r\n                    <tn-custom-scrollbar *ngIf=\"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=\"!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"] }]
         }], ctorParameters: function () { return [{ type: i1.CommonService }]; }, propDecorators: { children: [{

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

@@ -12,11 +12,11 @@ export class TnTemplateComponent extends DataFormBase {
         this.onChanged.emit('Title template');
     }
 }
-TnTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnTemplateComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TnTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", 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: [""], directives: [{ type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TnTemplateComponent, decorators: [{
+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"] }] });
+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>", styles: [""] }]
+            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>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { onChanged: [{
                 type: Output
             }] } });