@neoprototype/neop-ui-lib 1.0.28 → 1.0.29

package/fesm2022/neoprototype-neop-ui-lib.mjs

@@ -130,7 +130,7 @@ class NpAlertService {
             title,
             message,
             autoHide: true,
-            isFromService: true,
+            isFromService: true
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -772,6 +772,7 @@ class NpDropdownsComponent {
     searchControl = new FormControl('');
     originalList = [];
     filteredList = [];
+    selectedItem = null;
     ngOnInit() {
         this.originalList = [...this.list];
         this.filteredList = [...this.list];
@@ -785,12 +786,13 @@ class NpDropdownsComponent {
     change(value) { }
     onSelectItem(item) {
         this.visible = false;
-        if (this.npType !== 'icon') {
-            this.value = item?.value;
-        }
-        // this.label = item?.label;
-        // this.valueChange?.emit(item);
+        // if (this.npType !== 'icon') {
+        //   this.value = item?.value;
+        // }
+        this.selectedItem = item;
+        this.value = item?.label;
         this.valueChange.emit(item);
+        this.searchControl.setValue('');
     }
     onRightIconClick() {
         this.searchControl.setValue('');
@@ -813,7 +815,7 @@ class NpDropdownsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDropdownsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", className: "className", value: "value", useSearch: "useSearch", alwaysOpen: "alwaysOpen", placement: "placement", list: "list" }, outputs: { valueChange: "valueChange", visible: "visible" }, ngImport: i0, template: "<np-button\n  class=\"inline-block w-auto np-dropdown {{ className }}\"\n  [npType]=\"npType\"\n  [npSize]=\"npSize\"\n  nz-dropdown\n  nzTrigger=\"click\"\n  [nzDropdownMenu]=\"menu\"\n  [nzVisible]=\"alwaysOpen\"\n  [nzPlacement]=\"placement\"\n>\n  <div class=\"flex gap-1 items-center\">\n    {{ value }}\n    @if (npType === 'icon') {\n    <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n    } @else {\n    <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n    }\n  </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n      <np-input-field\n        size=\"sm\"\n        type=\"string\"\n        placeholder=\"Search\"\n        iconLeft=\"fa-regular fa-magnifying-glass\"\n        iconRight=\"fa-solid fa-xmark-large\"\n        [input]=\"searchControl\"\n        (iconRightClick)=\"onRightIconClick()\"\n      ></np-input-field>\n    </div>\n    @for (item of filteredList; track item) {\n    <ng-container\n      *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n    ></ng-container>\n    }\n  </ul>\n\n  <ng-template #contentMenu let-item=\"item\">\n    @if (item?.type === 'divider') {\n    <li nz-menu-divider></li>\n    } @else if (!item?.childrens) {\n    <li nz-menu-item (click)=\"onSelectItem(item)\">\n      <ng-container\n        *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n      ></ng-container>\n    </li>\n    } @else {\n    <ng-container\n      *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n    ></ng-container>\n    }\n  </ng-template>\n\n  <ng-template #contentSubMenuTemplate let-item=\"item\">\n    <li nz-submenu [nzTitle]=\"submenuTitle\">\n      <ng-template #submenuTitle>\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n        ></ng-container>\n      </ng-template>\n      <ul>\n        @for (itemChild of item?.childrens; track itemChild) { @if\n        (itemChild?.type === 'divider') {\n        <li nz-menu-divider></li>\n        } @else if (!itemChild?.childrens) {\n        <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n          <ng-container\n            *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n          ></ng-container>\n        </li>\n        } @else {\n\n        <!-- Start Fix temp when not use recursive template -->\n        <li nz-submenu [nzTitle]=\"submenuTitle2\">\n          <ng-template #submenuTitle2>\n            <ng-container\n              *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n            ></ng-container>\n          </ng-template>\n          <ul>\n            @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n            <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  contentTemplate;\n                  context: { item: itemChild2 }\n                \"\n              ></ng-container>\n            </li>\n            }\n          </ul>\n        </li>\n        <!-- End Fix temp when not use recursive template -->\n\n        <!-- <ng-container\n          *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n        ></ng-container> -->\n        } }\n      </ul>\n    </li>\n  </ng-template>\n\n  <ng-template #contentTemplate let-item=\"item\">\n    <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n    {{ item?.label }}\n  </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", className: "className", value: "value", useSearch: "useSearch", alwaysOpen: "alwaysOpen", placement: "placement", list: "list" }, outputs: { valueChange: "valueChange", visible: "visible" }, ngImport: i0, template: "<np-button\n  class=\"inline-block w-auto np-dropdown {{ className }}\"\n  [npType]=\"npType\"\n  [npSize]=\"npSize\"\n  nz-dropdown\n  nzTrigger=\"click\"\n  [nzDropdownMenu]=\"menu\"\n  [nzVisible]=\"alwaysOpen\"\n  [nzPlacement]=\"placement\"\n>\n  <div class=\"flex gap-1 items-center\">\n    <i *ngIf=\"selectedItem?.classIcon\" class=\"{{ selectedItem?.classIcon }}\"></i>\n    {{ selectedItem?.label || value }}\n    @if (npType === 'icon') {\n    <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n    } @else {\n    <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n    }\n  </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n      <np-input-field\n        size=\"sm\"\n        type=\"string\"\n        placeholder=\"Search\"\n        iconLeft=\"fa-regular fa-magnifying-glass\"\n        iconRight=\"fa-solid fa-xmark-large\"\n        [input]=\"searchControl\"\n        (iconRightClick)=\"onRightIconClick()\"\n      ></np-input-field>\n    </div>\n    @for (item of filteredList; track item) {\n      <ng-container\n        *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n      ></ng-container>\n    }\n  </ul>\n\n  <ng-template #contentMenu let-item=\"item\">\n    @if (item?.type === 'divider') {\n    <li nz-menu-divider></li>\n    } @else if (!item?.childrens) {\n    <li nz-menu-item (click)=\"onSelectItem(item)\">\n      <ng-container\n        *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n      ></ng-container>\n    </li>\n    } @else {\n    <ng-container\n      *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n    ></ng-container>\n    }\n  </ng-template>\n\n  <ng-template #contentSubMenuTemplate let-item=\"item\">\n    <li nz-submenu [nzTitle]=\"submenuTitle\">\n      <ng-template #submenuTitle>\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n        ></ng-container>\n      </ng-template>\n      <ul>\n        @for (itemChild of item?.childrens; track itemChild) { @if\n        (itemChild?.type === 'divider') {\n        <li nz-menu-divider></li>\n        } @else if (!itemChild?.childrens) {\n        <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n          <ng-container\n            *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n          ></ng-container>\n        </li>\n        } @else {\n\n        <!-- Start Fix temp when not use recursive template -->\n        <li nz-submenu [nzTitle]=\"submenuTitle2\">\n          <ng-template #submenuTitle2>\n            <ng-container\n              *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n            ></ng-container>\n          </ng-template>\n          <ul>\n            @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n            <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  contentTemplate;\n                  context: { item: itemChild2 }\n                \"\n              ></ng-container>\n            </li>\n            }\n          </ul>\n        </li>\n        <!-- End Fix temp when not use recursive template -->\n\n        <!-- <ng-container\n          *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n        ></ng-container> -->\n        } }\n      </ul>\n    </li>\n  </ng-template>\n\n  <ng-template #contentTemplate let-item=\"item\">\n    <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n    {{ item?.label }}\n  </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: 
                 // NzPopoverModule,
                 NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i2$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "directive", type: i2$1.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i3$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type: 
                 // NpDropdownContentMenuComponent
@@ -831,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         // NpDropdownContentMenuComponent
                         NzSelectModule,
                         NpInputFieldComponent,
-                    ], template: "<np-button\n  class=\"inline-block w-auto np-dropdown {{ className }}\"\n  [npType]=\"npType\"\n  [npSize]=\"npSize\"\n  nz-dropdown\n  nzTrigger=\"click\"\n  [nzDropdownMenu]=\"menu\"\n  [nzVisible]=\"alwaysOpen\"\n  [nzPlacement]=\"placement\"\n>\n  <div class=\"flex gap-1 items-center\">\n    {{ value }}\n    @if (npType === 'icon') {\n    <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n    } @else {\n    <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n    }\n  </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n      <np-input-field\n        size=\"sm\"\n        type=\"string\"\n        placeholder=\"Search\"\n        iconLeft=\"fa-regular fa-magnifying-glass\"\n        iconRight=\"fa-solid fa-xmark-large\"\n        [input]=\"searchControl\"\n        (iconRightClick)=\"onRightIconClick()\"\n      ></np-input-field>\n    </div>\n    @for (item of filteredList; track item) {\n    <ng-container\n      *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n    ></ng-container>\n    }\n  </ul>\n\n  <ng-template #contentMenu let-item=\"item\">\n    @if (item?.type === 'divider') {\n    <li nz-menu-divider></li>\n    } @else if (!item?.childrens) {\n    <li nz-menu-item (click)=\"onSelectItem(item)\">\n      <ng-container\n        *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n      ></ng-container>\n    </li>\n    } @else {\n    <ng-container\n      *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n    ></ng-container>\n    }\n  </ng-template>\n\n  <ng-template #contentSubMenuTemplate let-item=\"item\">\n    <li nz-submenu [nzTitle]=\"submenuTitle\">\n      <ng-template #submenuTitle>\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n        ></ng-container>\n      </ng-template>\n      <ul>\n        @for (itemChild of item?.childrens; track itemChild) { @if\n        (itemChild?.type === 'divider') {\n        <li nz-menu-divider></li>\n        } @else if (!itemChild?.childrens) {\n        <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n          <ng-container\n            *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n          ></ng-container>\n        </li>\n        } @else {\n\n        <!-- Start Fix temp when not use recursive template -->\n        <li nz-submenu [nzTitle]=\"submenuTitle2\">\n          <ng-template #submenuTitle2>\n            <ng-container\n              *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n            ></ng-container>\n          </ng-template>\n          <ul>\n            @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n            <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  contentTemplate;\n                  context: { item: itemChild2 }\n                \"\n              ></ng-container>\n            </li>\n            }\n          </ul>\n        </li>\n        <!-- End Fix temp when not use recursive template -->\n\n        <!-- <ng-container\n          *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n        ></ng-container> -->\n        } }\n      </ul>\n    </li>\n  </ng-template>\n\n  <ng-template #contentTemplate let-item=\"item\">\n    <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n    {{ item?.label }}\n  </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"] }]
+                    ], template: "<np-button\n  class=\"inline-block w-auto np-dropdown {{ className }}\"\n  [npType]=\"npType\"\n  [npSize]=\"npSize\"\n  nz-dropdown\n  nzTrigger=\"click\"\n  [nzDropdownMenu]=\"menu\"\n  [nzVisible]=\"alwaysOpen\"\n  [nzPlacement]=\"placement\"\n>\n  <div class=\"flex gap-1 items-center\">\n    <i *ngIf=\"selectedItem?.classIcon\" class=\"{{ selectedItem?.classIcon }}\"></i>\n    {{ selectedItem?.label || value }}\n    @if (npType === 'icon') {\n    <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n    } @else {\n    <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n    }\n  </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu>\n    <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n      <np-input-field\n        size=\"sm\"\n        type=\"string\"\n        placeholder=\"Search\"\n        iconLeft=\"fa-regular fa-magnifying-glass\"\n        iconRight=\"fa-solid fa-xmark-large\"\n        [input]=\"searchControl\"\n        (iconRightClick)=\"onRightIconClick()\"\n      ></np-input-field>\n    </div>\n    @for (item of filteredList; track item) {\n      <ng-container\n        *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n      ></ng-container>\n    }\n  </ul>\n\n  <ng-template #contentMenu let-item=\"item\">\n    @if (item?.type === 'divider') {\n    <li nz-menu-divider></li>\n    } @else if (!item?.childrens) {\n    <li nz-menu-item (click)=\"onSelectItem(item)\">\n      <ng-container\n        *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n      ></ng-container>\n    </li>\n    } @else {\n    <ng-container\n      *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n    ></ng-container>\n    }\n  </ng-template>\n\n  <ng-template #contentSubMenuTemplate let-item=\"item\">\n    <li nz-submenu [nzTitle]=\"submenuTitle\">\n      <ng-template #submenuTitle>\n        <ng-container\n          *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n        ></ng-container>\n      </ng-template>\n      <ul>\n        @for (itemChild of item?.childrens; track itemChild) { @if\n        (itemChild?.type === 'divider') {\n        <li nz-menu-divider></li>\n        } @else if (!itemChild?.childrens) {\n        <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n          <ng-container\n            *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n          ></ng-container>\n        </li>\n        } @else {\n\n        <!-- Start Fix temp when not use recursive template -->\n        <li nz-submenu [nzTitle]=\"submenuTitle2\">\n          <ng-template #submenuTitle2>\n            <ng-container\n              *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n            ></ng-container>\n          </ng-template>\n          <ul>\n            @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n            <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  contentTemplate;\n                  context: { item: itemChild2 }\n                \"\n              ></ng-container>\n            </li>\n            }\n          </ul>\n        </li>\n        <!-- End Fix temp when not use recursive template -->\n\n        <!-- <ng-container\n          *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n        ></ng-container> -->\n        } }\n      </ul>\n    </li>\n  </ng-template>\n\n  <ng-template #contentTemplate let-item=\"item\">\n    <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n    {{ item?.label }}\n  </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { npType: [{
                 type: Input
             }], npSize: [{
@@ -1157,11 +1159,11 @@ class NpActionBarComponent {
         return visibleIcons * (iconWidth + gap);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n  <div #resizeContainer  class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n    <button\n      *ngIf=\"canPrevious\"\n      (click)=\"scrollLeft()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isPreviousDisable,\n        'cursor-pointer': !isPreviousDisable,\n\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n    </button>\n\n    <div\n      #scrollWrapper\n      class=\"flex w-full no-scrollbar scroll-smooth\"\n      [ngClass]=\"{\n        'mx-3': compressedActions.length === 0 && !canPrevious,\n        'ms-3': !canPrevious && compressedActions.length > 0,\n        'overflow-x-auto': isOverflowing,\n      }\"\n      [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n      >\n      <ng-container *ngFor=\"let action of unCompressedActions2\">\n        <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n          <button\n            class=\"action-btn cursor-pointer bg-transparent\"\n            (click)=\"trigger(action)\"\n          >\n            <i class=\"{{ action.classIcon }}\"></i>\n          </button>\n        </np-tooltip>\n      </ng-container>\n    </div>\n\n    <button\n      *ngIf=\"canNext\"\n      (click)=\"scrollRight()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isNextDisable,\n        'cursor-pointer': !isNextDisable,\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n\n    <np-tooltip\n      *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n      text=\"More actions\"\n      class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n      [ngClass]=\"{\n        'bg-gray-100': isMoreOpen,\n        'bg-transparent': !isMoreOpen,\n      }\"\n    >\n      <button\n        #triggerBtn\n        class=\"action-btn cursor-pointer bg-transparent\"\n        (click)=\"showMoreActions()\"\n      >\n        <i class=\"fa-solid fa-ellipsis\"></i>\n      </button>\n    </np-tooltip>\n  </div>\n</div>\n\n<div\n  *ngIf=\"isMoreOpen\"\n  class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n  [ngStyle]=\"dropdownStyles\"\n>\n  <ng-container *ngFor=\"let action of compressedActions\">\n    <button\n      class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n      (click)=\"trigger(action)\"\n    >\n      <i class=\"{{ action.classIcon }}\"></i>\n      {{ action.label }}\n    </button>\n  </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.np-action-bar .no-scrollbar::-webkit-scrollbar{display:none}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTooltipComponent, selector: "np-tooltip", inputs: ["type", "text", "descriptions", "position", "tooltipVisible", "ngContent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n  <div #resizeContainer  class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n    <button\n      *ngIf=\"canPrevious\"\n      (click)=\"scrollLeft()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isPreviousDisable,\n        'cursor-pointer': !isPreviousDisable,\n\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n    </button>\n\n    <div\n      #scrollWrapper\n      class=\"flex w-full no-scrollbar scroll-smooth\"\n      [ngClass]=\"{\n        'mx-3': compressedActions.length === 0 && !canPrevious,\n        'ms-3': !canPrevious && compressedActions.length > 0,\n        'overflow-x-auto': isOverflowing,\n      }\"\n      [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n      >\n      <ng-container *ngFor=\"let action of unCompressedActions2\">\n        <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n          <button\n            class=\"action-btn cursor-pointer bg-transparent\"\n            (click)=\"trigger(action)\"\n          >\n            <i class=\"{{ action.classIcon }}\"></i>\n          </button>\n        </np-tooltip>\n      </ng-container>\n    </div>\n\n    <button\n      *ngIf=\"canNext\"\n      (click)=\"scrollRight()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isNextDisable,\n        'cursor-pointer': !isNextDisable,\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n\n    <np-tooltip\n      *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n      text=\"More actions\"\n      class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n      [ngClass]=\"{\n        'bg-gray-100': isMoreOpen,\n        'bg-transparent': !isMoreOpen,\n      }\"\n    >\n      <button\n        #triggerBtn\n        class=\"action-btn cursor-pointer bg-transparent\"\n        (click)=\"showMoreActions()\"\n      >\n        <i class=\"fa-solid fa-ellipsis\"></i>\n      </button>\n    </np-tooltip>\n  </div>\n</div>\n\n<div\n  *ngIf=\"isMoreOpen\"\n  class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n  [ngStyle]=\"dropdownStyles\"\n>\n  <ng-container *ngFor=\"let action of compressedActions\">\n    <button\n      class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n      (click)=\"trigger(action)\"\n    >\n      <i class=\"{{ action.classIcon }}\"></i>\n      {{ action.label }}\n    </button>\n  </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTooltipComponent, selector: "np-tooltip", inputs: ["type", "text", "descriptions", "position", "tooltipVisible", "ngContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpActionBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-action-bar', imports: [CommonModule, NpTooltipComponent], template: "<div class=\"relative flex w-full justify-center items-center\">\n  <div #resizeContainer  class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n    <button\n      *ngIf=\"canPrevious\"\n      (click)=\"scrollLeft()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isPreviousDisable,\n        'cursor-pointer': !isPreviousDisable,\n\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n    </button>\n\n    <div\n      #scrollWrapper\n      class=\"flex w-full no-scrollbar scroll-smooth\"\n      [ngClass]=\"{\n        'mx-3': compressedActions.length === 0 && !canPrevious,\n        'ms-3': !canPrevious && compressedActions.length > 0,\n        'overflow-x-auto': isOverflowing,\n      }\"\n      [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n      >\n      <ng-container *ngFor=\"let action of unCompressedActions2\">\n        <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n          <button\n            class=\"action-btn cursor-pointer bg-transparent\"\n            (click)=\"trigger(action)\"\n          >\n            <i class=\"{{ action.classIcon }}\"></i>\n          </button>\n        </np-tooltip>\n      </ng-container>\n    </div>\n\n    <button\n      *ngIf=\"canNext\"\n      (click)=\"scrollRight()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isNextDisable,\n        'cursor-pointer': !isNextDisable,\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n\n    <np-tooltip\n      *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n      text=\"More actions\"\n      class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n      [ngClass]=\"{\n        'bg-gray-100': isMoreOpen,\n        'bg-transparent': !isMoreOpen,\n      }\"\n    >\n      <button\n        #triggerBtn\n        class=\"action-btn cursor-pointer bg-transparent\"\n        (click)=\"showMoreActions()\"\n      >\n        <i class=\"fa-solid fa-ellipsis\"></i>\n      </button>\n    </np-tooltip>\n  </div>\n</div>\n\n<div\n  *ngIf=\"isMoreOpen\"\n  class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n  [ngStyle]=\"dropdownStyles\"\n>\n  <ng-container *ngFor=\"let action of compressedActions\">\n    <button\n      class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n      (click)=\"trigger(action)\"\n    >\n      <i class=\"{{ action.classIcon }}\"></i>\n      {{ action.label }}\n    </button>\n  </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.np-action-bar .no-scrollbar::-webkit-scrollbar{display:none}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"] }]
+            args: [{ selector: 'np-action-bar', imports: [CommonModule, NpTooltipComponent], template: "<div class=\"relative flex w-full justify-center items-center\">\n  <div #resizeContainer  class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n    <button\n      *ngIf=\"canPrevious\"\n      (click)=\"scrollLeft()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isPreviousDisable,\n        'cursor-pointer': !isPreviousDisable,\n\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n    </button>\n\n    <div\n      #scrollWrapper\n      class=\"flex w-full no-scrollbar scroll-smooth\"\n      [ngClass]=\"{\n        'mx-3': compressedActions.length === 0 && !canPrevious,\n        'ms-3': !canPrevious && compressedActions.length > 0,\n        'overflow-x-auto': isOverflowing,\n      }\"\n      [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n      >\n      <ng-container *ngFor=\"let action of unCompressedActions2\">\n        <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n          <button\n            class=\"action-btn cursor-pointer bg-transparent\"\n            (click)=\"trigger(action)\"\n          >\n            <i class=\"{{ action.classIcon }}\"></i>\n          </button>\n        </np-tooltip>\n      </ng-container>\n    </div>\n\n    <button\n      *ngIf=\"canNext\"\n      (click)=\"scrollRight()\"\n      class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n      [ngClass]=\"{\n        'opacity-40 cursor-not-allowed': isNextDisable,\n        'cursor-pointer': !isNextDisable,\n      }\"\n    >\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n\n    <np-tooltip\n      *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n      text=\"More actions\"\n      class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n      [ngClass]=\"{\n        'bg-gray-100': isMoreOpen,\n        'bg-transparent': !isMoreOpen,\n      }\"\n    >\n      <button\n        #triggerBtn\n        class=\"action-btn cursor-pointer bg-transparent\"\n        (click)=\"showMoreActions()\"\n      >\n        <i class=\"fa-solid fa-ellipsis\"></i>\n      </button>\n    </np-tooltip>\n  </div>\n</div>\n\n<div\n  *ngIf=\"isMoreOpen\"\n  class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n  [ngStyle]=\"dropdownStyles\"\n>\n  <ng-container *ngFor=\"let action of compressedActions\">\n    <button\n      class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n      (click)=\"trigger(action)\"\n    >\n      <i class=\"{{ action.classIcon }}\"></i>\n      {{ action.label }}\n    </button>\n  </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"] }]
         }], propDecorators: { actions: [{
                 type: Input
             }], data: [{
@@ -1223,7 +1225,7 @@ class NpTreeComponent {
                 ...item,
                 level,
                 parentId,
-                isExpanded: false,
+                isExpanded: item.isExpanded === true && !!item.childrens?.length,
                 isLastByLevel,
                 hasParentByLevel,
             };
@@ -1235,7 +1237,10 @@ class NpTreeComponent {
             return acc;
         }, []);
     }
-    onExpand(item) {
+    onExpand(event, item) {
+        if (item.path) {
+            event.stopPropagation();
+        }
         item.isExpanded = !item.isExpanded;
         this.visibleNodes = this.getVisibleNodes();
     }
@@ -1341,7 +1346,7 @@ class NpTreeComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { type: "type", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", className: "className", list: "list", input: "input", itemActiveId: "itemActiveId", useLine: "useLine" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ng-template\n  #wrapWithLevel\n  let-content\n  let-level=\"level\"\n  let-max=\"max\"\n  let-isLastByLevel=\"isLastByLevel\"\n  let-hasParentByLevel=\"hasParentByLevel\"\n  let-isLine=\"isLine\"\n>\n  <div\n    [ngClass]=\"[\n      'tree-line',\n      'level-' + level,\n      isLine ? '' : 'no-line',\n      isLastByLevel?.[level] ? 'is-last' : '',\n      hasParentByLevel?.[level] ? 'has-parent' : '',\n      expandPosition === 'right' ? 'expand-right' : '',\n    ]\"\n  >\n    @if (level < max) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        wrapWithLevel;\n        context: {\n          $implicit: content,\n          level: level + 1,\n          max: max,\n          isLastByLevel: isLastByLevel,\n          hasParentByLevel: hasParentByLevel,\n          isLine: isLine\n        }\n      \"\n    ></ng-container>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n  </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n  @for (item of visibleNodes; track item; let isLast = $last) {\n  <ng-template #treeNodeContent>\n    <div\n      class=\"tree-node\"\n      [ngClass]=\"[\n        itemHasChildren(item) ? 'has-children' : '',\n        item.parentId ? 'has-parent' : ''\n      ]\"\n    >\n      <div\n        class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n        [class.tree-node-selected]=\"item?.id === itemActiveId\"\n        [routerLink]=\"item.path ? item.path : null\"\n        [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n      >\n        <div class=\"flex gap-1 items-center\">\n          @if (expandPosition === 'left') {\n            @if (itemHasChildren(item)) {\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\">\n                <i\n                  class=\"fa-solid fa-caret-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            } @else {\n              <div class=\"w-[15px] h-[14px]\"></div>\n            }\n          }\n\n          <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n            @if ( type === 'checkbox' ) {\n            <np-checkbox\n              [input]=\"item.isChecked\"\n              [type]=\"item.checkboxType || 'checkbox'\"\n              size=\"md\"\n              (valueChange)=\"onCheckItem(item)\"\n              (click)=\"$event.stopPropagation()\"\n            ></np-checkbox>\n            } @if (type === 'icon') {\n              <i\n                class=\"fa-light\"\n                [ngClass]=\"\n                  item?.childrens?.length\n                    ? item?.isExpanded\n                      ? item?.iconExpanded\n                      : item?.iconCollapsed\n                    : item?.iconLeaf\n                \"\n              ></i>\n            }\n\n            <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n          </div>\n        </div>\n\n        <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n          @if ((item?.actions?.length ?? 0) > 0){\n            <np-action-bar\n              class=\"w-full flex justify-end\"\n              ngClass=\"\n                {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n              \"\n              [actions]=\"item.actions ?? []\"\n              [notCompressMin]=\"this.notCompressMin\"\n              [isNotResponsive]=\"isCompactActions\"\n            >\n            </np-action-bar>\n          }\n          @if (expandPosition === 'right')\n          {\n            @if (itemHasChildren(item)){\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\" className=\"flex w-[17px]\">\n                <i\n                  class=\"fa-solid fa-chevron-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            }\n            @else {\n              <div class=\"w-[17px]\"></div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      wrapWithLevel;\n      context: {\n        $implicit: treeNodeContent,\n        level: 0,\n        max: item.level ?? 0,\n        isLastByLevel: item.isLastByLevel,\n        hasParentByLevel: item.hasParentByLevel,\n        isLine: useLine\n      }\n    \"\n  ></ng-container>\n  }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NpActionBarComponent, selector: "np-action-bar", inputs: ["actions", "data", "notCompressMin", "isNotResponsive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { type: "type", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", className: "className", list: "list", input: "input", itemActiveId: "itemActiveId", useLine: "useLine" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ng-template\n  #wrapWithLevel\n  let-content\n  let-level=\"level\"\n  let-max=\"max\"\n  let-isLastByLevel=\"isLastByLevel\"\n  let-hasParentByLevel=\"hasParentByLevel\"\n  let-isLine=\"isLine\"\n>\n  <div\n    [ngClass]=\"[\n      'tree-line',\n      'level-' + level,\n      isLine ? '' : 'no-line',\n      isLastByLevel?.[level] ? 'is-last' : '',\n      hasParentByLevel?.[level] ? 'has-parent' : '',\n      expandPosition === 'right' ? 'expand-right' : '',\n    ]\"\n  >\n    @if (level < max) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        wrapWithLevel;\n        context: {\n          $implicit: content,\n          level: level + 1,\n          max: max,\n          isLastByLevel: isLastByLevel,\n          hasParentByLevel: hasParentByLevel,\n          isLine: isLine\n        }\n      \"\n    ></ng-container>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n  </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n  @for (item of visibleNodes; track item; let isLast = $last) {\n  <ng-template #treeNodeContent>\n    <div\n      class=\"tree-node\"\n      [ngClass]=\"[\n        itemHasChildren(item) ? 'has-children' : '',\n        item.parentId ? 'has-parent' : ''\n      ]\"\n    >\n      <div\n        class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n        [class.tree-node-selected]=\"item?.id === itemActiveId\"\n        [routerLink]=\"item.path ? item.path : null\"\n        [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n      >\n        <div class=\"flex gap-1 items-center\">\n          @if (expandPosition === 'left') {\n            @if (itemHasChildren(item)) {\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\">\n                <i\n                  class=\"fa-solid fa-caret-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            } @else {\n              <div class=\"w-[15px] h-[14px]\"></div>\n            }\n          }\n\n          <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n            @if ( type === 'checkbox' ) {\n            <np-checkbox\n              [input]=\"item.isChecked\"\n              [type]=\"item.checkboxType || 'checkbox'\"\n              size=\"md\"\n              (valueChange)=\"onCheckItem(item)\"\n              (click)=\"$event.stopPropagation()\"\n            ></np-checkbox>\n            } @if (type === 'icon') {\n              <i\n                class=\"fa-light\"\n                [ngClass]=\"\n                  item?.childrens?.length\n                    ? item?.isExpanded\n                      ? item?.iconExpanded\n                      : item?.iconCollapsed\n                    : item?.iconLeaf\n                \"\n              ></i>\n            }\n\n            <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n          </div>\n        </div>\n\n        <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n          @if ((item?.actions?.length ?? 0) > 0){\n            <np-action-bar\n              class=\"w-full flex justify-end\"\n              ngClass=\"\n                {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n              \"\n              [actions]=\"item.actions ?? []\"\n              [notCompressMin]=\"this.notCompressMin\"\n              [isNotResponsive]=\"isCompactActions\"\n              (click)=\"item.path ? $event.stopPropagation() : null\"\n            >\n            </np-action-bar>\n          }\n          @if (expandPosition === 'right')\n          {\n            @if (itemHasChildren(item)){\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\" className=\"flex w-[17px]\">\n                <i\n                  class=\"fa-solid fa-chevron-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            }\n            @else {\n              <div class=\"w-[17px]\"></div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      wrapWithLevel;\n      context: {\n        $implicit: treeNodeContent,\n        level: 0,\n        max: item.level ?? 0,\n        isLastByLevel: item.isLastByLevel,\n        hasParentByLevel: item.hasParentByLevel,\n        isLine: useLine\n      }\n    \"\n  ></ng-container>\n  }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NpActionBarComponent, selector: "np-action-bar", inputs: ["actions", "data", "notCompressMin", "isNotResponsive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTreeComponent, decorators: [{
             type: Component,
@@ -1351,7 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         NpButtonComponent,
                         RouterModule,
                         NpActionBarComponent,
-                    ], template: "<ng-template\n  #wrapWithLevel\n  let-content\n  let-level=\"level\"\n  let-max=\"max\"\n  let-isLastByLevel=\"isLastByLevel\"\n  let-hasParentByLevel=\"hasParentByLevel\"\n  let-isLine=\"isLine\"\n>\n  <div\n    [ngClass]=\"[\n      'tree-line',\n      'level-' + level,\n      isLine ? '' : 'no-line',\n      isLastByLevel?.[level] ? 'is-last' : '',\n      hasParentByLevel?.[level] ? 'has-parent' : '',\n      expandPosition === 'right' ? 'expand-right' : '',\n    ]\"\n  >\n    @if (level < max) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        wrapWithLevel;\n        context: {\n          $implicit: content,\n          level: level + 1,\n          max: max,\n          isLastByLevel: isLastByLevel,\n          hasParentByLevel: hasParentByLevel,\n          isLine: isLine\n        }\n      \"\n    ></ng-container>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n  </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n  @for (item of visibleNodes; track item; let isLast = $last) {\n  <ng-template #treeNodeContent>\n    <div\n      class=\"tree-node\"\n      [ngClass]=\"[\n        itemHasChildren(item) ? 'has-children' : '',\n        item.parentId ? 'has-parent' : ''\n      ]\"\n    >\n      <div\n        class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n        [class.tree-node-selected]=\"item?.id === itemActiveId\"\n        [routerLink]=\"item.path ? item.path : null\"\n        [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n      >\n        <div class=\"flex gap-1 items-center\">\n          @if (expandPosition === 'left') {\n            @if (itemHasChildren(item)) {\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\">\n                <i\n                  class=\"fa-solid fa-caret-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            } @else {\n              <div class=\"w-[15px] h-[14px]\"></div>\n            }\n          }\n\n          <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n            @if ( type === 'checkbox' ) {\n            <np-checkbox\n              [input]=\"item.isChecked\"\n              [type]=\"item.checkboxType || 'checkbox'\"\n              size=\"md\"\n              (valueChange)=\"onCheckItem(item)\"\n              (click)=\"$event.stopPropagation()\"\n            ></np-checkbox>\n            } @if (type === 'icon') {\n              <i\n                class=\"fa-light\"\n                [ngClass]=\"\n                  item?.childrens?.length\n                    ? item?.isExpanded\n                      ? item?.iconExpanded\n                      : item?.iconCollapsed\n                    : item?.iconLeaf\n                \"\n              ></i>\n            }\n\n            <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n          </div>\n        </div>\n\n        <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n          @if ((item?.actions?.length ?? 0) > 0){\n            <np-action-bar\n              class=\"w-full flex justify-end\"\n              ngClass=\"\n                {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n              \"\n              [actions]=\"item.actions ?? []\"\n              [notCompressMin]=\"this.notCompressMin\"\n              [isNotResponsive]=\"isCompactActions\"\n            >\n            </np-action-bar>\n          }\n          @if (expandPosition === 'right')\n          {\n            @if (itemHasChildren(item)){\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\" className=\"flex w-[17px]\">\n                <i\n                  class=\"fa-solid fa-chevron-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            }\n            @else {\n              <div class=\"w-[17px]\"></div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      wrapWithLevel;\n      context: {\n        $implicit: treeNodeContent,\n        level: 0,\n        max: item.level ?? 0,\n        isLastByLevel: item.isLastByLevel,\n        hasParentByLevel: item.hasParentByLevel,\n        isLine: useLine\n      }\n    \"\n  ></ng-container>\n  }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"] }]
+                    ], template: "<ng-template\n  #wrapWithLevel\n  let-content\n  let-level=\"level\"\n  let-max=\"max\"\n  let-isLastByLevel=\"isLastByLevel\"\n  let-hasParentByLevel=\"hasParentByLevel\"\n  let-isLine=\"isLine\"\n>\n  <div\n    [ngClass]=\"[\n      'tree-line',\n      'level-' + level,\n      isLine ? '' : 'no-line',\n      isLastByLevel?.[level] ? 'is-last' : '',\n      hasParentByLevel?.[level] ? 'has-parent' : '',\n      expandPosition === 'right' ? 'expand-right' : '',\n    ]\"\n  >\n    @if (level < max) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        wrapWithLevel;\n        context: {\n          $implicit: content,\n          level: level + 1,\n          max: max,\n          isLastByLevel: isLastByLevel,\n          hasParentByLevel: hasParentByLevel,\n          isLine: isLine\n        }\n      \"\n    ></ng-container>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    }\n  </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n  @for (item of visibleNodes; track item; let isLast = $last) {\n  <ng-template #treeNodeContent>\n    <div\n      class=\"tree-node\"\n      [ngClass]=\"[\n        itemHasChildren(item) ? 'has-children' : '',\n        item.parentId ? 'has-parent' : ''\n      ]\"\n    >\n      <div\n        class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n        [class.tree-node-selected]=\"item?.id === itemActiveId\"\n        [routerLink]=\"item.path ? item.path : null\"\n        [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n      >\n        <div class=\"flex gap-1 items-center\">\n          @if (expandPosition === 'left') {\n            @if (itemHasChildren(item)) {\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\">\n                <i\n                  class=\"fa-solid fa-caret-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            } @else {\n              <div class=\"w-[15px] h-[14px]\"></div>\n            }\n          }\n\n          <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n            @if ( type === 'checkbox' ) {\n            <np-checkbox\n              [input]=\"item.isChecked\"\n              [type]=\"item.checkboxType || 'checkbox'\"\n              size=\"md\"\n              (valueChange)=\"onCheckItem(item)\"\n              (click)=\"$event.stopPropagation()\"\n            ></np-checkbox>\n            } @if (type === 'icon') {\n              <i\n                class=\"fa-light\"\n                [ngClass]=\"\n                  item?.childrens?.length\n                    ? item?.isExpanded\n                      ? item?.iconExpanded\n                      : item?.iconCollapsed\n                    : item?.iconLeaf\n                \"\n              ></i>\n            }\n\n            <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n          </div>\n        </div>\n\n        <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n          @if ((item?.actions?.length ?? 0) > 0){\n            <np-action-bar\n              class=\"w-full flex justify-end\"\n              ngClass=\"\n                {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n              \"\n              [actions]=\"item.actions ?? []\"\n              [notCompressMin]=\"this.notCompressMin\"\n              [isNotResponsive]=\"isCompactActions\"\n              (click)=\"item.path ? $event.stopPropagation() : null\"\n            >\n            </np-action-bar>\n          }\n          @if (expandPosition === 'right')\n          {\n            @if (itemHasChildren(item)){\n              <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\" className=\"flex w-[17px]\">\n                <i\n                  class=\"fa-solid fa-chevron-right\"\n                  [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n                  style=\"color: rgba(102, 112, 133, 1)\"\n                ></i>\n              </np-button>\n            }\n            @else {\n              <div class=\"w-[17px]\"></div>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      wrapWithLevel;\n      context: {\n        $implicit: treeNodeContent,\n        level: 0,\n        max: item.level ?? 0,\n        isLastByLevel: item.isLastByLevel,\n        hasParentByLevel: item.hasParentByLevel,\n        isLine: useLine\n      }\n    \"\n  ></ng-container>\n  }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], expandPosition: [{
@@ -1398,7 +1403,6 @@ class NpPaginationComponent {
     set pageIndex(value) {
         if (value !== this._pageIndex) {
             this._pageIndex = value;
-            this.pageIndexChange.emit(this._pageIndex);
         }
     }
     get pageSizeOptions() {
@@ -1407,7 +1411,6 @@ class NpPaginationComponent {
     set pageSizeOptions(value) {
         if (value !== this._pageSizeValue) {
             this._pageSizeValue = value;
-            this.pageSizeChange.emit(value);
             this.pageIndex = 1;
             this.calculatePageTotal();
         }
@@ -1498,6 +1501,7 @@ class NpPaginationComponent {
     changePage(newPage) {
         if (typeof newPage === 'number' && newPage !== this.pageIndex) {
             this.pageIndex = newPage;
+            this.pageIndexChange.emit(this.pageIndex);
         }
     }
     onDocumentClick(event) {
@@ -1567,11 +1571,11 @@ class NpScrollbarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpScrollbarComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpScrollbarComponent, isStandalone: true, selector: "np-scrollbar", inputs: { width: "width", height: "height", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"custom-scrollbar overflow-auto\"\n  [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".custom-scrollbar::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpScrollbarComponent, isStandalone: true, selector: "np-scrollbar", inputs: { width: "width", height: "height", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"custom-scrollbar overflow-auto\"\n  [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-scrollbar', imports: [CommonModule], template: "<div\n  #container\n  class=\"custom-scrollbar overflow-auto\"\n  [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".custom-scrollbar::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"] }]
+            args: [{ selector: 'np-scrollbar', imports: [CommonModule], template: "<div\n  #container\n  class=\"custom-scrollbar overflow-auto\"\n  [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { static: true }]
@@ -1592,10 +1596,12 @@ class NpAlertComponent {
     description = '';
     title;
     message;
+    autoHideDelay = 3000;
     autoHide = true;
+    isFromService = false;
     isMessageVisible = false;
     opacity = 1;
-    isFromService = false;
+    padding = '16px';
     constructor(el, renderer, _alertService) {
         this.el = el;
         this.renderer = renderer;
@@ -1603,16 +1609,21 @@ class NpAlertComponent {
     }
     ngOnInit() {
         this._alertService.alert$.subscribe((data) => {
-            this.isFromService = data.isFromService ?? false;
             this.type = data.type ?? 'notification';
             this.state = data.state ?? 'info';
             this.title = data.title;
             this.description = data.description;
             this.message = data.message;
             this.opacity = 1;
+            this.padding = '16px';
+            setTimeout(() => this.startFadeOut(), this.autoHideDelay);
         });
+        if (this.isFromService) {
+            this.closeAlert();
+            return;
+        }
         if (this.autoHide) {
-            setTimeout(() => this.startFadeOut(), 3000);
+            setTimeout(() => this.startFadeOut(), this.autoHideDelay);
         }
     }
     startFadeOut() {
@@ -1635,6 +1646,7 @@ class NpAlertComponent {
     removeSelf() {
         if (this.isFromService) {
             this.opacity = 0;
+            this.padding = '0px';
         }
         else {
             this.renderer.removeChild(this.el.nativeElement.parentNode, this.el.nativeElement);
@@ -1682,11 +1694,11 @@ class NpAlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NpAlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHide: "autoHide" }, ngImport: i0, template: "<ng-container>\n  <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\">\n    <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n      <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n    </div>\n    <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n      <i class=\"glow fa-regular\"\n        [ngClass]=\"getIconNotification().icon\"\n        [ngStyle]=\"{ 'color': getIconNotification().color }\">\n      </i>\n    </div>\n\n    <div class=\"flex flex-col flex-1\">\n      <div class=\"flex justify-between\" *ngIf=\"title\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n        <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n          <i class=\"fa fa-times\"></i>\n        </button>\n      </div>\n\n      <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n      <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n        {{ message }}\n      </np-typography>\n\n      <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n        <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n        </button>\n        <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);padding:16px;box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHideDelay: "autoHideDelay", autoHide: "autoHide", isFromService: "isFromService" }, ngImport: i0, template: "<ng-container>\n  <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\" [style.padding]=\"padding\">\n    <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n      <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n    </div>\n    <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n      <i class=\"glow fa-regular\"\n        [ngClass]=\"getIconNotification().icon\"\n        [ngStyle]=\"{ 'color': getIconNotification().color }\">\n      </i>\n    </div>\n\n    <div class=\"flex flex-col flex-1\">\n      <div class=\"flex justify-between\" *ngIf=\"title\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n        <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n          <i class=\"fa fa-times\"></i>\n        </button>\n      </div>\n\n      <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n      <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n        {{ message }}\n      </np-typography>\n\n      <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n        <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n        </button>\n        <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n  <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\">\n    <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n      <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n    </div>\n    <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n      <i class=\"glow fa-regular\"\n        [ngClass]=\"getIconNotification().icon\"\n        [ngStyle]=\"{ 'color': getIconNotification().color }\">\n      </i>\n    </div>\n\n    <div class=\"flex flex-col flex-1\">\n      <div class=\"flex justify-between\" *ngIf=\"title\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n        <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n          <i class=\"fa fa-times\"></i>\n        </button>\n      </div>\n\n      <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n      <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n        {{ message }}\n      </np-typography>\n\n      <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n        <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n        </button>\n        <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);padding:16px;box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
+            args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n  <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\" [style.padding]=\"padding\">\n    <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n      <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n    </div>\n    <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n      <i class=\"glow fa-regular\"\n        [ngClass]=\"getIconNotification().icon\"\n        [ngStyle]=\"{ 'color': getIconNotification().color }\">\n      </i>\n    </div>\n\n    <div class=\"flex flex-col flex-1\">\n      <div class=\"flex justify-between\" *ngIf=\"title\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n        <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n          <i class=\"fa fa-times\"></i>\n        </button>\n      </div>\n\n      <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n      <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n        {{ message }}\n      </np-typography>\n\n      <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n        <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n        </button>\n        <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { type: [{
                 type: Input
             }], state: [{
@@ -1697,8 +1709,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], message: [{
                 type: Input
+            }], autoHideDelay: [{
+                type: Input
             }], autoHide: [{
                 type: Input
+            }], isFromService: [{
+                type: Input
             }] } });
 
 var ETypeNpBreadcrumb;
@@ -1897,24 +1913,25 @@ class NpTableComponent {
     constructor(cdr) {
         this.cdr = cdr;
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.updatePaginationWidth();
-            this.syncRowHeights();
-        });
-        if (this.selectableType === 'checkbox') {
-            this.bindSelectAllListener();
-        }
-        this.cdr.detectChanges();
-    }
-    ngOnInit() {
-        const [start, end] = this.scrollColumnsRange || [
-            0,
-            this.columns.length - 1,
-        ];
-        this.isAtStart = start === 0;
-        this.isAtEnd = end === this.columns.length - 1;
-    }
+    selectAllSub;
+    selectAllFc = new FormControl(false);
+    isIndeterminateAll = false;
+    currentPage = 1;
+    _pageSize = [];
+    currentPageSize = 10;
+    paginationWidth = '100%';
+    isAtStart = true;
+    isAtEnd = true;
+    _dataSource = [];
+    sortKey = null;
+    sortDirection = null;
+    originalDataSource = [];
+    activeFilterKey = null;
+    searchKeyword = {};
+    searchControls = {};
+    selectedFilters = {};
+    syncColumns = false;
+    syncRows = false;
     leftRows;
     middleRows;
     rightRows;
@@ -1924,12 +1941,15 @@ class NpTableComponent {
     tableLeft;
     tableMiddle;
     tableRight;
+    middleHeaderEls;
+    middleBodyEls;
+    filterIcons;
+    dropdownPositionMap = {};
     columns = [];
     selectableType = null;
     isSortable = false;
     isFilterable = false;
     isDeleteable = false;
-    pageSize = [];
     isUsePagination = true;
     panigationType = 'basic';
     state = 'normal';
@@ -1938,26 +1958,26 @@ class NpTableComponent {
     classNameRight = ''; // className for right fixed table
     scrollColumnsRange = null;
     scrollWidth = '';
+    scrollHeight = '';
     isReverse = false;
     showVerticalDivider = false;
-    selectAllSub;
-    selectAllFc = new FormControl(false);
-    isIndeterminateAll = false;
-    currentPage = 1;
-    currentPageSize = this.pageSize[0];
-    paginationWidth = '100%';
-    isAtStart = true;
-    isAtEnd = true;
-    _dataSource = [];
-    sortKey = null;
-    sortDirection = null;
     deleteSelectedRows = new EventEmitter();
+    sortChange = new EventEmitter();
+    filterChange = new EventEmitter();
+    rowChecked = new EventEmitter();
     set dataSource(value) {
         this._dataSource =
-            value?.map((row) => ({
-                ...row,
-                selectFc: new FormControl(false),
-            })) || [];
+            value?.map((row) => {
+                const selectFc = new FormControl(false);
+                selectFc.valueChanges.subscribe((checked) => {
+                    this.rowChecked.emit({ row, checked: !!checked });
+                });
+                return {
+                    ...row,
+                    selectFc,
+                };
+            }) || [];
+        this.originalDataSource = [...this._dataSource];
         this.currentPage = 1;
         this.selectAllFc.setValue(false, { emitEvent: false });
         this.isIndeterminateAll = false;
@@ -1978,6 +1998,32 @@ class NpTableComponent {
             });
         }
     }
+    set pageSize(value) {
+        this._pageSize = value;
+        this.currentPageSize = this._pageSize[0];
+    }
+    get pageSize() {
+        return this._pageSize;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.updatePaginationWidth();
+            this.syncRowHeights();
+            this.syncColumnWidths();
+        });
+        if (this.selectableType === 'checkbox') {
+            this.bindSelectAllListener();
+        }
+        this.cdr.detectChanges();
+    }
+    ngOnInit() {
+        const [start, end] = this.scrollColumnsRange || [
+            0,
+            this.columns.length - 1,
+        ];
+        this.isAtStart = start === 0;
+        this.isAtEnd = end === this.columns.length - 1;
+    }
     get fixedLeftColumns() {
         if (!this.scrollColumnsRange)
             return [];
@@ -2028,6 +2074,32 @@ class NpTableComponent {
         if (this.rightHead)
             this.rightHead.nativeElement.style.height = `${maxHead}px`;
     }
+    syncColumnWidths() {
+        const headerEls = this.middleHeaderEls.toArray();
+        const bodyEls = this.middleBodyEls.toArray();
+        for (let i = 0; i < headerEls.length; i++) {
+            headerEls[i]?.nativeElement.style.removeProperty('width');
+            bodyEls[i]?.nativeElement.style.removeProperty('width');
+            headerEls[i]?.nativeElement.style.removeProperty('min-width');
+            bodyEls[i]?.nativeElement.style.removeProperty('min-width');
+        }
+        for (let i = 0; i < headerEls.length; i++) {
+            const thEl = headerEls[i]?.nativeElement;
+            const tdEl = bodyEls[i]?.nativeElement;
+            const thWidth = thEl?.offsetWidth || 0;
+            const tdWidth = tdEl?.offsetWidth || 0;
+            const max = Math.max(thWidth, tdWidth);
+            const min = Math.min(thWidth, tdWidth);
+            if (thEl) {
+                thEl.style.width = `${max}px`;
+                thEl.style.minWidth = `${min}px`;
+            }
+            if (tdEl) {
+                tdEl.style.width = `${max}px`;
+                tdEl.style.minWidth = `${min}px`;
+            }
+        }
+    }
     updatePaginationWidth() {
         const wLeft = this.tableLeft?.nativeElement.offsetWidth || 0;
         const wMid = this.tableMiddle?.nativeElement.offsetWidth || 0;
@@ -2040,19 +2112,27 @@ class NpTableComponent {
         this.selectAllSub = this.selectAllFc.valueChanges.subscribe((checked) => {
             this._dataSource?.forEach((row) => {
                 row.selectFc.patchValue(checked, { emitEvent: false });
+                this.rowChecked.emit({ row, checked: !!checked });
             });
             this.isIndeterminateAll = false;
         });
     }
-    filterIcons;
-    dropdownPositionMap = {};
     get filteredData() {
         return this._dataSource.filter((row) => {
-            for (const key in this.selectedFilters) {
-                const selectedSet = this.selectedFilters[key];
-                if (selectedSet && selectedSet.size > 0 && !selectedSet.has(row[key])) {
+            for (const colKey in this.selectedFilters) {
+                const selectedSet = this.selectedFilters[colKey];
+                if (!selectedSet || selectedSet.size === 0)
+                    continue;
+                const col = this.columns.find((c) => c.key === colKey);
+                const rowValue = row[colKey];
+                const match = Array.from(selectedSet).some((filterValue) => {
+                    if (col?.filterFn) {
+                        return col.filterFn(rowValue, filterValue);
+                    }
+                    return rowValue === filterValue;
+                });
+                if (!match)
                     return false;
-                }
             }
             return true;
         });
@@ -2078,31 +2158,42 @@ class NpTableComponent {
     onSortColumn(column) {
         if (!column?.key)
             return;
-        if (this.sortKey === column.key) {
-            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-        }
-        else {
-            this.sortKey = column.key;
-            this.sortDirection = 'asc';
+        const modes = column.sortDirection || ['asc', 'desc', ''];
+        const current = this.sortKey === column.key ? this.sortDirection || '' : '';
+        const currentIndex = modes.indexOf(current);
+        const nextIndex = (currentIndex + 1) % modes.length;
+        const nextDirection = modes[nextIndex];
+        this.sortKey = column.key;
+        this.sortDirection = nextDirection === '' ? null : nextDirection;
+        this.sortChange.emit({
+            key: column.key,
+            direction: this.sortDirection,
+        });
+        if (column.isSortAPI) {
+            return;
         }
         if (!this.sortDirection) {
-            this._dataSource.sort((a, b) => 0);
-        }
-        else {
-            this._dataSource.sort((a, b) => {
-                const aValue = a[this.sortKey];
-                const bValue = b[this.sortKey];
-                const aNum = parseFloat(aValue);
-                const bNum = parseFloat(bValue);
-                const isNumber = !isNaN(aNum) && !isNaN(bNum);
-                if (isNumber) {
-                    return this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
-                }
-                return this.sortDirection === 'asc'
-                    ? String(aValue).localeCompare(String(bValue))
-                    : String(bValue).localeCompare(String(aValue));
-            });
+            this._dataSource = [...this.originalDataSource];
+            return;
         }
+        const sortFn = column.sortFn;
+        this._dataSource.sort((a, b) => {
+            if (sortFn) {
+                const result = sortFn(a, b);
+                return this.sortDirection === 'asc' ? result : -result;
+            }
+            const aValue = a[column.key];
+            const bValue = b[column.key];
+            const aNum = parseFloat(aValue);
+            const bNum = parseFloat(bValue);
+            const isNumber = !isNaN(aNum) && !isNaN(bNum);
+            if (isNumber) {
+                return this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+            }
+            return this.sortDirection === 'asc'
+                ? String(aValue).localeCompare(String(bValue))
+                : String(bValue).localeCompare(String(aValue));
+        });
         this.currentPage = 1;
     }
     onChangeSelectColumn($event) {
@@ -2129,10 +2220,6 @@ class NpTableComponent {
     }
     onRefresh() { }
     onContactSupport() { }
-    activeFilterKey = null;
-    searchKeyword = {};
-    searchControls = {};
-    selectedFilters = {};
     toggleFilter(key) {
         this.activeFilterKey = this.activeFilterKey === key ? null : key;
         if (!this.searchControls[key]) {
@@ -2159,24 +2246,25 @@ class NpTableComponent {
     }
     getDistinctFilteredValues(colKey) {
         const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
-        const uniqueSet = new Set();
+        const uniqueLabels = new Set();
         this._dataSource.forEach((row) => {
             const value = row[colKey];
-            if (!uniqueSet.has(value) &&
-                String(value).toLowerCase().includes(keyword)) {
-                uniqueSet.add(value);
-            }
-        });
-        const values = Array.from(uniqueSet);
-        const allNumbers = values.every((val) => !isNaN(parseFloat(val)));
-        return values.sort((a, b) => {
-            if (allNumbers) {
-                return parseFloat(a) - parseFloat(b);
+            if (Array.isArray(value)) {
+                value.forEach((item) => {
+                    const label = (item?.label || '').toString();
+                    if (label.toLowerCase().includes(keyword)) {
+                        uniqueLabels.add(label);
+                    }
+                });
             }
             else {
-                return String(a).localeCompare(String(b));
+                const label = value?.toString() || '';
+                if (label.toLowerCase().includes(keyword)) {
+                    uniqueLabels.add(label);
+                }
             }
         });
+        return Array.from(uniqueLabels).sort((a, b) => a.localeCompare(b));
     }
     getFilteredColumnValues(colKey) {
         const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
@@ -2197,6 +2285,13 @@ class NpTableComponent {
             this.selectedFilters[colKey].delete(value);
         }
         this.currentPage = 1;
+        const col = this.columns.find((c) => c.key === colKey);
+        if (col?.isFilterAPI) {
+            this.filterChange.emit({
+                key: colKey,
+                filters: Array.from(this.selectedFilters[colKey]),
+            });
+        }
         if (this.activeFilterKey && this.activeFilterKey !== colKey) {
             const currentControl = this.searchControls[this.activeFilterKey];
             const value = currentControl?.value || '';
@@ -2225,10 +2320,13 @@ class NpTableComponent {
         this.activeFilterKey = null;
     }
     onResizeWindow() {
-        setTimeout(() => this.syncRowHeights(), 0);
+        setTimeout(() => {
+            this.syncRowHeights();
+            this.syncColumnWidths();
+        }, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", pageSize: "pageSize", isUsePagination: "isUsePagination", panigationType: "panigationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource" }, outputs: { deleteSelectedRows: "deleteSelectedRows" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResizeWindow()" } }, viewQueries: [{ propertyName: "leftHead", first: true, predicate: ["leftHead"], descendants: true, read: ElementRef }, { propertyName: "middleHead", first: true, predicate: ["middleHead"], descendants: true, read: ElementRef }, { propertyName: "rightHead", first: true, predicate: ["rightHead"], descendants: true, read: ElementRef }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "leftRows", predicate: ["leftRow"], descendants: true, read: ElementRef }, { propertyName: "middleRows", predicate: ["middleRow"], descendants: true, read: ElementRef }, { propertyName: "rightRows", predicate: ["rightRow"], descendants: true, read: ElementRef }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n  @if (scrollColumnsRange == null) {\n    <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n      <thead>\n        <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n          <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n            <div class=\"flex justify-between items-center\">\n              <div class=\"text-sm font-medium text-gray-700\">\n                {{ selectedCount }} selected\n              </div>\n              <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n            </div>\n          </td>\n        </tr>\n\n        <tr>\n          <th\n            class=\"select-column\"\n            *ngIf=\"selectableType !== null && state !== 'loading'\"\n            >\n            <np-checkbox\n              *ngIf=\"selectableType === 'checkbox'\"\n              type=\"checkbox\"\n              size=\"sm\"\n              [input]=\"selectAllFc\"\n              [isIndeterminate]=\"isIndeterminateAll\"\n            ></np-checkbox>\n          </th>\n\n          <ng-container *ngFor=\"let col of columns\">\n            <!-- Line -->\n            <th\n              [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n              class=\"border-gray-200\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n            </th>\n            <!-- Hide line\n            <th\n              [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n              class=\"border-gray-200\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n            </th> -->\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody>\n        @if (state === 'loading') {\n          <tr>\n            <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n              <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n            </td>\n          </tr>\n        }\n\n        @else if (_dataSource.length > 0) {\n          @for (row of pagedData; track row) {\n            <tr>\n              <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"row.selectFc\"\n                  (valueChange)=\"onChangeSelectColumn($event)\"\n                ></np-checkbox>\n              </td>\n\n              @for (col of columns; track col) {\n                <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n              }\n            </tr>\n          }\n\n          <tr *ngIf=\"isUsePagination\">\n            <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n              <div class=\"w-full px-3\">\n                <np-pagination\n                  [type]=\"panigationType\"\n                  [totalItems]=\"filteredData.length\"\n                  [(pageIndex)]=\"currentPage\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"currentPageSize\"\n                  [isReverse]=\"isReverse\"\n                  (pageSizeChange)=\"onPageSizeChange($event)\"\n                ></np-pagination>\n              </div>\n            </td>\n          </tr>\n        }\n        @else {\n          <tr>\n            <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n              <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n                <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"medium\"\n                  style=\"color: rgba(208, 213, 221, 1)\"\n                >\n                  No data\n                </np-typography>\n              </div>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n  @else {\n    <div class=\"flex flex-col w-full\">\n      <div class=\"flex w-full\">\n        <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n          <thead>\n            <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n                <div class=\"flex justify-between items-center\">\n                  <div class=\"text-sm font-medium text-gray-700\">\n                    {{ selectedCount }} selected\n                  </div>\n                  <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n                </div>\n              </td>\n            </tr>\n\n            <tr #leftHead>\n              <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #leftRow>\n                <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                  <np-checkbox\n                    [type]=\"selectableType\"\n                    size=\"sm\"\n                    [input]=\"row.selectFc\"\n                    (valueChange)=\"onChangeSelectColumn($event)\"\n                  ></np-checkbox>\n                </td>\n\n                @for (col of fixedLeftColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow\"\n          style=\"overflow-x: auto;\"\n          [style.max-width]=\"scrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable': isAtStart,\n            'rounded-r-xl border-r-midtable': isAtEnd\n          }\"\n          >\n          <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n            <thead>\n              <tr #middleHead>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody>\n              @for (row of pagedData; track row) {\n                <tr #middleRow>\n                  @for (col of scrollableColumns; track col) {\n                    <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n          <thead>\n            <tr #rightHead>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #rightRow>\n                @for (col of fixedRightColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n        <np-pagination\n          [type]=\"panigationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n} @else {\n  <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n    <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n      <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n      <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n            We had some trouble loading this page. Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0;\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div *ngIf=\"isSortable\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n        </div>\n\n        <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n          <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i class=\"fa-solid fa-filter\"\n               [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              type=\"text\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n            ></np-input-field>\n            <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n              <np-typography\n                npType=\"text\"\n                npSize=\"sm\"\n                npWeight=\"medium\"\n              >\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n                <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    type=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1);\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td\n    style =\"min-width: 100px;\"\n    [class.border-r]=\"showVerticalDivider\"\n    class=\"border-gray-200\"\n  >\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        <div>{{ row[col.key] }}</div>\n      </div>\n    </ng-template>\n  </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", isUsePagination: "isUsePagination", panigationType: "panigationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", scrollHeight: "scrollHeight", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource", pageSize: "pageSize" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResizeWindow()" } }, viewQueries: [{ propertyName: "leftHead", first: true, predicate: ["leftHead"], descendants: true, read: ElementRef }, { propertyName: "middleHead", first: true, predicate: ["middleHead"], descendants: true, read: ElementRef }, { propertyName: "rightHead", first: true, predicate: ["rightHead"], descendants: true, read: ElementRef }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "leftRows", predicate: ["leftRow"], descendants: true, read: ElementRef }, { propertyName: "middleRows", predicate: ["middleRow"], descendants: true, read: ElementRef }, { propertyName: "rightRows", predicate: ["rightRow"], descendants: true, read: ElementRef }, { propertyName: "middleHeaderEls", predicate: ["middleHeader"], descendants: true, read: ElementRef }, { propertyName: "middleBodyEls", predicate: ["middleBody"], descendants: true, read: ElementRef }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n  @if (scrollColumnsRange == null) {\n    <table class=\"np-table w-full rounded-t-xl mx-auto {{ className }} np-table-header\">\n      <thead class=\"sticky top-0 bg-white z-99\">\n        <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n          <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n            <div class=\"flex justify-between items-center\">\n              <div class=\"text-sm font-medium text-gray-700\">\n                {{ selectedCount }} selected\n              </div>\n              <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n            </div>\n          </td>\n        </tr>\n\n        <tr>\n          <th\n            class=\"select-column\"\n            *ngIf=\"selectableType !== null && state !== 'loading'\"\n            >\n            <np-checkbox\n              *ngIf=\"selectableType === 'checkbox'\"\n              type=\"checkbox\"\n              size=\"sm\"\n              [input]=\"selectAllFc\"\n              [isIndeterminate]=\"isIndeterminateAll\"\n            ></np-checkbox>\n          </th>\n\n          <ng-container *ngFor=\"let col of columns\">\n            <th\n              [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n              #middleHeader\n              class=\"border-gray-200\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n    </table>\n    <div \n      class=\"np-table np-table-all rounded-b-xl\"\n      [style.max-height]=\"scrollHeight\"\n      style=\"overflow-y: auto;\"\n    >\n      <table class=\"w-full mx-auto {{ className }} rounded-b-xl np-table\">\n        <tbody>\n          @if (state === 'loading') {\n            <tr>\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n                <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n              </td>\n            </tr>\n          }\n          @else if (_dataSource.length > 0) {\n            <tr *ngFor=\"let row of pagedData; track row\">\n              <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"row.selectFc\"\n                  (valueChange)=\"onChangeSelectColumn($event)\"\n                ></np-checkbox>\n              </td>\n\n              @for (col of columns; track col) {\n                <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n              }\n            </tr>\n            <tr *ngIf=\"isUsePagination\">\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n                <div class=\"w-full px-3\">\n                  <np-pagination\n                    [type]=\"panigationType\"\n                    [totalItems]=\"filteredData.length\"\n                    [(pageIndex)]=\"currentPage\"\n                    [pageSize]=\"pageSize\"\n                    [pageSizeOptions]=\"currentPageSize\"\n                    [isReverse]=\"isReverse\"\n                    (pageSizeChange)=\"onPageSizeChange($event)\"\n                  ></np-pagination>\n                </div>\n              </td>\n            </tr>\n          }\n          @else {\n            <tr>\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n                <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n                  <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n                  <np-typography\n                    npType=\"text\"\n                    npSize=\"sm\"\n                    npWeight=\"medium\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  >\n                    No data\n                  </np-typography>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (scrollColumnsRange != null && scrollHeight === \"\") {\n    <div class=\"flex flex-col w-full\">\n      <div class=\"flex w-full\">\n        <table *ngIf=\"!isAtStart\" class=\"np-table np-table-all rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n          <thead>\n            <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n                <div class=\"flex justify-between items-center\">\n                  <div class=\"text-sm font-medium text-gray-700\">\n                    {{ selectedCount }} selected\n                  </div>\n                  <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n                </div>\n              </td>\n            </tr>\n\n            <tr #leftHead>\n              <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #leftRow>\n                <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                  <np-checkbox\n                    [type]=\"selectableType\"\n                    size=\"sm\"\n                    [input]=\"row.selectFc\"\n                    (valueChange)=\"onChangeSelectColumn($event)\"\n                  ></np-checkbox>\n                </td>\n\n                @for (col of fixedLeftColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow\"\n          style=\"overflow-x: auto;\"\n          [style.max-width]=\"scrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable': isAtStart,\n            'rounded-r-xl border-r-midtable': isAtEnd\n          }\"\n          >\n          <table class=\"np-table np-table-all scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n            <thead>\n              <tr #middleHead>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody>\n              @for (row of pagedData; track row) {\n                <tr #middleRow>\n                  @for (col of scrollableColumns; track col) {\n                    <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table *ngIf=\"!isAtEnd\" class=\"np-table np-table-all rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n          <thead>\n            <tr #rightHead>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                  *ngFor=\"let col of fixedRightColumns, track col\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #rightRow>\n                @for (col of fixedRightColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n        <np-pagination\n          [type]=\"panigationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n  @if(scrollColumnsRange != null && scrollHeight != \"\"){\n    \n  }\n} @else {\n  <div class=\"np-table np-table-all rounded-xl pb-[100px] max-w-[535px]\">\n    <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n      <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n      <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n            We had some trouble loading this page. Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0;\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n        </div>\n\n        <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n          <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i class=\"fa-solid fa-filter\"\n               [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              type=\"string\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n            ></np-input-field>\n            <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n              <np-typography\n                npType=\"text\"\n                npSize=\"sm\"\n                npWeight=\"medium\"\n              >\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n                <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    type=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1);\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td\n    [class.border-r]=\"showVerticalDivider\"\n    class=\"border-gray-200\"\n    #middleBody\n  >\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        {{ row[col.key] }}\n      </div>\n    </ng-template>\n  </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;overflow:hidden;white-space:nowrap}.np-table .select-column{width:40px;max-width:40px}.np-table-header{border-top:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 -2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-body{border-bottom:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-all{border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, decorators: [{
             type: Component,
@@ -2242,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         NpScrollbarComponent,
                         NpInputFieldComponent,
                         FormsModule,
-                    ], template: "@if (state !== 'error') {\n  @if (scrollColumnsRange == null) {\n    <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n      <thead>\n        <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n          <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n            <div class=\"flex justify-between items-center\">\n              <div class=\"text-sm font-medium text-gray-700\">\n                {{ selectedCount }} selected\n              </div>\n              <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n            </div>\n          </td>\n        </tr>\n\n        <tr>\n          <th\n            class=\"select-column\"\n            *ngIf=\"selectableType !== null && state !== 'loading'\"\n            >\n            <np-checkbox\n              *ngIf=\"selectableType === 'checkbox'\"\n              type=\"checkbox\"\n              size=\"sm\"\n              [input]=\"selectAllFc\"\n              [isIndeterminate]=\"isIndeterminateAll\"\n            ></np-checkbox>\n          </th>\n\n          <ng-container *ngFor=\"let col of columns\">\n            <!-- Line -->\n            <th\n              [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n              class=\"border-gray-200\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n            </th>\n            <!-- Hide line\n            <th\n              [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n              class=\"border-gray-200\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n            </th> -->\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody>\n        @if (state === 'loading') {\n          <tr>\n            <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n              <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n            </td>\n          </tr>\n        }\n\n        @else if (_dataSource.length > 0) {\n          @for (row of pagedData; track row) {\n            <tr>\n              <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"row.selectFc\"\n                  (valueChange)=\"onChangeSelectColumn($event)\"\n                ></np-checkbox>\n              </td>\n\n              @for (col of columns; track col) {\n                <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n              }\n            </tr>\n          }\n\n          <tr *ngIf=\"isUsePagination\">\n            <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n              <div class=\"w-full px-3\">\n                <np-pagination\n                  [type]=\"panigationType\"\n                  [totalItems]=\"filteredData.length\"\n                  [(pageIndex)]=\"currentPage\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"currentPageSize\"\n                  [isReverse]=\"isReverse\"\n                  (pageSizeChange)=\"onPageSizeChange($event)\"\n                ></np-pagination>\n              </div>\n            </td>\n          </tr>\n        }\n        @else {\n          <tr>\n            <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n              <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n                <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"medium\"\n                  style=\"color: rgba(208, 213, 221, 1)\"\n                >\n                  No data\n                </np-typography>\n              </div>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n  @else {\n    <div class=\"flex flex-col w-full\">\n      <div class=\"flex w-full\">\n        <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n          <thead>\n            <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n                <div class=\"flex justify-between items-center\">\n                  <div class=\"text-sm font-medium text-gray-700\">\n                    {{ selectedCount }} selected\n                  </div>\n                  <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n                </div>\n              </td>\n            </tr>\n\n            <tr #leftHead>\n              <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #leftRow>\n                <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                  <np-checkbox\n                    [type]=\"selectableType\"\n                    size=\"sm\"\n                    [input]=\"row.selectFc\"\n                    (valueChange)=\"onChangeSelectColumn($event)\"\n                  ></np-checkbox>\n                </td>\n\n                @for (col of fixedLeftColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow\"\n          style=\"overflow-x: auto;\"\n          [style.max-width]=\"scrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable': isAtStart,\n            'rounded-r-xl border-r-midtable': isAtEnd\n          }\"\n          >\n          <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n            <thead>\n              <tr #middleHead>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody>\n              @for (row of pagedData; track row) {\n                <tr #middleRow>\n                  @for (col of scrollableColumns; track col) {\n                    <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n          <thead>\n            <tr #rightHead>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #rightRow>\n                @for (col of fixedRightColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n        <np-pagination\n          [type]=\"panigationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n} @else {\n  <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n    <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n      <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n      <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n            We had some trouble loading this page. Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0;\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div *ngIf=\"isSortable\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n        </div>\n\n        <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n          <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i class=\"fa-solid fa-filter\"\n               [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              type=\"text\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n            ></np-input-field>\n            <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n              <np-typography\n                npType=\"text\"\n                npSize=\"sm\"\n                npWeight=\"medium\"\n              >\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n                <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    type=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1);\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td\n    style =\"min-width: 100px;\"\n    [class.border-r]=\"showVerticalDivider\"\n    class=\"border-gray-200\"\n  >\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        <div>{{ row[col.key] }}</div>\n      </div>\n    </ng-template>\n  </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"] }]
+                    ], template: "@if (state !== 'error') {\n  @if (scrollColumnsRange == null) {\n    <table class=\"np-table w-full rounded-t-xl mx-auto {{ className }} np-table-header\">\n      <thead class=\"sticky top-0 bg-white z-99\">\n        <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n          <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n            <div class=\"flex justify-between items-center\">\n              <div class=\"text-sm font-medium text-gray-700\">\n                {{ selectedCount }} selected\n              </div>\n              <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n            </div>\n          </td>\n        </tr>\n\n        <tr>\n          <th\n            class=\"select-column\"\n            *ngIf=\"selectableType !== null && state !== 'loading'\"\n            >\n            <np-checkbox\n              *ngIf=\"selectableType === 'checkbox'\"\n              type=\"checkbox\"\n              size=\"sm\"\n              [input]=\"selectAllFc\"\n              [isIndeterminate]=\"isIndeterminateAll\"\n            ></np-checkbox>\n          </th>\n\n          <ng-container *ngFor=\"let col of columns\">\n            <th\n              [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n              #middleHeader\n              class=\"border-gray-200\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n    </table>\n    <div \n      class=\"np-table np-table-all rounded-b-xl\"\n      [style.max-height]=\"scrollHeight\"\n      style=\"overflow-y: auto;\"\n    >\n      <table class=\"w-full mx-auto {{ className }} rounded-b-xl np-table\">\n        <tbody>\n          @if (state === 'loading') {\n            <tr>\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n                <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n              </td>\n            </tr>\n          }\n          @else if (_dataSource.length > 0) {\n            <tr *ngFor=\"let row of pagedData; track row\">\n              <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"row.selectFc\"\n                  (valueChange)=\"onChangeSelectColumn($event)\"\n                ></np-checkbox>\n              </td>\n\n              @for (col of columns; track col) {\n                <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n              }\n            </tr>\n            <tr *ngIf=\"isUsePagination\">\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n                <div class=\"w-full px-3\">\n                  <np-pagination\n                    [type]=\"panigationType\"\n                    [totalItems]=\"filteredData.length\"\n                    [(pageIndex)]=\"currentPage\"\n                    [pageSize]=\"pageSize\"\n                    [pageSizeOptions]=\"currentPageSize\"\n                    [isReverse]=\"isReverse\"\n                    (pageSizeChange)=\"onPageSizeChange($event)\"\n                  ></np-pagination>\n                </div>\n              </td>\n            </tr>\n          }\n          @else {\n            <tr>\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n                <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n                  <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n                  <np-typography\n                    npType=\"text\"\n                    npSize=\"sm\"\n                    npWeight=\"medium\"\n                    style=\"color: rgba(208, 213, 221, 1)\"\n                  >\n                    No data\n                  </np-typography>\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  @if (scrollColumnsRange != null && scrollHeight === \"\") {\n    <div class=\"flex flex-col w-full\">\n      <div class=\"flex w-full\">\n        <table *ngIf=\"!isAtStart\" class=\"np-table np-table-all rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n          <thead>\n            <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n              <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n                <div class=\"flex justify-between items-center\">\n                  <div class=\"text-sm font-medium text-gray-700\">\n                    {{ selectedCount }} selected\n                  </div>\n                  <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n                </div>\n              </td>\n            </tr>\n\n            <tr #leftHead>\n              <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n                <np-checkbox\n                  [type]=\"selectableType\"\n                  size=\"sm\"\n                  [input]=\"selectAllFc\"\n                  [isIndeterminate]=\"isIndeterminateAll\"\n                ></np-checkbox>\n              </th>\n\n              <ng-container *ngFor=\"let col of fixedLeftColumns\">\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #leftRow>\n                <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n                  <np-checkbox\n                    [type]=\"selectableType\"\n                    size=\"sm\"\n                    [input]=\"row.selectFc\"\n                    (valueChange)=\"onChangeSelectColumn($event)\"\n                  ></np-checkbox>\n                </td>\n\n                @for (col of fixedLeftColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <div\n          class=\"scrollable-wrapper mb-[-12px] grow\"\n          style=\"overflow-x: auto;\"\n          [style.max-width]=\"scrollWidth\"\n          #tableMiddle\n          [ngClass]=\"{\n            'rounded-l-xl border-l-midtable': isAtStart,\n            'rounded-r-xl border-r-midtable': isAtEnd\n          }\"\n          >\n          <table class=\"np-table np-table-all scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n            <thead>\n              <tr #middleHead>\n                <ng-container *ngFor=\"let col of scrollableColumns\">\n                  <th\n                    [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                    class=\"border-gray-200\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                  </th>\n                </ng-container>\n              </tr>\n            </thead>\n\n            <tbody>\n              @for (row of pagedData; track row) {\n                <tr #middleRow>\n                  @for (col of scrollableColumns; track col) {\n                    <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n\n        <table *ngIf=\"!isAtEnd\" class=\"np-table np-table-all rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n          <thead>\n            <tr #rightHead>\n              @for (col of fixedRightColumns; track col) {\n                <th\n                  [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n                  class=\"border-gray-200\"\n                  *ngFor=\"let col of fixedRightColumns, track col\"\n                >\n                  <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n                </th>\n              }\n            </tr>\n          </thead>\n\n          <tbody>\n            @for (row of pagedData; track row) {\n              <tr #rightRow>\n                @for (col of fixedRightColumns; track col) {\n                  <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n        <np-pagination\n          [type]=\"panigationType\"\n          [totalItems]=\"filteredData.length\"\n          [(pageIndex)]=\"currentPage\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"currentPageSize\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        ></np-pagination>\n      </div>\n    </div>\n  }\n  @if(scrollColumnsRange != null && scrollHeight != \"\"){\n    \n  }\n} @else {\n  <div class=\"np-table np-table-all rounded-xl pb-[100px] max-w-[535px]\">\n    <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n      <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n      <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n        <div class=\"flex flex-col items-center\">\n          <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n            Something went wrong...\n          </np-typography>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n            We had some trouble loading this page. Please refresh the page or get in touch for support.\n          </np-typography>\n        </div>\n        <div class=\"flex gap-3\">\n          <np-button\n            npType=\"secondary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onContactSupport()\"\n            >Contact support\n          </np-button>\n\n          <np-button\n            npType=\"primary\"\n            npSize=\"sm\"\n            npShape=\"rounded\"\n            (click)=\"onRefresh()\"\n            >Refresh\n          </np-button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n  <div #filterIcon class=\"flex items-center w-full\">\n    <div class=\"w-full\">\n      <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n        <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <p style=\"margin: 0;\">{{ col.label }}</p>\n      </ng-template>\n    </div>\n\n    <ng-container>\n      <div class=\"flex gap-2 ms-2\">\n        <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n             style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n          <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n        </div>\n\n        <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n          <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n            <span class=\"relative inline-block\">\n              <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n              <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n            </span>\n          </ng-container>\n          <ng-template #filterIconTemplate>\n            <i class=\"fa-solid fa-filter\"\n               [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n          </ng-template>\n\n          <div\n            #filterDropdown\n            [hidden]=\"activeFilterKey !== col.key\"\n            (click)=\"$event.stopPropagation()\"\n            [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n            class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n          >\n            <np-input-field\n              size=\"md\"\n              type=\"string\"\n              placeholder=\"Search...\"\n              iconLeft=\"fa-thin fa-magnifying-glass\"\n              [input]=\"searchControls[col.key]\"\n            ></np-input-field>\n            <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n              <np-typography\n                npType=\"text\"\n                npSize=\"sm\"\n                npWeight=\"medium\"\n              >\n                <i class=\"fa-solid fa-xmark\"></i> Clear filter\n              </np-typography>\n            </div>\n            <np-scrollbar height=\"200px\">\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n                <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n                  <np-checkbox\n                    class=\"w-full cursor-pointer py-2\"\n                    type=\"checkbox\"\n                    size=\"sm\"\n                    [input]=\"isChecked(col.key, value)\"\n                    (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n                    [label]=\"value\"\n                  ></np-checkbox>\n                </div>\n              </div>\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n                <np-typography\n                  npType=\"text\"\n                  npSize=\"sm\"\n                  npWeight=\"regular\"\n                  style=\"color: rgba(208, 213, 221, 1);\"\n                >\n                  No matches.\n                </np-typography>\n              </div>\n            </np-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n  <td\n    [class.border-r]=\"showVerticalDivider\"\n    class=\"border-gray-200\"\n    #middleBody\n  >\n    <ng-container *ngIf=\"col.template; else default\">\n      <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n    </ng-container>\n    <ng-template #default>\n      <div class=\"flex items-center\">\n        {{ row[col.key] }}\n      </div>\n    </ng-template>\n  </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;overflow:hidden;white-space:nowrap}.np-table .select-column{width:40px;max-width:40px}.np-table-header{border-top:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 -2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-body{border-bottom:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-all{border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leftRows: [{
                 type: ViewChildren,
                 args: ['leftRow', { read: ElementRef }]
@@ -2270,6 +2368,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }], tableRight: [{
                 type: ViewChild,
                 args: ['tableRight', { static: false }]
+            }], middleHeaderEls: [{
+                type: ViewChildren,
+                args: ['middleHeader', { read: ElementRef }]
+            }], middleBodyEls: [{
+                type: ViewChildren,
+                args: ['middleBody', { read: ElementRef }]
+            }], filterIcons: [{
+                type: ViewChildren,
+                args: ['filterIcon']
             }], columns: [{
                 type: Input
             }], selectableType: [{
@@ -2280,8 +2387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isDeleteable: [{
                 type: Input
-            }], pageSize: [{
-                type: Input
             }], isUsePagination: [{
                 type: Input
             }], panigationType: [{
@@ -2298,17 +2403,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], scrollWidth: [{
                 type: Input
+            }], scrollHeight: [{
+                type: Input
             }], isReverse: [{
                 type: Input
             }], showVerticalDivider: [{
                 type: Input
             }], deleteSelectedRows: [{
                 type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], rowChecked: [{
+                type: Output
             }], dataSource: [{
                 type: Input
-            }], filterIcons: [{
-                type: ViewChildren,
-                args: ['filterIcon']
+            }], pageSize: [{
+                type: Input
             }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2323,7 +2435,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 class NpTabComponent {
     _Router;
     _ActivatedRoute;
+    headerWrapperRef;
+    scrollContainerRef;
+    tabItemRefs;
     tabs = [];
+    className = '';
+    subClassName = '';
     tabActive = '';
     isLink = false;
     npStyle = 'button';
@@ -2377,19 +2494,71 @@ class NpTabComponent {
         //   });
         // }
     }
+    updateScrollButtons = () => {
+        const wrapper = this.headerWrapperRef?.nativeElement;
+        if (!wrapper)
+            return;
+        const scrollLeft = wrapper.scrollLeft;
+        const scrollWidth = wrapper.scrollWidth;
+        const clientWidth = wrapper.clientWidth;
+        this.scrollLeftButton = scrollLeft > 0;
+        this.scrollRightButton = scrollLeft + clientWidth < Math.ceil(scrollWidth);
+    };
     scrollLeft() {
-        console.log('scrollLeft');
+        const wrapper = this.headerWrapperRef?.nativeElement;
+        if (!wrapper)
+            return;
+        const pageWidth = wrapper.clientWidth;
+        wrapper.scrollBy({ left: -pageWidth, behavior: 'smooth' });
     }
     scrollRight() {
-        console.log('scrollRight');
+        const wrapper = this.headerWrapperRef?.nativeElement;
+        if (!wrapper)
+            return;
+        const pageWidth = wrapper.clientWidth;
+        wrapper.scrollBy({ left: pageWidth, behavior: 'smooth' });
+    }
+    ngAfterViewInit() {
+        const wrapper = this.headerWrapperRef?.nativeElement;
+        if (wrapper) {
+            wrapper.addEventListener('scroll', this.updateScrollButtons);
+        }
+        window.addEventListener('resize', this.updateScrollButtons);
+        setTimeout(() => {
+            this.updateScrollButtons();
+        }, 0);
+    }
+    ngOnDestroy() {
+        const wrapper = this.headerWrapperRef?.nativeElement;
+        if (wrapper) {
+            wrapper.removeEventListener('scroll', this.updateScrollButtons);
+        }
+    }
+    onResize() {
+        this.updateScrollButtons();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\n  class=\"np-tab h-full\"\n  [ngClass]=\"{\n    'np-vertical': npDirection === 'vertical',\n    'np-horizontal': npDirection === 'horizontal',\n  }\"\n>\n  <div\n    class=\"flex justify-between np-tab-header relative\"\n    [ngClass]=\"[\n      npDirection === 'vertical' ? 'flex-col w-full' : '',\n      npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n      npStyle === 'underline'\n        ? 'np-tab-underline bg-white' +\n          (npDirection === 'horizontal' ? ' border-b' : '')\n        : '',\n\n      npStyle === 'button'\n        ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n        : ''\n    ]\"\n  >\n    @for (tab of tabs; track tab; let index = $index; let first = $first) {\n    <div class=\"flex-1\"\n      [ngClass]=\"{\n        'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n      }\"\n      [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n    >\n      <div\n        class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n        (click)=\"onChangeTab(tab, $index)\"\n        [ngClass]=\"{\n          'flex': npDirection === 'horizontal',\n          'is-active': tab.key === tabActive,\n          'py-3': npStyle === 'underline',\n          'py-2': npStyle === 'button',\n        }\"\n      >\n        <span class=\"tab-label\">{{ tab?.label }}</span>\n\n        @if($first) {\n          @if(npStyle === 'underline') {\n            <div\n              class=\"tab-underline\"\n              [ngStyle]=\"\n                npDirection === 'vertical'\n                  ? { top: indexActive * 100 + '%' }\n                  : { left: indexActive * 100 + '%' }\n              \"\n            ></div>\n          }\n          @if(npStyle === 'button') {\n            <div\n            class=\"tab-button\"\n            [ngStyle]=\"\n                npDirection === 'vertical'\n                  ? { top: indexActive * 100 + '%' }\n                  : { left: indexActive * 100 + '%' }\n              \"\n          ></div>\n          }\n        }\n      </div>\n    </div>\n    }\n\n    <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollLeft()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-left\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollLeft()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-left\"></i>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollRight()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-right\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollRight()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-right\"></i>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", className: "className", subClassName: "subClassName", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "w-full" }, viewQueries: [{ propertyName: "headerWrapperRef", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"np-tab h-full relative {{className}}\"\n  [ngClass]=\"{\n    'np-vertical': npDirection === 'vertical',\n    'np-horizontal': npDirection === 'horizontal',\n  }\"\n>\n  <div\n    #headerWrapper\n    class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n    [ngClass]=\"[\n      npDirection === 'vertical' ? 'flex-col w-full' : '',\n      npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n      npStyle === 'underline'\n        ? 'np-tab-underline bg-white' +\n          (npDirection === 'horizontal' ? ' border-b' : '')\n        : '',\n\n      npStyle === 'button'\n        ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n        : ''\n    ]\"\n  >\n    <div \n      #scrollContainer class=\"flex w-fit w-full\" \n      [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n      <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n        <div #tabItem class=\"flex-1\"\n          [ngClass]=\"{\n            'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n          }\"\n          [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n        >\n          <div\n            class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n            (click)=\"onChangeTab(tab, index)\"\n            [ngClass]=\"{\n              'flex': npDirection === 'horizontal',\n              'is-active': tab.key === tabActive,\n              'py-3': npStyle === 'underline',\n              'py-2': npStyle === 'button',\n            }\"\n          >\n            <span class=\"tab-label\">{{ tab?.label }}</span>\n\n            @if(first) {\n              @if(npStyle === 'underline') {\n                <div\n                  class=\"tab-underline\"\n                  [ngStyle]=\"\n                    npDirection === 'vertical'\n                      ? { top: indexActive * 100 + '%' }\n                      : { left: indexActive * 100 + '%' }\n                  \"\n                ></div>\n              }\n              @if(npStyle === 'button') {\n                <div\n                class=\"tab-button\"\n                [ngStyle]=\"\n                    npDirection === 'vertical'\n                      ? { top: indexActive * 100 + '%' }\n                      : { left: indexActive * 100 + '%' }\n                  \"\n              ></div>\n              }\n            }\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollLeft()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-left\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollLeft()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-left\"></i>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollRight()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-right\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollRight()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-right\"></i>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], template: "<div\n  class=\"np-tab h-full\"\n  [ngClass]=\"{\n    'np-vertical': npDirection === 'vertical',\n    'np-horizontal': npDirection === 'horizontal',\n  }\"\n>\n  <div\n    class=\"flex justify-between np-tab-header relative\"\n    [ngClass]=\"[\n      npDirection === 'vertical' ? 'flex-col w-full' : '',\n      npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n      npStyle === 'underline'\n        ? 'np-tab-underline bg-white' +\n          (npDirection === 'horizontal' ? ' border-b' : '')\n        : '',\n\n      npStyle === 'button'\n        ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n        : ''\n    ]\"\n  >\n    @for (tab of tabs; track tab; let index = $index; let first = $first) {\n    <div class=\"flex-1\"\n      [ngClass]=\"{\n        'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n      }\"\n      [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n    >\n      <div\n        class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n        (click)=\"onChangeTab(tab, $index)\"\n        [ngClass]=\"{\n          'flex': npDirection === 'horizontal',\n          'is-active': tab.key === tabActive,\n          'py-3': npStyle === 'underline',\n          'py-2': npStyle === 'button',\n        }\"\n      >\n        <span class=\"tab-label\">{{ tab?.label }}</span>\n\n        @if($first) {\n          @if(npStyle === 'underline') {\n            <div\n              class=\"tab-underline\"\n              [ngStyle]=\"\n                npDirection === 'vertical'\n                  ? { top: indexActive * 100 + '%' }\n                  : { left: indexActive * 100 + '%' }\n              \"\n            ></div>\n          }\n          @if(npStyle === 'button') {\n            <div\n            class=\"tab-button\"\n            [ngStyle]=\"\n                npDirection === 'vertical'\n                  ? { top: indexActive * 100 + '%' }\n                  : { left: indexActive * 100 + '%' }\n              \"\n          ></div>\n          }\n        }\n      </div>\n    </div>\n    }\n\n    <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollLeft()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-left\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollLeft()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-left\"></i>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollRight()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-right\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollRight()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-right\"></i>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{
+            args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], host: {
+                        class: 'w-full'
+                    }, template: "<div\n  class=\"np-tab h-full relative {{className}}\"\n  [ngClass]=\"{\n    'np-vertical': npDirection === 'vertical',\n    'np-horizontal': npDirection === 'horizontal',\n  }\"\n>\n  <div\n    #headerWrapper\n    class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n    [ngClass]=\"[\n      npDirection === 'vertical' ? 'flex-col w-full' : '',\n      npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n      npStyle === 'underline'\n        ? 'np-tab-underline bg-white' +\n          (npDirection === 'horizontal' ? ' border-b' : '')\n        : '',\n\n      npStyle === 'button'\n        ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n        : ''\n    ]\"\n  >\n    <div \n      #scrollContainer class=\"flex w-fit w-full\" \n      [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n      <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n        <div #tabItem class=\"flex-1\"\n          [ngClass]=\"{\n            'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n          }\"\n          [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n        >\n          <div\n            class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n            (click)=\"onChangeTab(tab, index)\"\n            [ngClass]=\"{\n              'flex': npDirection === 'horizontal',\n              'is-active': tab.key === tabActive,\n              'py-3': npStyle === 'underline',\n              'py-2': npStyle === 'button',\n            }\"\n          >\n            <span class=\"tab-label\">{{ tab?.label }}</span>\n\n            @if(first) {\n              @if(npStyle === 'underline') {\n                <div\n                  class=\"tab-underline\"\n                  [ngStyle]=\"\n                    npDirection === 'vertical'\n                      ? { top: indexActive * 100 + '%' }\n                      : { left: indexActive * 100 + '%' }\n                  \"\n                ></div>\n              }\n              @if(npStyle === 'button') {\n                <div\n                class=\"tab-button\"\n                [ngStyle]=\"\n                    npDirection === 'vertical'\n                      ? { top: indexActive * 100 + '%' }\n                      : { left: indexActive * 100 + '%' }\n                  \"\n              ></div>\n              }\n            }\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollLeft()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-left\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollLeft()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-left\"></i>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n      <div\n        *ngIf=\"npStyle === 'underline'\"\n        (click)=\"scrollRight()\"\n        class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n        <i class=\"fa-regular fa-chevron-right\"></i>\n      </div>\n      <div\n        *ngIf=\"npStyle === 'button'\"\n        class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n      >\n        <div\n          (click)=\"scrollRight()\"\n          class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n          <i class=\"fa-regular fa-chevron-right\"></i>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { headerWrapperRef: [{
+                type: ViewChild,
+                args: ['headerWrapper', { static: false }]
+            }], scrollContainerRef: [{
+                type: ViewChild,
+                args: ['scrollContainer', { static: false }]
+            }], tabItemRefs: [{
+                type: ViewChildren,
+                args: ['tabItem']
+            }], tabs: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], subClassName: [{
                 type: Input
             }], tabActive: [{
                 type: Input
@@ -2403,6 +2572,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], onChange: [{
                 type: Output
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class NpResizeComponent {
@@ -2518,8 +2690,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class NpConfirmTemplateComponent {
-    // @Input() modalButton: string | TemplateRef<any> = '';
+class NpModalComponent {
+    modalButton = '';
     modalTitle = '';
     modalDescriptions = '';
     modalType = 'notification';
@@ -2529,7 +2701,7 @@ class NpConfirmTemplateComponent {
     cancelText = 'Cancel';
     okText = 'OK';
     modalContent;
-    // @Input() modalFooter?: TemplateRef<any>;
+    modalFooter;
     loadingOK = false;
     ok = new EventEmitter();
     cancel = new EventEmitter();
@@ -2573,20 +2745,22 @@ class NpConfirmTemplateComponent {
         this.isVisible = false;
         this.cancel.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button >\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-confirm-template', imports: [
+            args: [{ selector: 'np-modal', imports: [
                         NzModalModule,
                         NpButtonComponent,
                         CommonModule,
                         NpTypographyComponent,
                         BasicModule,
                         NpCheckboxComponent,
-                    ], template: "<div>\n    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { modalTitle: [{
+                    ], template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button >\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"] }]
+        }], propDecorators: { modalButton: [{
+                type: Input
+            }], modalTitle: [{
                 type: Input
             }], modalDescriptions: [{
                 type: Input
@@ -2604,6 +2778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], modalContent: [{
                 type: Input
+            }], modalFooter: [{
+                type: Input
             }], loadingOK: [{
                 type: Input
             }], ok: [{
@@ -2614,27 +2790,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Output
             }] } });
 
-class NpDialogComponent {
-    modalRef;
-    constructor(modalRef) {
-        this.modalRef = modalRef;
-    }
-    close(result) {
-        this.modalRef.close(result);
-    }
-    submit(result) {
-        this.modalRef.close(result);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, deps: [{ token: i1.NzModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpDialogComponent, isStandalone: true, selector: "np-dialog", ngImport: i0, template: "  <!-- <np-modal\n    modalButton=\"Success message\"\n    modalTitle=\"Modal Title\"\n    modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n    modalType=\"notification\"\n    modalState=\"success\"\n  >\n  </np-modal> -->\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'np-dialog', imports: [], template: "  <!-- <np-modal\n    modalButton=\"Success message\"\n    modalTitle=\"Modal Title\"\n    modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n    modalType=\"notification\"\n    modalState=\"success\"\n  >\n  </np-modal> -->\n" }]
-        }], ctorParameters: () => [{ type: i1.NzModalRef }] });
-
-class NpModalComponent {
-    modalButton = '';
+class NpConfirmTemplateComponent {
+    // @Input() modalButton: string | TemplateRef<any> = '';
     modalTitle = '';
     modalDescriptions = '';
     modalType = 'notification';
@@ -2644,7 +2801,7 @@ class NpModalComponent {
     cancelText = 'Cancel';
     okText = 'OK';
     modalContent;
-    modalFooter;
+    // @Input() modalFooter?: TemplateRef<any>;
     loadingOK = false;
     ok = new EventEmitter();
     cancel = new EventEmitter();
@@ -2688,22 +2845,20 @@ class NpModalComponent {
         this.isVisible = false;
         this.cancel.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button >\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'np-modal', imports: [
+            args: [{ selector: 'np-confirm-template', imports: [
                         NzModalModule,
                         NpButtonComponent,
                         CommonModule,
                         NpTypographyComponent,
                         BasicModule,
                         NpCheckboxComponent,
-                    ], template: "<div (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>\n    <np-button >\n      {{ modalButton }}\n    </np-button>\n  </ng-template>\n</div>\n\n<nz-modal\n  [(nzVisible)]=\"isVisible\"\n  (nzOnCancel)=\"handleCancel()\"\n  (nzOnOk)=\"handleOk()\"\n  [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n  [nzContent]=\"modalContent || ''\"\n  [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n  [nzWidth]=\"modalWidth\"\n  nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"] }]
-        }], propDecorators: { modalButton: [{
-                type: Input
-            }], modalTitle: [{
+                    ], template: "<div>\n    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n  <div class=\"flex w-full\">\n    <div class=\"flex flex-col grow gap-1\">\n      <img\n          *ngIf=\"useIcon\"\n          [src]=\"iconPath\"\n          [alt]=\"modalState + ' icon'\"\n          class=\"w-[48px] h-[48px]\"\n        />\n      <div class=\"flex flex-col gap-[4px]\">\n        <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n          {{modalTitle}}\n        </np-typography>\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n    <div class=\"flex pt-3\">\n      <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n  <div class=\"flex justify-between {{modalType}}\">\n    <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n      {{cancelText}}\n    </np-button>\n    <np-button\n      npSize=\"lg\"\n      [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n      \"\n      [isLoading]=\"loadingOK\"\n      (click)=\"handleOk()\"\n    >\n      {{okText}}\n    </np-button>\n  </div>\n</ng-template>\n\n<ng-template #contentNotification>\n  <div class=\"flex w-full\">\n    <div class=\"flex me-3\" *ngIf=\"useIcon\">\n      <img\n        [src]=\"iconPath\"\n        [alt]=\"modalState + ' icon'\"\n        class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n      />\n    </div>\n    <div class=\"flex flex-col grow\">\n      <div class=\"flex\">\n        <div class=\"flex grow\">\n          <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n            {{modalTitle}}\n          </np-typography>\n        </div>\n        <div class=\"flex pt-3\">\n            <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n        </div>\n      </div>\n      <div class=\"flex grow\">\n        <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n          <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n        </ng-container>\n        <ng-template #textDesc>\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n            {{modalDescriptions}}\n          </np-typography>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #footerNotification>\n  <div class=\"flex justify-between items-center w-full\">\n    <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n      <np-checkbox\n        type=\"checkbox\"\n        size=\"sm\"\n        label=\"Don\u2019t show again\"\n        [input]=\"checkboxControl\"\n      ></np-checkbox>\n    </div>\n    <div class=\"flex gap-3 w-full justify-end\">\n      <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n        {{cancelText}}\n      </np-button>\n      <np-button\n        npSize=\"lg\"\n        [npType]=\"\n        modalState === 'error'\n          ? 'destructive'\n          : modalState === 'warning'\n            ? 'warning'\n            : 'primary'\n        \"\n        [isLoading]=\"loadingOK\"\n        (click)=\"handleOk()\"\n      >\n        {{okText}}\n      </np-button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { modalTitle: [{
                 type: Input
             }], modalDescriptions: [{
                 type: Input
@@ -2721,8 +2876,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], modalContent: [{
                 type: Input
-            }], modalFooter: [{
-                type: Input
             }], loadingOK: [{
                 type: Input
             }], ok: [{
@@ -2733,6 +2886,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Output
             }] } });
 
+class NpDialogComponent {
+    modalRef;
+    constructor(modalRef) {
+        this.modalRef = modalRef;
+    }
+    close(result) {
+        this.modalRef.close(result);
+    }
+    submit(result) {
+        this.modalRef.close(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, deps: [{ token: i1.NzModalRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpDialogComponent, isStandalone: true, selector: "np-dialog", ngImport: i0, template: "  <!-- <np-modal\n    modalButton=\"Success message\"\n    modalTitle=\"Modal Title\"\n    modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n    modalType=\"notification\"\n    modalState=\"success\"\n  >\n  </np-modal> -->\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-dialog', imports: [], template: "  <!-- <np-modal\n    modalButton=\"Success message\"\n    modalTitle=\"Modal Title\"\n    modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n    modalType=\"notification\"\n    modalState=\"success\"\n  >\n  </np-modal> -->\n" }]
+        }], ctorParameters: () => [{ type: i1.NzModalRef }] });
+
 class DefaultModel {
     /**
      * all keys are in lowercase