@neoprototype/neop-ui-lib 1.0.26

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

@@ -0,0 +1,2670 @@
+import * as i0 from '@angular/core';
+import { Injectable, NgModule, Component, ViewChild, Input, EventEmitter, Output, InjectionToken, Optional, Inject, ElementRef, HostListener, ViewChildren, TemplateRef } from '@angular/core';
+import * as i1 from 'ng-zorro-antd/modal';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import * as i1$1 from '@angular/common';
+import { CommonModule, DecimalPipe } from '@angular/common';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
+import * as i2 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import * as i3$1 from 'ng-zorro-antd/switch';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import * as i3 from 'ng-zorro-antd/input';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import * as i1$2 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import * as i5 from 'ng-zorro-antd/date-picker';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import * as i3$2 from 'ng-zorro-antd/select';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import * as i3$3 from 'ng-zorro-antd/dropdown';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import * as i2$1 from 'ng-zorro-antd/menu';
+import * as i1$4 from '@angular/router';
+import { RouterModule, NavigationEnd } from '@angular/router';
+import * as i2$2 from 'ng-zorro-antd/tooltip';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import * as i1$3 from 'ng-zorro-antd/core/transition-patch';
+import { filter } from 'rxjs/operators';
+import * as i1$5 from 'ng-zorro-antd/progress';
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+import * as i2$3 from 'ng-zorro-antd/slider';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import * as i3$4 from 'ng-zorro-antd/resizable';
+import { NzResizableModule } from 'ng-zorro-antd/resizable';
+
+class TestService {
+    constructor() {
+    }
+    test() {
+        return 'test1';
+    }
+    test2() {
+        return 'test2';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TestService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ThemeService {
+    // private renderer: Renderer2;
+    themeElement;
+    constructor(rendererFactory) {
+        // this.renderer = rendererFactory.createRenderer(null, null);
+        this.themeElement = document.getElementById('themeElementId');
+    }
+    setTheme(themeClass) {
+        if (!this.themeElement) {
+            this.themeElement = document.getElementById('themeElementId');
+        }
+        if (this.themeElement) {
+            this.themeElement.className = themeClass;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+
+class NpDialogService {
+    modal;
+    constructor(modal) {
+        this.modal = modal;
+    }
+    openDialog(component, params) {
+        const modalRef = this.modal.create({
+            nzContent: component,
+            nzTitle: undefined,
+            nzData: params,
+            nzFooter: null,
+            nzCentered: true,
+            nzWidth: params?.nzWidth ?? '400px'
+        });
+        return modalRef.afterClose;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogService, deps: [{ token: i1.NzModalService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.NzModalService }] });
+
+class NeopComponentModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: []
+                }]
+        }] });
+
+class NpTypographyComponent {
+    renderer;
+    container;
+    npType = 'text';
+    npSize = 'sm';
+    npWeight = 'regular';
+    _ngContent = null;
+    set ngContent(value) {
+        this._ngContent = value;
+        this.updateContent();
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    updateContent() {
+        if (!this._ngContent) {
+            return;
+        }
+        if (this._ngContent instanceof Element) {
+            this.renderer.appendChild(this.container.nativeElement, this._ngContent);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTypographyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpTypographyComponent, isStandalone: true, selector: "np-typography", inputs: { npType: "npType", npSize: "npSize", npWeight: "npWeight", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<p #container class=\"{{ npType }}-{{ npSize }} font-{{ npWeight }} font-text\">\n  <!-- [ngClass]=\"splitClass()\" -->\n  <ng-content></ng-content>\n</p>\n", styles: [".font-text{font-family:Inter,sans-serif;margin:0}.display-xl{font-size:60px;line-height:72px;letter-spacing:-2%}.display-lg{font-size:48px;line-height:60px;letter-spacing:-2%}.display-md{font-size:36px;line-height:44px;letter-spacing:-2%}.display-sm{font-size:30px;line-height:38px}.display-xs{font-size:24px;line-height:32px}.text-xl{font-size:20px;line-height:30px}.text-lg{font-size:18px;line-height:28px}.text-md{font-size:16px;line-height:24px}.text-sm{font-size:14px;line-height:20px}.text-xs{font-size:12px;line-height:18px}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: NzTypographyModule }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTypographyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-typography', imports: [NzTypographyModule, CommonModule], template: "<p #container class=\"{{ npType }}-{{ npSize }} font-{{ npWeight }} font-text\">\n  <!-- [ngClass]=\"splitClass()\" -->\n  <ng-content></ng-content>\n</p>\n", styles: [".font-text{font-family:Inter,sans-serif;margin:0}.display-xl{font-size:60px;line-height:72px;letter-spacing:-2%}.display-lg{font-size:48px;line-height:60px;letter-spacing:-2%}.display-md{font-size:36px;line-height:44px;letter-spacing:-2%}.display-sm{font-size:30px;line-height:38px}.display-xs{font-size:24px;line-height:32px}.text-xl{font-size:20px;line-height:30px}.text-lg{font-size:18px;line-height:28px}.text-md{font-size:16px;line-height:24px}.text-sm{font-size:14px;line-height:20px}.text-xs{font-size:12px;line-height:18px}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], npType: [{
+                type: Input
+            }], npSize: [{
+                type: Input
+            }], npWeight: [{
+                type: Input
+            }], ngContent: [{
+                type: Input
+            }] } });
+
+class NpButtonComponent {
+    renderer;
+    container;
+    npType = 'primary';
+    npSize = 'sm';
+    className = '';
+    isLoading = false;
+    disabled = false;
+    _ngContent = null;
+    set ngContent(value) {
+        this._ngContent = value;
+        this.updateContent();
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    updateContent() {
+        if (!this._ngContent) {
+            return;
+        }
+        if (this._ngContent instanceof Element) {
+            this.renderer.appendChild(this.container.nativeElement, this._ngContent);
+        }
+    }
+    onClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (this.isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        // Add rip
+        const target = e.target;
+        const rect = target.getBoundingClientRect();
+        const x = e?.clientX - rect.left;
+        const y = e?.clientY - rect.top;
+        const ripples = this.renderer.createElement('span');
+        ripples.style.left = x + 'px';
+        ripples.style.top = y + 'px';
+        this.renderer.appendChild(this.container.nativeElement, ripples);
+        setTimeout(() => {
+            this.renderer.removeChild(this.container.nativeElement, ripples);
+        }, 1000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpButtonComponent, isStandalone: true, selector: "np-button", inputs: { npType: "npType", npSize: "npSize", className: "className", isLoading: "isLoading", disabled: "disabled", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<button\n  #container\n  class=\"np-button ripple\n  {{ npType }}\n  {{ npSize }}\n  {{ isLoading ? 'np-loading' : '' }}\n  {{ disabled ? npType + '-disabled' : ''}}\n  {{ className }}\"\n  (click)=\"onClick($event)\"\n>\n  <div class=\"inline items-center\">\n    <i class=\"fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: ["@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var( --font-sans--font-variation-settings ); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var( --font-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-mono--font-variation-settings ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-button', imports: [CommonModule], template: "<button\n  #container\n  class=\"np-button ripple\n  {{ npType }}\n  {{ npSize }}\n  {{ isLoading ? 'np-loading' : '' }}\n  {{ disabled ? npType + '-disabled' : ''}}\n  {{ className }}\"\n  (click)=\"onClick($event)\"\n>\n  <div class=\"inline items-center\">\n    <i class=\"fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n    <ng-content></ng-content>\n  </div>\n</button>\n", styles: ["@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var( --font-sans--font-variation-settings ); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var( --font-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-mono--font-variation-settings ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], npType: [{
+                type: Input
+            }], npSize: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], ngContent: [{
+                type: Input
+            }] } });
+
+class NpCheckboxComponent {
+    _input = new FormControl('');
+    set input(value) {
+        if (value === true) {
+            this._input.patchValue(true);
+            return;
+        }
+        this._input = !!value ? value : new FormControl(false);
+    }
+    type = '';
+    size = 'md';
+    npType = 'checkbox';
+    isDisabled = false;
+    groupName = 'radioGroup';
+    label;
+    description;
+    isIndeterminate = false;
+    valueChange = new EventEmitter();
+    onChange(event) {
+        const inputElement = event.target;
+        const value = inputElement.checked;
+        this._input?.patchValue(value);
+        this.valueChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpCheckboxComponent, isStandalone: true, selector: "np-checkbox", inputs: { input: "input", type: "type", size: "size", npType: "npType", isDisabled: "isDisabled", groupName: "groupName", label: "label", description: "description", isIndeterminate: "isIndeterminate" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<label\n  [ngClass]=\"[\n    size,\n    isIndeterminate ? 'indeterminate' : type,\n    isDisabled ? 'disabled' : '',\n    _input.value ? 'isChecked' : '',\n  ]\"\n>\n  <input\n    [type]=\"type === 'radio' ? 'radio' : 'checkbox'\"\n    [name]=\"type === 'radio' ? groupName : null\"\n    [checked]=\"_input.value\"\n    [disabled]=\"isDisabled\"\n    (change)=\"onChange($event)\"\n  />\n  <span\n    [ngClass]=\"[\n      'custom-checkbox',\n      isIndeterminate ? 'indeterminate' : type,\n      isDisabled ? 'span-disabled' : ''\n    ]\"\n  ></span>\n  <div>\n    <np-typography\n      *ngIf=\"label\"\n      [class]=\"'label-' + size\"\n      npType=\"text\"\n      npSize=\"sm\"\n      npWeight=\"medium\"\n      style=\"color: rgba(52, 64, 84, 1)\"\n      >{{ label }}</np-typography\n    >\n    <np-typography\n      *ngIf=\"description\"\n      [class]=\"'description-' + size\"\n      npType=\"text\"\n      npSize=\"sm\"\n      npWeight=\"regular\"\n      style=\"color: rgba(71, 84, 103, 1)\"\n      >{{ description }}</np-typography\n    >\n  </div>\n</label>\n\n<!-- <label nz-checkbox  >Checkbox</label> -->\n", styles: ["input[type=checkbox],input[type=radio]{display:none}.checkbox,.indeterminate,.radio{display:flex;gap:5px}.custom-checkbox{display:flex;border:1px solid rgb(208,213,221);border-radius:2px;cursor:pointer;position:relative;transition:all .6s ease}input:checked+.custom-checkbox{background:#475467;border:1px solid rgb(71,84,103)}input:checked+.custom-checkbox:after{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%)}input:checked+.checkbox:after{min-height:16px;text-align:center;content:url(/assets/images/check.svg)}.checkbox span:hover{background:#475467;border:1px solid rgb(71,84,103);content:url(/assets/images/check.svg)}.checkbox span:focus{box-shadow:0 0 0 4px #98a2b324}input:checked+.indeterminate:after{content:url(/assets/images/minus.svg)}.indeterminate span:hover{background:#475467;border:1px solid rgb(71,84,103);content:url(/assets/images/minus.svg)}.indeterminate span:focus{box-shadow:0 0 0 4px #98a2b324}.radio .custom-checkbox{border-radius:50%}.radio .custom-checkbox:hover{background:#475467;border-color:#475467}.radio .custom-checkbox:hover:after{content:\"\";background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.radio input:checked+.custom-checkbox:after{content:\"\";background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:.36s ease-in-out 0s 1 normal backwards running antCheckboxEffect;transition:all .6s ease}.sm .custom-checkbox{display:flex;width:16px;height:16px;min-width:16px}.md .custom-checkbox{display:flex;width:20px;height:20px;min-width:20px}.sm.radio input:checked+.custom-checkbox:after,.sm.radio .custom-checkbox:hover:after{width:6px;height:6px}.md.radio input:checked+.custom-checkbox:after,.md.radio .custom-checkbox:hover:after{width:8px;height:8px}.checkbox-label,.checkbox-description{margin:0}.label-sm{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:16px;color:#344054;cursor:pointer}.label-md{font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#344054;cursor:pointer}.description-sm{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:16px;color:#475467}.description-md{font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#475467}.disabled{cursor:not-allowed!important}.disabled .checkbox-label{cursor:not-allowed}.span-disabled{cursor:not-allowed!important;background-color:#f9fafb!important;border:1px solid rgb(208,213,221)!important}.radio.disabled input:checked+.custom-checkbox{border:1px solid rgb(208,213,221);background:#f9fafb}.radio.disabled input:checked+.custom-checkbox:after{background:#d0d5dd}\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: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "ngmodule", type: NzSwitchModule }, { 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: NpCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-checkbox', imports: [
+                        CommonModule,
+                        NzCheckboxModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NzButtonModule,
+                        NzSwitchModule,
+                        NpTypographyComponent,
+                    ], template: "<label\n  [ngClass]=\"[\n    size,\n    isIndeterminate ? 'indeterminate' : type,\n    isDisabled ? 'disabled' : '',\n    _input.value ? 'isChecked' : '',\n  ]\"\n>\n  <input\n    [type]=\"type === 'radio' ? 'radio' : 'checkbox'\"\n    [name]=\"type === 'radio' ? groupName : null\"\n    [checked]=\"_input.value\"\n    [disabled]=\"isDisabled\"\n    (change)=\"onChange($event)\"\n  />\n  <span\n    [ngClass]=\"[\n      'custom-checkbox',\n      isIndeterminate ? 'indeterminate' : type,\n      isDisabled ? 'span-disabled' : ''\n    ]\"\n  ></span>\n  <div>\n    <np-typography\n      *ngIf=\"label\"\n      [class]=\"'label-' + size\"\n      npType=\"text\"\n      npSize=\"sm\"\n      npWeight=\"medium\"\n      style=\"color: rgba(52, 64, 84, 1)\"\n      >{{ label }}</np-typography\n    >\n    <np-typography\n      *ngIf=\"description\"\n      [class]=\"'description-' + size\"\n      npType=\"text\"\n      npSize=\"sm\"\n      npWeight=\"regular\"\n      style=\"color: rgba(71, 84, 103, 1)\"\n      >{{ description }}</np-typography\n    >\n  </div>\n</label>\n\n<!-- <label nz-checkbox  >Checkbox</label> -->\n", styles: ["input[type=checkbox],input[type=radio]{display:none}.checkbox,.indeterminate,.radio{display:flex;gap:5px}.custom-checkbox{display:flex;border:1px solid rgb(208,213,221);border-radius:2px;cursor:pointer;position:relative;transition:all .6s ease}input:checked+.custom-checkbox{background:#475467;border:1px solid rgb(71,84,103)}input:checked+.custom-checkbox:after{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%)}input:checked+.checkbox:after{min-height:16px;text-align:center;content:url(/assets/images/check.svg)}.checkbox span:hover{background:#475467;border:1px solid rgb(71,84,103);content:url(/assets/images/check.svg)}.checkbox span:focus{box-shadow:0 0 0 4px #98a2b324}input:checked+.indeterminate:after{content:url(/assets/images/minus.svg)}.indeterminate span:hover{background:#475467;border:1px solid rgb(71,84,103);content:url(/assets/images/minus.svg)}.indeterminate span:focus{box-shadow:0 0 0 4px #98a2b324}.radio .custom-checkbox{border-radius:50%}.radio .custom-checkbox:hover{background:#475467;border-color:#475467}.radio .custom-checkbox:hover:after{content:\"\";background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.radio input:checked+.custom-checkbox:after{content:\"\";background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:.36s ease-in-out 0s 1 normal backwards running antCheckboxEffect;transition:all .6s ease}.sm .custom-checkbox{display:flex;width:16px;height:16px;min-width:16px}.md .custom-checkbox{display:flex;width:20px;height:20px;min-width:20px}.sm.radio input:checked+.custom-checkbox:after,.sm.radio .custom-checkbox:hover:after{width:6px;height:6px}.md.radio input:checked+.custom-checkbox:after,.md.radio .custom-checkbox:hover:after{width:8px;height:8px}.checkbox-label,.checkbox-description{margin:0}.label-sm{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:16px;color:#344054;cursor:pointer}.label-md{font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#344054;cursor:pointer}.description-sm{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:16px;color:#475467}.description-md{font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#475467}.disabled{cursor:not-allowed!important}.disabled .checkbox-label{cursor:not-allowed}.span-disabled{cursor:not-allowed!important;background-color:#f9fafb!important;border:1px solid rgb(208,213,221)!important}.radio.disabled input:checked+.custom-checkbox{border:1px solid rgb(208,213,221);background:#f9fafb}.radio.disabled input:checked+.custom-checkbox:after{background:#d0d5dd}\n"] }]
+        }], propDecorators: { input: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], npType: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], groupName: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], isIndeterminate: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+const FORM_ERROR_MAP = new InjectionToken('FORM_ERROR_MAP');
+
+class NpInputFieldComponent {
+    decimalPipe;
+    defaultErrorMap;
+    constructor(decimalPipe, defaultErrorMap) {
+        this.decimalPipe = decimalPipe;
+        this.defaultErrorMap = defaultErrorMap;
+    }
+    inputRef;
+    size = '';
+    label;
+    placeholder = '';
+    iconLeft;
+    iconRight;
+    hint;
+    errorMap;
+    disabled = false;
+    limitValue;
+    functionHandler;
+    submitted = false;
+    digitsInfo = '1.2-2';
+    locale = 'en-US';
+    inputType = 'text';
+    passwordVisible = false;
+    _input = new FormControl('');
+    _type = 'text';
+    set input(value) {
+        this._input = value ? value : new FormControl('');
+    }
+    set type(value) {
+        this._type = value;
+        this.updateInputType();
+    }
+    get type() {
+        return this._type;
+    }
+    valueChange = new EventEmitter();
+    iconLeftClick = new EventEmitter();
+    iconRightClick = new EventEmitter();
+    onChangeValue() {
+        this.valueChange.emit(this._input?.value);
+    }
+    updateInputType() {
+        if (this._type === 'password') {
+            this.inputType = this.passwordVisible ? 'text' : 'password';
+        }
+        else if (this._type === 'date') {
+            this.inputType = 'date';
+        }
+        else if (this._type === 'number') {
+            this.inputType = 'number';
+        }
+        else {
+            this.inputType = 'text';
+        }
+    }
+    togglePassword() {
+        this.passwordVisible = !this.passwordVisible;
+        this.updateInputType();
+    }
+    get computedStatus() {
+        if (!this._input)
+            return undefined;
+        const control = this._input;
+        const showError = control.invalid && (control.dirty || control.touched || this.submitted);
+        return showError ? 'error' : undefined;
+    }
+    get errorMessageFromInput() {
+        if (!this._input || !this._input.errors)
+            return null;
+        const firstKey = Object.keys(this._input.errors)[0];
+        return (this.errorMap?.[firstKey] || this.defaultErrorMap?.[firstKey] || null);
+    }
+    handleKeyPress(event) {
+        if (this._type === 'number') {
+            const isDigit = /^[0-9]$/.test(event.key);
+            if (!isDigit) {
+                event.preventDefault();
+            }
+        }
+        if (this._type === 'text') {
+            const isLetter = /^[a-zA-Z ]$/.test(event.key);
+            if (!isLetter) {
+                event.preventDefault();
+            }
+        }
+    }
+    onInputChange(event) {
+        const input = event.target.value;
+        const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
+        if (this.limitValue && input.length > this.limitValue) {
+            event.target.value = this._input.value || '';
+            return;
+        }
+        if (this.type === 'number') {
+            if ((!isNaN(+input) && reg.test(input)) ||
+                input === '' ||
+                input === '-') {
+                this._input.setValue(input);
+                this.valueChange.emit(input);
+            }
+            else {
+                event.target.value = this._input.value || '';
+            }
+        }
+        else {
+            if (this.limitValue && input.length > this.limitValue) {
+                event.target.value = this._input.value || '';
+                return;
+            }
+            this._input.setValue(input);
+            this.valueChange.emit(input);
+            if (this.type === 'function') {
+                try {
+                    this.functionHandler?.(input);
+                }
+                catch (e) {
+                    console.warn('functionHandler error:', e);
+                }
+            }
+        }
+    }
+    onBlur() {
+        if (this.type === 'number') {
+            const raw = this._input.value;
+            const numeric = Number(raw?.toString().replace(/,/g, ''));
+            const formatted = this.decimalPipe.transform(numeric, this.digitsInfo, this.locale);
+            if (formatted) {
+                if (this.inputRef?.nativeElement) {
+                    this.inputRef.nativeElement.value = formatted;
+                }
+                const standardized = Number(formatted.replace(/,/g, ''));
+                this._input.setValue(standardized);
+            }
+            else {
+                this._input.setValue(numeric);
+            }
+        }
+    }
+    handleIconLeftClick() {
+        this.iconLeftClick.emit();
+    }
+    handleIconRightClick() {
+        this.iconRightClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputFieldComponent, deps: [{ token: i1$1.DecimalPipe }, { token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputFieldComponent, isStandalone: true, selector: "np-input-field", inputs: { size: "size", label: "label", placeholder: "placeholder", iconLeft: "iconLeft", iconRight: "iconRight", hint: "hint", errorMap: "errorMap", disabled: "disabled", limitValue: "limitValue", functionHandler: "functionHandler", submitted: "submitted", digitsInfo: "digitsInfo", locale: "locale", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper flex column w-full\">\n  <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n  <ng-container *ngIf=\"type === 'date'; else normalInput\">\n    <div [ngClass]=\"size\">\n      <nz-date-picker\n        [formControl]=\"_input\"\n        [nzDisabled]=\"disabled\"\n        [nzFormat]=\"'yyyy-MM-dd'\"\n        class=\"w-full\"\n      ></nz-date-picker>\n    </div>\n  </ng-container>\n  <ng-template #normalInput>\n    <nz-input-group\n      [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n      [nzSuffix]=\"suffixTemplateInfo\"\n      [nzPrefix]=\"prefixTemplateUser\"\n    >\n      <input\n        #inputRef\n        nz-input\n        [type]=\"inputType\"\n        [placeholder]=\"placeholder\"\n        [ngClass]=\"{ 'disabled': disabled}\"\n        [value]=\"_input.value\"\n        (input)=\"onInputChange($event)\"\n        (blur)=\"onBlur()\"\n        (keypress)=\"handleKeyPress($event)\"\n      />\n    </nz-input-group>\n  </ng-template>\n\n  <ng-template #prefixTemplateUser>\n    <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n  </ng-template>\n\n  <ng-template #suffixTemplateInfo>\n    <i\n      class=\"{{ iconRight }} icon-input\"\n      *ngIf=\"type !== 'password'\"\n      (click)=\"handleIconRightClick()\"\n    ></i>\n    <span\n      *ngIf=\"type == 'password'\"\n      nz-icon\n      class=\"ant-input-password-icon\"\n      [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n      (click)=\"togglePassword()\">\n    </span>\n  </ng-template>\n\n  <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n    <div class=\"flex flex-col w-full mb-3\">\n      <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n      <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n    </div>\n    <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n      {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n    </np-typography>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-input-field', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NzInputModule,
+                        NzIconModule,
+                        NpTypographyComponent,
+                        NzDatePickerModule,
+                    ], providers: [DecimalPipe], template: "<div class=\"input-wrapper flex column w-full\">\n  <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n  <ng-container *ngIf=\"type === 'date'; else normalInput\">\n    <div [ngClass]=\"size\">\n      <nz-date-picker\n        [formControl]=\"_input\"\n        [nzDisabled]=\"disabled\"\n        [nzFormat]=\"'yyyy-MM-dd'\"\n        class=\"w-full\"\n      ></nz-date-picker>\n    </div>\n  </ng-container>\n  <ng-template #normalInput>\n    <nz-input-group\n      [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n      [nzSuffix]=\"suffixTemplateInfo\"\n      [nzPrefix]=\"prefixTemplateUser\"\n    >\n      <input\n        #inputRef\n        nz-input\n        [type]=\"inputType\"\n        [placeholder]=\"placeholder\"\n        [ngClass]=\"{ 'disabled': disabled}\"\n        [value]=\"_input.value\"\n        (input)=\"onInputChange($event)\"\n        (blur)=\"onBlur()\"\n        (keypress)=\"handleKeyPress($event)\"\n      />\n    </nz-input-group>\n  </ng-template>\n\n  <ng-template #prefixTemplateUser>\n    <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n  </ng-template>\n\n  <ng-template #suffixTemplateInfo>\n    <i\n      class=\"{{ iconRight }} icon-input\"\n      *ngIf=\"type !== 'password'\"\n      (click)=\"handleIconRightClick()\"\n    ></i>\n    <span\n      *ngIf=\"type == 'password'\"\n      nz-icon\n      class=\"ant-input-password-icon\"\n      [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n      (click)=\"togglePassword()\">\n    </span>\n  </ng-template>\n\n  <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n    <div class=\"flex flex-col w-full mb-3\">\n      <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n      <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n    </div>\n    <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n      {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n    </np-typography>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DecimalPipe }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_ERROR_MAP]
+                }] }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['inputRef', { static: true }]
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], iconLeft: [{
+                type: Input
+            }], iconRight: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], errorMap: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], limitValue: [{
+                type: Input
+            }], functionHandler: [{
+                type: Input
+            }], submitted: [{
+                type: Input
+            }], digitsInfo: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], input: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], iconLeftClick: [{
+                type: Output
+            }], iconRightClick: [{
+                type: Output
+            }] } });
+
+class NpInputTexteraComponent {
+    defaultErrorMap;
+    constructor(defaultErrorMap) {
+        this.defaultErrorMap = defaultErrorMap;
+    }
+    label = '';
+    placeholder;
+    hint;
+    disabled = false;
+    value;
+    limitValue;
+    submitted = false;
+    _input = new FormControl('');
+    currentLength = 0;
+    set input(value) {
+        this._input = value ? value : new FormControl('');
+    }
+    onTextareaInput(event) {
+        const input = event.target.value;
+        if (this.limitValue && input.length > this.limitValue) {
+            const trimmed = input.slice(0, this.limitValue);
+            this._input.setValue(trimmed);
+            this.currentLength = trimmed.length;
+        }
+        else {
+            this._input.setValue(input);
+            this.currentLength = input.length;
+        }
+    }
+    get computedStatus() {
+        if (!this._input)
+            return undefined;
+        const c = this._input;
+        return c.invalid && (c.dirty || c.touched || this.submitted)
+            ? 'error'
+            : undefined;
+    }
+    get errorMessageFromInput() {
+        if (!this._input || !this._input.errors)
+            return null;
+        const firstKey = Object.keys(this._input.errors)[0];
+        return this.defaultErrorMap?.[firstKey] || null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputTexteraComponent, deps: [{ token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputTexteraComponent, isStandalone: true, selector: "np-input-textera", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", value: "value", limitValue: "limitValue", submitted: "submitted", input: "input" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n  <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n  <textarea\n    nz-input\n    [placeholder]=\"placeholder\"\n    [nzAutosize]=\"{ minRows: 5 }\"\n    [disabled]=\"_input.disabled\"\n    [formControl]=\"_input\"\n    (input)=\"onTextareaInput($event)\"\n  ></textarea>\n\n  <div class=\"flex justify-between\">\n    <div class=\"flex-col flex\">\n      <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">\n        {{ errorMessageFromInput }}\n      </np-typography>\n      <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n    </div>\n    <np-typography *ngIf=\"limitValue\" class=\"limit-value\">\n      {{ currentLength }}/{{ limitValue }}\n    </np-typography>\n  </div>\n</div>\n", styles: [".input-hint{color:#475467}.ant-input{border-radius:4px}.ant-input:focus:not(.ant-input-disabled),.ant-input:hover:not(.ant-input-disabled){background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 0 0 4px #f0f2f4}.error{border:none!important}.error:hover,.error:focus,.error:focus-visible,.error:focus-within{box-shadow:none!important}.error .ant-input{border:1px solid rgb(253,162,155)}.error .ant-input:focus:not(.ant-input-disabled),.error .ant-input:hover:not(.ant-input-disabled){background-color:#fff;box-shadow:0 0 0 4px #f044383d}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i3.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputTexteraComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-input-textera', imports: [
+                        CommonModule,
+                        FormsModule,
+                        NzInputModule,
+                        NpTypographyComponent,
+                        ReactiveFormsModule,
+                    ], template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n  <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n  <textarea\n    nz-input\n    [placeholder]=\"placeholder\"\n    [nzAutosize]=\"{ minRows: 5 }\"\n    [disabled]=\"_input.disabled\"\n    [formControl]=\"_input\"\n    (input)=\"onTextareaInput($event)\"\n  ></textarea>\n\n  <div class=\"flex justify-between\">\n    <div class=\"flex-col flex\">\n      <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">\n        {{ errorMessageFromInput }}\n      </np-typography>\n      <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n    </div>\n    <np-typography *ngIf=\"limitValue\" class=\"limit-value\">\n      {{ currentLength }}/{{ limitValue }}\n    </np-typography>\n  </div>\n</div>\n", styles: [".input-hint{color:#475467}.ant-input{border-radius:4px}.ant-input:focus:not(.ant-input-disabled),.ant-input:hover:not(.ant-input-disabled){background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 0 0 4px #f0f2f4}.error{border:none!important}.error:hover,.error:focus,.error:focus-visible,.error:focus-within{box-shadow:none!important}.error .ant-input{border:1px solid rgb(253,162,155)}.error .ant-input:focus:not(.ant-input-disabled),.error .ant-input:hover:not(.ant-input-disabled){background-color:#fff;box-shadow:0 0 0 4px #f044383d}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_ERROR_MAP]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], limitValue: [{
+                type: Input
+            }], submitted: [{
+                type: Input
+            }], input: [{
+                type: Input
+            }] } });
+
+class NpToggleComponent {
+    _input = new FormControl('');
+    set input(value) {
+        if (value === true) {
+            this._input.patchValue(true);
+            return;
+        }
+        this._input = !!value ? value : new FormControl(false);
+    }
+    size = 'sm';
+    label;
+    subLabel;
+    disabled = false;
+    // private _checked: boolean = false;
+    // @Input()
+    // set checked(value: boolean) {
+    //   this._checked = value;
+    //   this.checkedChange.emit(value);
+    // }
+    // get checked(): boolean {
+    //   return this._checked;
+    // }
+    valueChange = new EventEmitter();
+    toggleChecked(value) {
+        this._input?.patchValue(value);
+        this.valueChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpToggleComponent, isStandalone: true, selector: "np-toggle", inputs: { input: "input", size: "size", label: "label", subLabel: "subLabel", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex gap-2\">\n  <nz-switch\n   [ngModel]=\"_input.value\"\n   (ngModelChange)=\"toggleChecked($event)\"\n   [nzDisabled]=\"disabled\"\n   [nzSize]=\"size === 'sm' ? 'small' : 'default'\"\n  ></nz-switch>\n  <div class=\"flex flex-col justify-center\">\n    <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label leading-none\"\n    [class.input-label-checked]=\"_input.value\"\n    >{{ label }}</np-typography>\n    <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" *ngIf=\"subLabel\" class=\"input-subLabel\"\n    [class.input-label-checked]=\"_input.value\">{{ subLabel }}</np-typography>\n  </div>\n</div>\n", styles: ["::ng-deep .ant-switch{background-color:#f2f4f7}::ng-deep .ant-switch:focus{box-shadow:0 0 0 4px #98a2b333}::ng-deep .ant-switch:focus:hover{box-shadow:0 0 0 4px #98a2b333}::ng-deep .ant-switch-checked{background-color:#475467}::ng-deep .ant-switch-checked:hover{background-color:#344054}.input-label{color:#344054}.input-subLabel{color:#475467}nz-switch{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i3$1.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzButtonModule }, { 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: NpToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-toggle', imports: [
+                        CommonModule,
+                        FormsModule,
+                        NzSwitchModule,
+                        NzButtonModule,
+                        NpTypographyComponent,
+                    ], template: "<div class=\"flex gap-2\">\n  <nz-switch\n   [ngModel]=\"_input.value\"\n   (ngModelChange)=\"toggleChecked($event)\"\n   [nzDisabled]=\"disabled\"\n   [nzSize]=\"size === 'sm' ? 'small' : 'default'\"\n  ></nz-switch>\n  <div class=\"flex flex-col justify-center\">\n    <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label leading-none\"\n    [class.input-label-checked]=\"_input.value\"\n    >{{ label }}</np-typography>\n    <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" *ngIf=\"subLabel\" class=\"input-subLabel\"\n    [class.input-label-checked]=\"_input.value\">{{ subLabel }}</np-typography>\n  </div>\n</div>\n", styles: ["::ng-deep .ant-switch{background-color:#f2f4f7}::ng-deep .ant-switch:focus{box-shadow:0 0 0 4px #98a2b333}::ng-deep .ant-switch:focus:hover{box-shadow:0 0 0 4px #98a2b333}::ng-deep .ant-switch-checked{background-color:#475467}::ng-deep .ant-switch-checked:hover{background-color:#344054}.input-label{color:#344054}.input-subLabel{color:#475467}nz-switch{display:flex}\n"] }]
+        }], propDecorators: { input: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], subLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+var NpInputMode;
+(function (NpInputMode) {
+    NpInputMode["DEFAULT"] = "default";
+    NpInputMode["MULTIPLE"] = "multiple";
+    NpInputMode["TAGS"] = "tags";
+})(NpInputMode || (NpInputMode = {}));
+class NpSelectComponent {
+    npType = 'sm';
+    className = '';
+    label;
+    hint;
+    placeHolder = '';
+    labelTemplate = undefined;
+    valueTemplate = undefined;
+    isAllowClear = true;
+    iconPrefixClass = undefined;
+    mode = 'default';
+    listItem = [];
+    NpMode = NpInputMode;
+    _input = new FormControl(null);
+    set input(value) {
+        this._input = !!value ? value : new FormControl([]);
+    }
+    valueChange = new EventEmitter();
+    onChangeValue() {
+        this.valueChange.emit(this._input?.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpSelectComponent, isStandalone: true, selector: "np-select", inputs: { npType: "npType", className: "className", label: "label", hint: "hint", placeHolder: "placeHolder", labelTemplate: "labelTemplate", valueTemplate: "valueTemplate", isAllowClear: "isAllowClear", iconPrefixClass: "iconPrefixClass", mode: "mode", listItem: "listItem", input: "input" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1 np-select {{ className }}\">\n  <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n  <div class=\"relative {{ npType }} \" [class.add-prefix-icon]=\"iconPrefixClass\">\n    <nz-select\n      [nzPlaceHolder]=\"placeHolder\"\n      class=\"w-full\"\n      [formControl]=\"_input\"\n      [nzShowSearch]=\"true\"\n      [nzAllowClear]=\"isAllowClear\"\n      [nzMode]=\"mode\"\n      [nzCustomTemplate]=\"valueTemplate ?? defaultTemplate\"\n      (ngModelChange)=\"onChangeValue()\"\n    >\n      @for (item of listItem; track item) {\n      <nz-option\n        nzCustomContent\n        [nzLabel]=\"item?.label\"\n        [nzValue]=\"item?.value\"\n      >\n        @if (labelTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"\n        ></ng-container>\n        } @else {\n        <div class=\"flex justify-between\">\n          <div>{{ item?.label }}</div>\n          @if(mode === NpMode.DEFAULT) {\n          <div class=\"icon-check\"><i class=\"fa-light fa-check\"></i></div>\n          }\n        </div>\n        }\n      </nz-option>\n      }\n    </nz-select>\n    <ng-template #defaultTemplate let-selected>\n      {{ selected.nzLabel }}\n    </ng-template>\n    <div class=\"prefix-icon absolute\">\n      <i class=\"{{ iconPrefixClass }}\"></i>\n    </div>\n  </div>\n  <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n</div>\n\n<!-- <nz-select\n    nzMode=\"multiple\"\n    nzPlaceHolder=\"Please select\"\n    [(ngModel)]=\"value\"\n    class=\"w-full\"\n  >\n    @for (item of listItem; track item) {\n    <nz-option [nzLabel]=\"item?.label\" [nzValue]=\"item?.value\"></nz-option>\n    }\n  </nz-select> -->\n", styles: ["::ng-deep .np-select .prefix-icon{display:none}::ng-deep .np-select .ant-select .ant-select-selector{border-radius:8px}::ng-deep .np-select .ant-select .ant-select-selector:focus{box-shadow:0 0 0 4px #98a2b324}::ng-deep .np-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{box-shadow:0 0 0 4px #98a2b324}::ng-deep .np-select .ant-select-multiple .ant-select-selection-item-remove{margin-left:5px;margin-top:1px}::ng-deep .np-select .add-prefix-icon .ant-select-single .ant-select-selection-search .ant-select-selection-search-input{margin-left:28px}::ng-deep .np-select .add-prefix-icon .ant-select-selection-search .ant-select-selection-search-input{min-height:100%}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selection-search{margin-left:0}::ng-deep .np-select .add-prefix-icon .prefix-icon{display:block}::ng-deep .np-select .add-prefix-icon .ant-select-selection-placeholder{padding-left:8px}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selection-placeholder{padding-left:28px}::ng-deep .np-select .add-prefix-icon .ant-select-single .ant-select-selector{padding-left:30px}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selector{padding-left:38px}::ng-deep .np-select .add-prefix-icon .ant-select-selection-item{padding-left:8px}::ng-deep .np-select .ant-select-multiple .ant-select-selection-item{background:#fff;border-radius:6px;margin:0 6px 0 0;padding-left:10px;padding-right:10px}::ng-deep .np-select .sm .prefix-icon{top:10px;left:14px}::ng-deep .np-select .sm .ant-select .ant-select-selector{padding-top:5px;padding-bottom:5px;min-height:40px}::ng-deep .np-select .md .prefix-icon{top:14px;left:14px}::ng-deep .np-select .md .ant-select .ant-select-selector{padding-top:7px;padding-bottom:7px;min-height:44px}::ng-deep .ant-select-dropdown{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px}::ng-deep .ant-select-dropdown .icon-check{display:none}::ng-deep .ant-select-item-option-selected:not(.ant-select-item-option-disabled){background-color:#f9fafb}::ng-deep .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .icon-check{display:block}\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: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-select', imports: [
+                        CommonModule,
+                        NpTypographyComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NzSelectModule,
+                    ], template: "<div class=\"flex flex-col gap-1 np-select {{ className }}\">\n  <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n  <div class=\"relative {{ npType }} \" [class.add-prefix-icon]=\"iconPrefixClass\">\n    <nz-select\n      [nzPlaceHolder]=\"placeHolder\"\n      class=\"w-full\"\n      [formControl]=\"_input\"\n      [nzShowSearch]=\"true\"\n      [nzAllowClear]=\"isAllowClear\"\n      [nzMode]=\"mode\"\n      [nzCustomTemplate]=\"valueTemplate ?? defaultTemplate\"\n      (ngModelChange)=\"onChangeValue()\"\n    >\n      @for (item of listItem; track item) {\n      <nz-option\n        nzCustomContent\n        [nzLabel]=\"item?.label\"\n        [nzValue]=\"item?.value\"\n      >\n        @if (labelTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"\n        ></ng-container>\n        } @else {\n        <div class=\"flex justify-between\">\n          <div>{{ item?.label }}</div>\n          @if(mode === NpMode.DEFAULT) {\n          <div class=\"icon-check\"><i class=\"fa-light fa-check\"></i></div>\n          }\n        </div>\n        }\n      </nz-option>\n      }\n    </nz-select>\n    <ng-template #defaultTemplate let-selected>\n      {{ selected.nzLabel }}\n    </ng-template>\n    <div class=\"prefix-icon absolute\">\n      <i class=\"{{ iconPrefixClass }}\"></i>\n    </div>\n  </div>\n  <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n</div>\n\n<!-- <nz-select\n    nzMode=\"multiple\"\n    nzPlaceHolder=\"Please select\"\n    [(ngModel)]=\"value\"\n    class=\"w-full\"\n  >\n    @for (item of listItem; track item) {\n    <nz-option [nzLabel]=\"item?.label\" [nzValue]=\"item?.value\"></nz-option>\n    }\n  </nz-select> -->\n", styles: ["::ng-deep .np-select .prefix-icon{display:none}::ng-deep .np-select .ant-select .ant-select-selector{border-radius:8px}::ng-deep .np-select .ant-select .ant-select-selector:focus{box-shadow:0 0 0 4px #98a2b324}::ng-deep .np-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{box-shadow:0 0 0 4px #98a2b324}::ng-deep .np-select .ant-select-multiple .ant-select-selection-item-remove{margin-left:5px;margin-top:1px}::ng-deep .np-select .add-prefix-icon .ant-select-single .ant-select-selection-search .ant-select-selection-search-input{margin-left:28px}::ng-deep .np-select .add-prefix-icon .ant-select-selection-search .ant-select-selection-search-input{min-height:100%}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selection-search{margin-left:0}::ng-deep .np-select .add-prefix-icon .prefix-icon{display:block}::ng-deep .np-select .add-prefix-icon .ant-select-selection-placeholder{padding-left:8px}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selection-placeholder{padding-left:28px}::ng-deep .np-select .add-prefix-icon .ant-select-single .ant-select-selector{padding-left:30px}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selector{padding-left:38px}::ng-deep .np-select .add-prefix-icon .ant-select-selection-item{padding-left:8px}::ng-deep .np-select .ant-select-multiple .ant-select-selection-item{background:#fff;border-radius:6px;margin:0 6px 0 0;padding-left:10px;padding-right:10px}::ng-deep .np-select .sm .prefix-icon{top:10px;left:14px}::ng-deep .np-select .sm .ant-select .ant-select-selector{padding-top:5px;padding-bottom:5px;min-height:40px}::ng-deep .np-select .md .prefix-icon{top:14px;left:14px}::ng-deep .np-select .md .ant-select .ant-select-selector{padding-top:7px;padding-bottom:7px;min-height:44px}::ng-deep .ant-select-dropdown{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px}::ng-deep .ant-select-dropdown .icon-check{display:none}::ng-deep .ant-select-item-option-selected:not(.ant-select-item-option-disabled){background-color:#f9fafb}::ng-deep .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .icon-check{display:block}\n"] }]
+        }], propDecorators: { npType: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], labelTemplate: [{
+                type: Input
+            }], valueTemplate: [{
+                type: Input
+            }], isAllowClear: [{
+                type: Input
+            }], iconPrefixClass: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], listItem: [{
+                type: Input
+            }], input: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+// import { NpDropdownContentMenuComponent } from './np-dropdown-content-menu/np-dropdown-content-menu.component';
+// export interface NpDroplistItem {
+//   value: string;
+//   label: string;
+//   nzValue: string;
+//   nzLabel: string;
+// }
+var NpMode;
+(function (NpMode) {
+    NpMode["DEFAULT"] = "default";
+    NpMode["MULTIPLE"] = "multiple";
+    NpMode["TAGS"] = "tags";
+})(NpMode || (NpMode = {}));
+class NpDropdownsComponent {
+    npType = 'secondary';
+    npSize = 'sm';
+    className = '';
+    value = 'Menu Dropdown';
+    useSearch = false;
+    alwaysOpen = false;
+    placement = 'bottomCenter';
+    // @Input() label: string = 'Menu Dropdown';
+    list = [];
+    // @Output() valueChange = new EventEmitter<any>();
+    valueChange = new EventEmitter();
+    visible = false;
+    searchControl = new FormControl('');
+    originalList = [];
+    filteredList = [];
+    ngOnInit() {
+        this.originalList = [...this.list];
+        this.filteredList = [...this.list];
+        this.searchControl.valueChanges.subscribe((text) => {
+            this.filterList(text ?? '');
+        });
+    }
+    clickMe() {
+        this.visible = false;
+    }
+    change(value) { }
+    onSelectItem(item) {
+        this.visible = false;
+        if (this.npType !== 'icon') {
+            this.value = item?.value;
+        }
+        // this.label = item?.label;
+        // this.valueChange?.emit(item);
+        this.valueChange.emit(item);
+    }
+    onRightIconClick() {
+        this.searchControl.setValue('');
+    }
+    filterList(search) {
+        const normalizedSearch = search?.toLowerCase().trim() || '';
+        if (!normalizedSearch) {
+            this.filteredList = [...this.originalList];
+            return;
+        }
+        const matchedItems = this.originalList.filter((item) => item.label?.toLowerCase().includes(normalizedSearch));
+        const originalWithoutDivider = this.originalList.filter((item) => item.type !== 'divider');
+        const isSame = matchedItems.length === originalWithoutDivider.length &&
+            matchedItems.every((item) => originalWithoutDivider.some((o) => o.label === item.label));
+        if (isSame) {
+            this.filteredList = [...this.originalList];
+        }
+        else {
+            this.filteredList = matchedItems;
+        }
+    }
+    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: 
+                // 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
+                NzSelectModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDropdownsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-dropdowns', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NpButtonComponent,
+                        // NzPopoverModule,
+                        NzDropDownModule,
+                        // 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"] }]
+        }], propDecorators: { npType: [{
+                type: Input
+            }], npSize: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], useSearch: [{
+                type: Input
+            }], alwaysOpen: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], visible: [{
+                type: Output
+            }] } });
+
+class NpTooltipComponent {
+    renderer;
+    type = 'primary';
+    text = 'Title';
+    descriptions;
+    position;
+    tooltipVisible = false;
+    container;
+    _ngContent = null;
+    set ngContent(value) {
+        this._ngContent = value;
+        this.updateContent();
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    updateContent() {
+        if (!this._ngContent) {
+            return;
+        }
+        // if (typeof this._ngContent === 'string') {
+        //   const contentContainer = this.renderer.createElement('ng-container');
+        //   contentContainer.innerHTML = this.ngContent;
+        //   this.renderer.appendChild(this.container.nativeElement, contentContainer);
+        // }
+        if (this._ngContent instanceof Element) {
+            this.renderer.appendChild(this.container.nativeElement, this._ngContent);
+        }
+    }
+    get tooltipColor() {
+        return this.type === 'primary'
+            ? 'rgba(255, 255, 255, 1)'
+            : 'rgba(16, 24, 40, 1)';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTooltipComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpTooltipComponent, isStandalone: true, selector: "np-tooltip", inputs: { type: "type", text: "text", descriptions: "descriptions", position: "position", tooltipVisible: "tooltipVisible", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"h-full\"\n  [nzTooltipTitle]=\"customTooltip\"\n  [nzTooltipPlacement]=\"position\"\n  nzTooltipTrigger=\"hover\"\n  [nzTooltipVisible]='tooltipVisible'\n  nzTooltipOverlayClassName=\"tooltip-class\"\n  nz-button\n  nz-tooltip\n  [nzTooltipColor]=\"tooltipColor\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #customTooltip>\n  <div class=\"custom-tooltip\">\n    <np-typography\n      npType=\"text\"\n      npSize=\"xs\"\n      npWeight=\"semibold\"\n      [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n      >{{ text }}</np-typography\n    >\n    <np-typography\n      npType=\"text\"\n      npSize=\"xs\"\n      npWeight=\"medium\"\n      [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n      >{{ descriptions }}</np-typography\n    >\n  </div>\n</ng-template>\n", styles: [".custom-tooltip{box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;padding:6px 8px;border-radius:8px}::ng-deep .ant-tooltip-inner{padding:0;border-radius:8px;display:flex;align-items:center}::ng-deep .tooltip-class .ant-tooltip-arrow{display:block!important}::ng-deep .ant-tooltip-placement-top.tooltip-class .ant-tooltip-arrow{transform:translateY(95%) translate(-50%)}::ng-deep .ant-tooltip-placement-topLeft .ant-tooltip-arrow{transform:translateY(94%)}\n"], dependencies: [{ kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i1$3.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i2$2.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: CommonModule }, { 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: NpTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-tooltip', imports: [
+                        NzButtonModule,
+                        NzToolTipModule,
+                        CommonModule,
+                        NpTypographyComponent,
+                    ], template: "<div\n  #container\n  class=\"h-full\"\n  [nzTooltipTitle]=\"customTooltip\"\n  [nzTooltipPlacement]=\"position\"\n  nzTooltipTrigger=\"hover\"\n  [nzTooltipVisible]='tooltipVisible'\n  nzTooltipOverlayClassName=\"tooltip-class\"\n  nz-button\n  nz-tooltip\n  [nzTooltipColor]=\"tooltipColor\"\n>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #customTooltip>\n  <div class=\"custom-tooltip\">\n    <np-typography\n      npType=\"text\"\n      npSize=\"xs\"\n      npWeight=\"semibold\"\n      [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n      >{{ text }}</np-typography\n    >\n    <np-typography\n      npType=\"text\"\n      npSize=\"xs\"\n      npWeight=\"medium\"\n      [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n      >{{ descriptions }}</np-typography\n    >\n  </div>\n</ng-template>\n", styles: [".custom-tooltip{box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;padding:6px 8px;border-radius:8px}::ng-deep .ant-tooltip-inner{padding:0;border-radius:8px;display:flex;align-items:center}::ng-deep .tooltip-class .ant-tooltip-arrow{display:block!important}::ng-deep .ant-tooltip-placement-top.tooltip-class .ant-tooltip-arrow{transform:translateY(95%) translate(-50%)}::ng-deep .ant-tooltip-placement-topLeft .ant-tooltip-arrow{transform:translateY(94%)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { type: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], descriptions: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], tooltipVisible: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], ngContent: [{
+                type: Input
+            }] } });
+
+class NpActionBarComponent {
+    actions = [];
+    data;
+    notCompressMin = 5;
+    isNotResponsive = false;
+    triggerBtn;
+    resizeContainer;
+    scrollWrapper;
+    unCompressedActions = [];
+    unCompressedActions2 = [];
+    compressedActions = [];
+    isMoreOpen = false;
+    dropdownStyles = { top: '0px', left: '0px' };
+    countIcon = 0;
+    countResize = 0;
+    canPrevious = false;
+    canNext = false;
+    isOverflowing = false;
+    isPreviousDisable = false;
+    isNextDisable = false;
+    isReturn = false;
+    valueStart = 0;
+    isCheckValue = false;
+    scrollMaxWidth = null;
+    totalActionWidth = 0;
+    lastResizeWidth = 0;
+    isResize = false;
+    iconWidth = 0;
+    visibleIcons = 0;
+    resizeStack = [];
+    resizeObserver = null;
+    ngOnInit() {
+        this.splitActions();
+        this.unCompressedActions2 = this.unCompressedActions;
+        this.countIcon = this.unCompressedActions.length;
+        this.countResize = this.countIcon - 3;
+    }
+    ngAfterViewInit() {
+        if (!this.isNotResponsive) {
+            setTimeout(() => {
+                this.updateScrollState();
+                this.attachScrollListener();
+                this.setupResizeObserver();
+                let count = 0;
+                const interval = setInterval(() => {
+                    this.updateScrollState();
+                    count++;
+                    if (count > 5)
+                        clearInterval(interval);
+                });
+            });
+        }
+    }
+    setupResizeObserver() {
+        const parent = this.resizeContainer?.nativeElement?.parentElement;
+        if (!parent || typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateScrollState();
+        });
+        this.resizeObserver.observe(parent);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    splitActions() {
+        const visible = this.actions.filter((a) => !a.hidden);
+        const count = visible.length;
+        this.unCompressedActions = visible.slice(0, this.notCompressMin);
+        this.compressedActions =
+            count > this.notCompressMin ? visible.slice(this.notCompressMin) : [];
+    }
+    trigger(action) {
+        if (typeof action.onClick === 'function') {
+            action.onClick(this.data);
+        }
+        this.isMoreOpen = false;
+    }
+    showMoreActions() {
+        this.isMoreOpen = !this.isMoreOpen;
+        if (this.isMoreOpen && this.triggerBtn?.nativeElement) {
+            const rect = this.triggerBtn.nativeElement.getBoundingClientRect();
+            const dropdownWidth = 150;
+            const left = rect.left + rect.width / 2 - dropdownWidth / 2 + window.scrollX;
+            this.dropdownStyles = {
+                top: `${rect.bottom + 10}px`,
+                left: `${Math.max(left, 10)}px`,
+            };
+        }
+    }
+    onClickOutside(event) {
+        const target = event.target;
+        const inside = this.triggerBtn?.nativeElement.contains(target);
+        if (!inside) {
+            this.isMoreOpen = false;
+        }
+    }
+    onWindowScroll() {
+        this.isMoreOpen = false;
+    }
+    onResize() {
+        if (!this.isNotResponsive) {
+            this.updateScrollState();
+        }
+    }
+    // private updateScrollState(): void {
+    //   const el = this.resizeContainer?.nativeElement;
+    //   if (!el) return;
+    //   const totalActionWidth = el.scrollWidth;
+    //   const parentWidth = el.parentElement ? el.parentElement.clientWidth - 3 : 0;
+    //   if (!this.isCheckValue) {
+    //     this.isCheckValue = true;
+    //     this.valueStart = totalActionWidth;
+    //   }
+    //   if (parentWidth > this.valueStart) this.isReturn = false;
+    //   if (parentWidth > totalActionWidth) {
+    //     if (!this.isReturn) this.scrollMaxWidth = totalActionWidth;
+    //   } else {
+    //     this.scrollMaxWidth = 64;
+    //     this.isReturn = true;
+    //   }
+    //   if (totalActionWidth >= parentWidth || this.isReturn) {
+    //     this.isOverflowing = true;
+    //     this.unCompressedActions2 = [
+    //       ...this.unCompressedActions,
+    //       ...this.compressedActions,
+    //     ];
+    //   } else {
+    //     this.isOverflowing = false;
+    //     this.unCompressedActions2 = [...this.unCompressedActions];
+    //   }
+    //   this.canPrevious = this.isOverflowing;
+    //   this.canNext = this.isOverflowing;
+    //   setTimeout(() => {
+    //     this.updateBtnScroll();
+    //   }, 0);
+    // }
+    updateScrollState() {
+        const el = this.resizeContainer?.nativeElement;
+        if (!el)
+            return;
+        if (this.totalActionWidth !== this.scrollMaxWidth) {
+            this.totalActionWidth = el.scrollWidth;
+        }
+        let parentWidth = el.parentElement ? el.parentElement.clientWidth - 3 : 0;
+        if (!this.isCheckValue) {
+            this.isCheckValue = true;
+            this.valueStart = this.totalActionWidth;
+        }
+        if (parentWidth > this.valueStart)
+            this.isReturn = false;
+        if (this.isReturn) {
+            parentWidth = parentWidth - 73;
+        }
+        if (parentWidth > this.totalActionWidth) {
+            const lastState = this.resizeStack[this.resizeStack.length - 1];
+            if (this.countResize === this.countIcon - 3) {
+                this.scrollMaxWidth = this.valueStart;
+                this.isResize = false;
+            }
+            if (parentWidth > lastState) {
+                this.countResize++;
+                const last = this.resizeStack.pop();
+                this.scrollMaxWidth = last !== undefined ? last : null;
+                this.totalActionWidth = last !== undefined ? last : 0;
+            }
+        }
+        else {
+            this.scrollMaxWidth = this.countResize * 25 - 11;
+            const lastState = this.resizeStack[this.resizeStack.length - 1];
+            if (lastState !== this.scrollMaxWidth) {
+                this.resizeStack.push(this.totalActionWidth);
+            }
+            if (this.totalActionWidth !== this.scrollMaxWidth) {
+                this.totalActionWidth = this.scrollMaxWidth;
+                this.countResize--;
+                this.lastResizeWidth = parentWidth;
+            }
+            this.isResize = true;
+            this.isReturn = true;
+        }
+        if (this.totalActionWidth >= parentWidth || this.isReturn) {
+            this.isOverflowing = true;
+            this.unCompressedActions2 = [
+                ...this.unCompressedActions,
+                ...this.compressedActions,
+            ];
+        }
+        else {
+            this.isOverflowing = false;
+            this.unCompressedActions2 = [...this.unCompressedActions];
+        }
+        this.canPrevious = this.isOverflowing;
+        this.canNext = this.isOverflowing;
+        setTimeout(() => {
+            this.updateBtnScroll();
+        }, 0);
+    }
+    updateBtnScroll() {
+        const ele = this.scrollWrapper?.nativeElement;
+        this.isPreviousDisable = ele.scrollLeft <= 0;
+        this.isNextDisable = ele.scrollLeft + ele.clientWidth >= ele.scrollWidth;
+    }
+    attachScrollListener() {
+        const el = this.scrollWrapper?.nativeElement;
+        if (el) {
+            el.addEventListener('scroll', () => this.updateBtnScroll());
+        }
+    }
+    scrollLeft() {
+        if (this.isPreviousDisable)
+            return;
+        const el = this.scrollWrapper?.nativeElement;
+        if (el) {
+            const scrollAmount = this.getScrollStep();
+            el.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+            console.log('scrollLeft :', scrollAmount);
+        }
+    }
+    scrollRight() {
+        if (this.isNextDisable)
+            return;
+        const el = this.scrollWrapper?.nativeElement;
+        if (el) {
+            const scrollAmount = this.getScrollStep();
+            el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+            console.log('scrollLeft :', scrollAmount);
+        }
+    }
+    getScrollStep() {
+        const el = this.scrollWrapper?.nativeElement;
+        const btn = el?.querySelector('button');
+        if (!btn)
+            return 100; // fallback
+        const iconWidth = btn.offsetWidth;
+        const gap = 12;
+        const containerWidth = el.clientWidth;
+        const visibleIcons = Math.ceil(containerWidth / (iconWidth + gap));
+        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"] }] });
+}
+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"] }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], notCompressMin: [{
+                type: Input
+            }], isNotResponsive: [{
+                type: Input
+            }], triggerBtn: [{
+                type: ViewChild,
+                args: ['triggerBtn', { read: ElementRef }]
+            }], resizeContainer: [{
+                type: ViewChild,
+                args: ['resizeContainer']
+            }], scrollWrapper: [{
+                type: ViewChild,
+                args: ['scrollWrapper']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class NpTreeComponent {
+    type = 'default';
+    expandPosition = 'left';
+    notCompressMin = 3;
+    isCompactActions = false;
+    autoHideActions = true;
+    className = '';
+    _list = [];
+    _flattenList = [];
+    set list(value) {
+        this._flattenList = this.getFlattenList(value);
+        this._list = value;
+        this.visibleNodes = this.getVisibleNodes();
+    }
+    _input = new FormControl(null);
+    set input(value) {
+        this._input = !!value ? value : new FormControl([]);
+    }
+    valueChange = new EventEmitter();
+    itemActiveId = '';
+    useLine = false;
+    visibleNodes = [];
+    getFlattenList(arr, level = 0, parentId = null, parentLastMap = {}, parentMap = {}) {
+        if (!arr)
+            return [];
+        return arr.reduce((acc, item, index, array) => {
+            const isLast = index === array.length - 1;
+            const isLastByLevel = { ...parentLastMap, [level]: isLast };
+            const hasParentByLevel = { ...parentMap, [level]: !!parentId };
+            const flatItem = {
+                ...item,
+                level,
+                parentId,
+                isExpanded: false,
+                isLastByLevel,
+                hasParentByLevel,
+            };
+            acc.push(flatItem);
+            if (item.childrens?.length) {
+                const children = this.getFlattenList(item.childrens, level + 1, item.id, isLastByLevel, hasParentByLevel);
+                acc.push(...children);
+            }
+            return acc;
+        }, []);
+    }
+    onExpand(item) {
+        item.isExpanded = !item.isExpanded;
+        this.visibleNodes = this.getVisibleNodes();
+    }
+    getVisibleNodes() {
+        const result = [];
+        const map = new Map(this._flattenList?.map((item) => [item.id, item]));
+        for (const item of this._flattenList ?? []) {
+            if (!item.parentId || this.isParentExpanded(item, map)) {
+                result.push(item);
+            }
+        }
+        return result;
+    }
+    isParentExpanded(item, map) {
+        let parent = map.get(item.parentId);
+        while (parent) {
+            if (!parent.isExpanded)
+                return false;
+            parent = map.get(parent.parentId);
+        }
+        return true;
+    }
+    itemHasChildren(item) {
+        return this._flattenList?.some((x) => x.parentId === item.id) ?? false;
+    }
+    onSelectItem(item) {
+        if (!item) {
+            return;
+        }
+        item.isSelected = !item.isSelected;
+        this.itemActiveId = item.id;
+        if (this.type === 'default')
+            return;
+        this.onCheckItem(item);
+    }
+    onCheckItem(item) {
+        const isParentClick = this.itemHasChildren(item);
+        item.isChecked = !item.isChecked;
+        item.isIndeterminate = false;
+        item.checkboxType = 'checkbox';
+        if (isParentClick) {
+            this.updateChildrenSelection(item);
+        }
+        this.updateParentSelection(item.parentId ?? undefined);
+        this.onValueChange();
+    }
+    updateParentSelection(parentId) {
+        if (!parentId)
+            return;
+        const parentNode = this._flattenList?.find((x) => x.id === parentId);
+        if (!parentNode)
+            return;
+        const children = this._flattenList?.filter((x) => x.parentId === parentNode.id) ?? [];
+        const allSelected = children.every((child) => child.isChecked);
+        const someSelected = children.some((child) => child.isChecked || child.isIndeterminate);
+        parentNode.isIndeterminate = someSelected && !allSelected;
+        parentNode.isChecked = allSelected || (someSelected && !allSelected);
+        parentNode.checkboxType = allSelected
+            ? 'checkbox'
+            : someSelected
+                ? 'indeterminate'
+                : undefined;
+        this.updateParentSelection(parentNode.parentId ?? undefined);
+    }
+    updateChildrenSelection(node) {
+        const children = this._flattenList?.filter((x) => x.parentId === node.id) ?? [];
+        for (const child of children) {
+            child.isChecked = node.isChecked;
+            child.isIndeterminate = false;
+            child.checkboxType = 'checkbox';
+            this.updateChildrenSelection(child);
+        }
+    }
+    onValueChange() {
+        // this.valueChange.
+        // console.log('data-datadata', this._input?.value);
+    }
+    onSelectAction(event) {
+        if (event.onClick()) {
+            event.onClick(event);
+        }
+    }
+    ngOnInit() {
+        if (this._list?.length) {
+            this.normalizeIcons(this._list);
+        }
+    }
+    normalizeIcons(list) {
+        list.forEach((item) => {
+            if (item.iconCollapsed) {
+                item.iconExpanded ??= item.iconCollapsed;
+                item.iconLeaf ??= item.iconCollapsed;
+            }
+            if (item.childrens?.length) {
+                this.normalizeIcons(item.childrens);
+            }
+        });
+    }
+    getNodeClasses(item, isLast) {
+        return {
+            ['level-' + (item.level ?? 0)]: true,
+            'is-last': isLast,
+        };
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-tree', imports: [
+                        CommonModule,
+                        NpCheckboxComponent,
+                        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"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], expandPosition: [{
+                type: Input
+            }], notCompressMin: [{
+                type: Input
+            }], isCompactActions: [{
+                type: Input
+            }], autoHideActions: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], input: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], itemActiveId: [{
+                type: Input
+            }], useLine: [{
+                type: Input
+            }] } });
+
+class NpPaginationComponent {
+    type = 'basic';
+    totalItems = 0;
+    pageSize = [];
+    isReverse = false;
+    pageSizeChange = new EventEmitter();
+    pageTotal = 1;
+    _pageSizeValue = 10;
+    _pageIndex = 1;
+    isDropdownOpenMap = {
+        basic: false,
+        outlined: false,
+        text: false,
+        simple: false,
+        full: false,
+    };
+    get pageIndex() {
+        return this._pageIndex;
+    }
+    set pageIndex(value) {
+        if (value !== this._pageIndex) {
+            this._pageIndex = value;
+            this.pageIndexChange.emit(this._pageIndex);
+        }
+    }
+    get pageSizeOptions() {
+        return this._pageSizeValue;
+    }
+    set pageSizeOptions(value) {
+        if (value !== this._pageSizeValue) {
+            this._pageSizeValue = value;
+            this.pageSizeChange.emit(value);
+            this.pageIndex = 1;
+            this.calculatePageTotal();
+        }
+    }
+    pageIndexChange = new EventEmitter();
+    triggerRef;
+    ngOnInit() {
+        if (this.pageSize?.length > 0) {
+            this.pageSizeOptions = this.pageSize[0];
+        }
+        this.calculatePageTotal();
+    }
+    ngOnChanges(changes) {
+        if (changes['pageSize']) {
+            this.pageSizeOptions = this.pageSize?.length > 0 ? this.pageSize[0] : 10;
+        }
+        this.calculatePageTotal();
+    }
+    calculatePageTotal() {
+        this.pageTotal = Math.ceil(this.totalItems / this.pageSizeOptions);
+        if (this.pageIndex >= this.pageTotal) {
+            this.pageIndex = this.pageTotal;
+        }
+        if (this.pageIndex < 1) {
+            this.pageIndex = 1;
+        }
+    }
+    onPageSizeChange(newSize) {
+        const size = Number(newSize);
+        if (!isNaN(size)) {
+            this.pageSizeOptions = size;
+            this.pageIndex = 1;
+            this.pageSizeChange.emit(size);
+            this.calculatePageTotal();
+        }
+    }
+    dropdownStyleMap = {};
+    toggleDropdownByType(type) {
+        Object.keys(this.isDropdownOpenMap).forEach((key) => {
+            this.isDropdownOpenMap[key] = false;
+        });
+        this.isDropdownOpenMap[type] = true;
+        if (this.triggerRef?.nativeElement) {
+            const rect = this.triggerRef.nativeElement.getBoundingClientRect();
+            this.dropdownStyleMap[type] = {
+                top: `${rect.bottom}px`,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`,
+            };
+        }
+    }
+    onSelectPageSize(size) {
+        this.isDropdownOpenMap[this.type] = false;
+        this.onPageSizeChange(size.toString());
+    }
+    getDisplayedPages() {
+        const pages = [];
+        const total = this.pageTotal;
+        const current = this.pageIndex;
+        if (total <= 7) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        pages.push(1, 2, 3);
+        if (current > 3) {
+            pages.push('...');
+        }
+        let start = Math.max(4, current - 1);
+        let end = Math.min(total - 3, current + 1);
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        if (current < total - 3) {
+            pages.push('...');
+        }
+        pages.push(total - 2, total - 1, total);
+        return pages;
+    }
+    prevPage() {
+        if (this.pageIndex > 1) {
+            this.changePage(this.pageIndex - 1);
+        }
+    }
+    nextPage() {
+        if (this.pageIndex < this.pageTotal) {
+            this.changePage(this.pageIndex + 1);
+        }
+    }
+    changePage(newPage) {
+        if (typeof newPage === 'number' && newPage !== this.pageIndex) {
+            this.pageIndex = newPage;
+        }
+    }
+    onDocumentClick(event) {
+        const clickedInside = this.triggerRef?.nativeElement?.contains(event.target);
+        if (!clickedInside && this.type) {
+            this.isDropdownOpenMap[this.type] = false;
+        }
+    }
+    onWindowScroll() {
+        if (this.type) {
+            this.isDropdownOpenMap[this.type] = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'basic'\">\n    <div\n      class=\"flex items-center justify-between gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between space-x-2 gap-3\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex gap-[1px] mx-0\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'outlined'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between flex-1 space-x-2\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n        </button>\n\n        <div class=\"flex gap-[1px] mx-3\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'text'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n            Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <div class=\"flex gap-3\">\n          <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n          </button>\n\n          <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'simple'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <button\n        (click)=\"prevPage()\"\n        [disabled]=\"pageIndex === 1\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n        </button>\n\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n          Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <button\n        (click)=\"nextPage()\"\n        [disabled]=\"pageIndex === pageTotal\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'full'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center w-full flex-1\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\"  class=\"flex items-center\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex\">\n          <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              [ngClass]=\"{\n                'border-y-1 border-s-1': !last,\n                'border-1': last\n              }\"\n              class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n                {{ page }}\n              </np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n                ...\n              </span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-container>\n", styles: [""], 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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'basic'\">\n    <div\n      class=\"flex items-center justify-between gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between space-x-2 gap-3\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex gap-[1px] mx-0\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'outlined'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center justify-between flex-1 space-x-2\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n        </button>\n\n        <div class=\"flex gap-[1px] mx-3\">\n          <ng-container *ngFor=\"let page of getDisplayedPages()\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n            >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-2\">...</span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          *ngIf=\"isDropdownOpenMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'text'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n            Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <div class=\"flex gap-3\">\n          <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n          </button>\n\n          <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n          >\n            <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n            <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n          </button>\n        </div>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'simple'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex justify-between items-center flex-1\">\n        <button\n        (click)=\"prevPage()\"\n        [disabled]=\"pageIndex === 1\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n        </button>\n\n        <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n          Page {{pageIndex}} of {{pageTotal}}\n        </np-typography>\n\n        <button\n        (click)=\"nextPage()\"\n        [disabled]=\"pageIndex === pageTotal\"\n        class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'full'\">\n    <div\n      class=\"flex items-center gap-3\"\n      [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n    >\n      <div class=\"flex items-center w-full flex-1\">\n        <button\n          (click)=\"prevPage()\"\n          [disabled]=\"pageIndex === 1\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\"  class=\"flex items-center\">\n            <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n          </np-typography> -->\n        </button>\n\n        <div class=\"flex\">\n          <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n            <button\n              *ngIf=\"page !== '...'; else dots\"\n              (click)=\"changePage(page)\"\n              [class.bg-gray-200]=\"page === pageIndex\"\n              [ngClass]=\"{\n                'border-y-1 border-s-1': !last,\n                'border-1': last\n              }\"\n              class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n            >\n              <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n                {{ page }}\n              </np-typography>\n            </button>\n\n            <ng-template #dots>\n              <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n                ...\n              </span>\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <button\n          (click)=\"nextPage()\"\n          [disabled]=\"pageIndex === pageTotal\"\n          class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n        >\n          <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n          <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n            Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n          </np-typography> -->\n        </button>\n      </div>\n\n      <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n        <div\n          #dropdownTrigger\n          class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n          (click)=\"toggleDropdownByType(type)\"\n        >\n          <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n            {{ pageSizeOptions }} / page\n          </np-typography>\n          <i class=\"fa-solid fa-chevron-down\"></i>\n        </div>\n\n        <div\n          *ngIf=\"isDropdownOpenMap[type]\"\n          [ngStyle]=\"dropdownStyleMap[type]\"\n          class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n        >\n          <div\n            *ngFor=\"let size of pageSize\"\n            (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n            class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n            [ngClass]=\"{\n              'cursor-not-allowed': size === pageSizeOptions,\n              'cursor-pointer': size !== pageSizeOptions\n            }\"\n          >\n            <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n              {{ size }} / page\n            </np-typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</ng-container>\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], isReverse: [{
+                type: Input
+            }], pageSizeChange: [{
+                type: Output
+            }], pageIndex: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageIndexChange: [{
+                type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['dropdownTrigger', { static: false }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+class NpScrollbarComponent {
+    renderer;
+    container;
+    // @Input() size: string  ='sm' ;
+    width;
+    height;
+    _ngContent = null;
+    set ngContent(value) {
+        this._ngContent = value;
+        this.updateContent();
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    updateContent() {
+        if (!this._ngContent) {
+            return;
+        }
+        if (this._ngContent instanceof Element) {
+            this.renderer.appendChild(this.container.nativeElement, this._ngContent);
+        }
+    }
+    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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], ngContent: [{
+                type: Input
+            }] } });
+
+class NpAlertComponent {
+    el;
+    renderer;
+    type = 'notification';
+    state = 'info';
+    description = '';
+    title;
+    message;
+    autoHide = true;
+    isMessageVisible = false;
+    opacity = 1;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        if (this.autoHide) {
+            setTimeout(() => {
+                this.startFadeOut();
+            }, 3000);
+        }
+    }
+    startFadeOut() {
+        let fadeDuration = 5000;
+        let fadeInterval = 50;
+        let step = fadeInterval / fadeDuration;
+        let fadeEffect = setInterval(() => {
+            if (this.opacity > 0) {
+                this.opacity -= step;
+            }
+            else {
+                clearInterval(fadeEffect);
+                this.removeSelf();
+            }
+        }, fadeInterval);
+    }
+    closeAlert() {
+        this.removeSelf();
+    }
+    removeSelf() {
+        this.renderer.removeChild(this.el.nativeElement.parentNode, this.el.nativeElement);
+    }
+    showMessege() {
+        this.isMessageVisible = !this.isMessageVisible;
+    }
+    getIcon() {
+        switch (this.state) {
+            case 'success':
+                return 'fa-duotone fa-solid fa-circle-check';
+            case 'info':
+                return 'fa-duotone fa-solid fa-circle-info';
+            case 'warning':
+                return 'fa-duotone fa-solid fa-triangle-exclamation';
+            case 'error':
+                return 'fa-duotone fa-solid fa-circle-exclamation';
+            default:
+                return '';
+        }
+    }
+    // getIconNotification(): string {
+    //   switch (this.state) {
+    //     case 'success':
+    //       return 'projects/neop-ui-lib/scss/images/success.png';
+    //     case 'warning':
+    //       return 'projects/neop-ui-lib/scss/images/warning.png';
+    //     case 'error':
+    //       return 'projects/neop-ui-lib/scss/images/error.png';
+    //     default:
+    //       return '';
+    //   }
+    // }
+    getIconNotification() {
+        switch (this.state) {
+            case 'success':
+                return { icon: 'fa-circle-check', color: '#12B76A' };
+            case 'warning':
+                return { icon: 'fa-circle-exclamation', color: '#F79009' };
+            case 'error':
+                return { icon: 'fa-circle-exclamation', color: '#F04438' };
+            default:
+                return { icon: '', color: '' };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], 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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], autoHide: [{
+                type: Input
+            }] } });
+
+var ETypeNpBreadcrumb;
+(function (ETypeNpBreadcrumb) {
+    ETypeNpBreadcrumb["BASIC"] = "basic";
+    ETypeNpBreadcrumb["SEPARATORS"] = "separators";
+    ETypeNpBreadcrumb["HIGHLIGHT"] = "highlighted";
+})(ETypeNpBreadcrumb || (ETypeNpBreadcrumb = {}));
+
+var E_NP_BREADCRUMB;
+(function (E_NP_BREADCRUMB) {
+    E_NP_BREADCRUMB["NAME"] = "name";
+    E_NP_BREADCRUMB["PARAM"] = "param";
+})(E_NP_BREADCRUMB || (E_NP_BREADCRUMB = {}));
+
+class NpBreadcrumbComponent {
+    _Router;
+    _ActivatedRoute;
+    npType = ETypeNpBreadcrumb.BASIC;
+    isBorder = true;
+    iconBreakDown = 'fa-slash-forward';
+    isBgLast = false;
+    isGetFromUrl = false;
+    breadcrumbs = [];
+    isExpanded = false;
+    ETypeNpBreadcrumb = ETypeNpBreadcrumb;
+    idBreadcrum = `${Math.floor(Math.random() * 100)}-${new Date()?.getTime()}`;
+    constructor(_Router, _ActivatedRoute) {
+        this._Router = _Router;
+        this._ActivatedRoute = _ActivatedRoute;
+    }
+    async ngOnInit() {
+        this.getBreadcrumbs();
+        this._Router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe(async () => {
+            this.getBreadcrumbs();
+        });
+    }
+    ngAfterViewInit() {
+        const dotBreadcrum = document.getElementById(this.idBreadcrum);
+        if (dotBreadcrum) {
+            dotBreadcrum.addEventListener('mouseover', () => {
+                this.isExpanded = true;
+            });
+            dotBreadcrum.addEventListener('mouseleave', () => {
+                this.isExpanded = false;
+            });
+        }
+    }
+    async getBreadcrumbs() {
+        if (this.isGetFromUrl) {
+            this.breadcrumbs = await this.createBreadcrumbs(this._ActivatedRoute.root);
+        }
+    }
+    async createBreadcrumbs(route, url = '', breadcrumbs = []) {
+        const children = route.children;
+        if (!!children && children.length > 0) {
+            for (const child of children) {
+                const routeURL = child.snapshot.url
+                    .map((segment) => segment.path)
+                    .join('/');
+                // .replace('#', '');
+                if (routeURL !== '') {
+                    url += `/${routeURL}`;
+                }
+                const data = child.snapshot.data;
+                if (data[E_NP_BREADCRUMB.NAME] &&
+                    !breadcrumbs?.some((x) => x?.url === url)) {
+                    breadcrumbs.push({
+                        label: data[E_NP_BREADCRUMB.NAME],
+                        url,
+                    });
+                }
+                return await this.createBreadcrumbs(child, url, breadcrumbs);
+            }
+        }
+        return breadcrumbs;
+    }
+    onRedirect(item) {
+        if (!item) {
+            this._Router.navigate(['/'], {
+                relativeTo: this._ActivatedRoute,
+            });
+            return;
+        }
+        if (!item?.url) {
+            return;
+        }
+        this._Router.navigate([item?.url], {
+            relativeTo: this._ActivatedRoute,
+        });
+    }
+    onExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpBreadcrumbComponent, 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: NpBreadcrumbComponent, isStandalone: true, selector: "np-breadcrumb", inputs: { npType: "npType", isBorder: "isBorder", iconBreakDown: "iconBreakDown", isBgLast: "isBgLast", isGetFromUrl: "isGetFromUrl", breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n  [id]=\"idBreadcrum\"\n>\n  <!-- [class.border-breadcrumb]=\"isBorder\" -->\n  <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n  @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n  let last = $last) {\n  <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n  @if (isExpanded) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      contentTemplate;\n      context: { item: item, last: last, isBgLast: isBgLast }\n    \"\n  ></ng-container>\n  } @else { @if (index === 1 && breadcrumbs.length > 2) {\n  <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n  } @if (first || last) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      contentTemplate;\n      context: { item: item, last: last, isBgLast: isBgLast }\n    \"\n  ></ng-container>\n  } } }\n</div>\n\n<ng-template\n  #contentTemplate\n  let-item=\"item\"\n  let-last=\"last\"\n  let-isBgLast=\"isBgLast\"\n>\n  <!-- [class.item-last]=\"last && isBgLast\" -->\n  <div\n    class=\"cursor-pointer text-[#475467]\"\n    [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n    (click)=\"onRedirect(item)\"\n  >\n    {{ item?.label }}\n  </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-breadcrumb', imports: [CommonModule], template: "<div\n  class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n  [id]=\"idBreadcrum\"\n>\n  <!-- [class.border-breadcrumb]=\"isBorder\" -->\n  <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n  @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n  let last = $last) {\n  <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n  @if (isExpanded) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      contentTemplate;\n      context: { item: item, last: last, isBgLast: isBgLast }\n    \"\n  ></ng-container>\n  } @else { @if (index === 1 && breadcrumbs.length > 2) {\n  <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n  } @if (first || last) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      contentTemplate;\n      context: { item: item, last: last, isBgLast: isBgLast }\n    \"\n  ></ng-container>\n  } } }\n</div>\n\n<ng-template\n  #contentTemplate\n  let-item=\"item\"\n  let-last=\"last\"\n  let-isBgLast=\"isBgLast\"\n>\n  <!-- [class.item-last]=\"last && isBgLast\" -->\n  <div\n    class=\"cursor-pointer text-[#475467]\"\n    [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n    (click)=\"onRedirect(item)\"\n  >\n    {{ item?.label }}\n  </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { npType: [{
+                type: Input
+            }], isBorder: [{
+                type: Input
+            }], iconBreakDown: [{
+                type: Input
+            }], isBgLast: [{
+                type: Input
+            }], isGetFromUrl: [{
+                type: Input
+            }], breadcrumbs: [{
+                type: Input
+            }] } });
+
+class NpProgressBarComponent {
+    type = 'style-1';
+    percent = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpProgressBarComponent, isStandalone: true, selector: "np-progress-bar", inputs: { type: "type", percent: "percent" }, ngImport: i0, template: "<nz-progress\n  [nzPercent]=\"percent\"\n  [nzShowInfo]=\"type == 'style-2'\"\n  [nzFormat]=\"customFormat\"\n  nzStrokeColor=\"rgba(71, 84, 103, 1)\"\n></nz-progress>\n<np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"type === 'style-3'\" class=\"flex justify-end\">\n  {{ percent }}%\n</np-typography>\n\n<ng-template #customFormat>\n  <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n    {{ percent }}%\n  </np-typography>\n</ng-template>\n", styles: ["::ng-deep .ant-progress-inner{background-color:#eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: NzProgressModule }, { kind: "component", type: i1$5.NzProgressComponent, selector: "nz-progress", inputs: ["nzShowInfo", "nzWidth", "nzStrokeColor", "nzSize", "nzFormat", "nzSuccessPercent", "nzPercent", "nzStrokeWidth", "nzGapDegree", "nzStatus", "nzType", "nzGapPosition", "nzStrokeLinecap", "nzSteps"], exportAs: ["nzProgress"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: NpProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-progress-bar', imports: [NzProgressModule, CommonModule, NpTypographyComponent], template: "<nz-progress\n  [nzPercent]=\"percent\"\n  [nzShowInfo]=\"type == 'style-2'\"\n  [nzFormat]=\"customFormat\"\n  nzStrokeColor=\"rgba(71, 84, 103, 1)\"\n></nz-progress>\n<np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"type === 'style-3'\" class=\"flex justify-end\">\n  {{ percent }}%\n</np-typography>\n\n<ng-template #customFormat>\n  <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n    {{ percent }}%\n  </np-typography>\n</ng-template>\n", styles: ["::ng-deep .ant-progress-inner{background-color:#eaecf0}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], percent: [{
+                type: Input
+            }] } });
+
+class NpSliderComponent {
+    _values = [0, 50];
+    get values() {
+        return this._values;
+    }
+    set values(val) {
+        this._values = val;
+        this.valuesChange.emit(this._values);
+    }
+    min = 0;
+    max = 100;
+    step = 1;
+    tooltipVisible = 'default';
+    isDisabled = false;
+    isFloating = false;
+    valuesChange = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpSliderComponent, isStandalone: true, selector: "np-slider", inputs: { values: "values", min: "min", max: "max", step: "step", tooltipVisible: "tooltipVisible", isDisabled: "isDisabled", isFloating: "isFloating" }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<nz-slider\n  nzRange\n  [(ngModel)]=\"values\"\n  [nzDisabled]=\"isDisabled\"\n  [nzMin]=\"min\"\n  [nzMax]=\"max\"\n  [nzStep]=\"step\"\n  [nzTipFormatter]=\"tooltipTemplate\"\n  [nzTooltipVisible]=\"tooltipVisible\"\n  >\n</nz-slider>\n\n<ng-template #tooltipTemplate let-value>\n  <div [ngClass]=\"isFloating ? 'tooltip-class-floating' : 'tooltip-class'\">\n    <np-typography npSize=\"sm\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(16, 24, 40, 1);\">\n      {{value}} %\n    </np-typography>\n  </div>\n</ng-template>\n\n\n", styles: ["::ng-deep .ant-tooltip:has(.tooltip-class){padding:0}::ng-deep .ant-slider-rail{background-color:#eaecf0;height:8px;border-radius:4px}::ng-deep .ant-slider-track{height:8px;background-color:#475467}::ng-deep .ant-slider-handle{width:24px;height:24px;margin-top:-8px;border:1.5px solid rgb(71,84,103);background-color:#fff}::ng-deep .ant-tooltip-placement-right,::ng-deep .ant-tooltip-placement-left{padding:0 10px}::ng-deep .ant-tooltip-arrow{display:none!important}::ng-deep .ant-tooltip-inner{background:none;box-shadow:none}::ng-deep .ant-slider:hover .ant-slider-track{background-color:#475467}::ng-deep .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){border-color:#475467}::ng-deep .ant-slider:hover .ant-slider-rail{background-color:#eaecf0}::ng-deep .ant-slider:focus .ant-slider-handle:not(.ant-tooltip-open){box-shadow:0 0 0 4px #d0d5dd}.tooltip-class-floating{background-color:#fff;padding:6px 8px;border-radius:8px;border:1px solid rgb(234,236,240)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzSliderModule }, { kind: "component", type: i2$3.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzDefaultValue", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-slider', standalone: true, imports: [FormsModule, NzSliderModule, NpTypographyComponent, CommonModule], template: "<nz-slider\n  nzRange\n  [(ngModel)]=\"values\"\n  [nzDisabled]=\"isDisabled\"\n  [nzMin]=\"min\"\n  [nzMax]=\"max\"\n  [nzStep]=\"step\"\n  [nzTipFormatter]=\"tooltipTemplate\"\n  [nzTooltipVisible]=\"tooltipVisible\"\n  >\n</nz-slider>\n\n<ng-template #tooltipTemplate let-value>\n  <div [ngClass]=\"isFloating ? 'tooltip-class-floating' : 'tooltip-class'\">\n    <np-typography npSize=\"sm\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(16, 24, 40, 1);\">\n      {{value}} %\n    </np-typography>\n  </div>\n</ng-template>\n\n\n", styles: ["::ng-deep .ant-tooltip:has(.tooltip-class){padding:0}::ng-deep .ant-slider-rail{background-color:#eaecf0;height:8px;border-radius:4px}::ng-deep .ant-slider-track{height:8px;background-color:#475467}::ng-deep .ant-slider-handle{width:24px;height:24px;margin-top:-8px;border:1.5px solid rgb(71,84,103);background-color:#fff}::ng-deep .ant-tooltip-placement-right,::ng-deep .ant-tooltip-placement-left{padding:0 10px}::ng-deep .ant-tooltip-arrow{display:none!important}::ng-deep .ant-tooltip-inner{background:none;box-shadow:none}::ng-deep .ant-slider:hover .ant-slider-track{background-color:#475467}::ng-deep .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){border-color:#475467}::ng-deep .ant-slider:hover .ant-slider-rail{background-color:#eaecf0}::ng-deep .ant-slider:focus .ant-slider-handle:not(.ant-tooltip-open){box-shadow:0 0 0 4px #d0d5dd}.tooltip-class-floating{background-color:#fff;padding:6px 8px;border-radius:8px;border:1px solid rgb(234,236,240)}\n"] }]
+        }], propDecorators: { values: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], tooltipVisible: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], isFloating: [{
+                type: Input
+            }], valuesChange: [{
+                type: Output
+            }] } });
+
+class NpLoadingIndicatorComponent {
+    npType = 'type-1';
+    npSize = 'sm';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpLoadingIndicatorComponent, isStandalone: true, selector: "np-loading-indicator", inputs: { npType: "npType", npSize: "npSize" }, ngImport: i0, template: "<div class=\"flex flex-col items-center gap-2\" [ngClass]=\"npSize\">\n   <i\n    *ngIf=\"npType === 'outlined'\"\n    class=\"fa-duotone fa-solid fa-spinner-third fa-spin\"\n    style=\"--fa-primary-color: #475467; --fa-secondary-color: #f2f4f7; --fa-secondary-opacity: 1;\">\n  </i>\n  <div *ngIf=\"npType === 'filled'\" class=\"solid-loader\"></div>\n\n  <np-typography [npSize]=\"npSize\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n    Loading...\n  </np-typography>\n</div>\n\n\n", styles: [".sm .fa-spin{font-size:28px;-webkit-text-stroke:1px currentColor}.sm .solid-loader{width:28px;height:28px;border:4px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.sm .solid-loader:before,.sm .solid-loader:after{width:4px;height:4px}.sm .solid-loader:before{top:0;left:-1px}.sm .solid-loader:after{top:0;right:-1px}.md .fa-spin{font-size:48px;-webkit-text-stroke:1px currentColor}.md .solid-loader{width:48px;height:48px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.md .solid-loader:before,.md .solid-loader:after{width:6px;height:6px}.md .solid-loader:before{top:0;left:0}.md .solid-loader:after{top:0;right:0}.lg .fa-spin{font-size:56px;-webkit-text-stroke:0px currentColor}.lg .solid-loader{width:56px;height:56px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.lg .solid-loader:before,.lg .solid-loader:after{width:6px;height:6px}.lg .solid-loader:before{top:2px;left:1px}.lg .solid-loader:after{top:2px;right:1px}.xl .fa-spin{font-size:58px;-webkit-text-stroke:1px currentColor}.xl .solid-loader{width:58px;height:58px;border:8px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.xl .solid-loader:before,.xl .solid-loader:after{width:8px;height:8px}.xl .solid-loader:before{top:0;left:-1px}.xl .solid-loader:after{top:0;right:-1px}.solid-loader{position:relative;animation:spin 2s linear infinite}.solid-loader:before,.solid-loader:after{content:\"\";position:absolute;background-color:#475467;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzIconModule }, { 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: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpLoadingIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-loading-indicator', imports: [NzSpinModule, NzIconModule, CommonModule, NpTypographyComponent], template: "<div class=\"flex flex-col items-center gap-2\" [ngClass]=\"npSize\">\n   <i\n    *ngIf=\"npType === 'outlined'\"\n    class=\"fa-duotone fa-solid fa-spinner-third fa-spin\"\n    style=\"--fa-primary-color: #475467; --fa-secondary-color: #f2f4f7; --fa-secondary-opacity: 1;\">\n  </i>\n  <div *ngIf=\"npType === 'filled'\" class=\"solid-loader\"></div>\n\n  <np-typography [npSize]=\"npSize\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n    Loading...\n  </np-typography>\n</div>\n\n\n", styles: [".sm .fa-spin{font-size:28px;-webkit-text-stroke:1px currentColor}.sm .solid-loader{width:28px;height:28px;border:4px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.sm .solid-loader:before,.sm .solid-loader:after{width:4px;height:4px}.sm .solid-loader:before{top:0;left:-1px}.sm .solid-loader:after{top:0;right:-1px}.md .fa-spin{font-size:48px;-webkit-text-stroke:1px currentColor}.md .solid-loader{width:48px;height:48px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.md .solid-loader:before,.md .solid-loader:after{width:6px;height:6px}.md .solid-loader:before{top:0;left:0}.md .solid-loader:after{top:0;right:0}.lg .fa-spin{font-size:56px;-webkit-text-stroke:0px currentColor}.lg .solid-loader{width:56px;height:56px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.lg .solid-loader:before,.lg .solid-loader:after{width:6px;height:6px}.lg .solid-loader:before{top:2px;left:1px}.lg .solid-loader:after{top:2px;right:1px}.xl .fa-spin{font-size:58px;-webkit-text-stroke:1px currentColor}.xl .solid-loader{width:58px;height:58px;border:8px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.xl .solid-loader:before,.xl .solid-loader:after{width:8px;height:8px}.xl .solid-loader:before{top:0;left:-1px}.xl .solid-loader:after{top:0;right:-1px}.solid-loader{position:relative;animation:spin 2s linear infinite}.solid-loader:before,.solid-loader:after{content:\"\";position:absolute;background-color:#475467;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { npType: [{
+                type: Input
+            }], npSize: [{
+                type: Input
+            }] } });
+
+class NpTableComponent {
+    cdr;
+    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;
+    }
+    leftRows;
+    middleRows;
+    rightRows;
+    leftHead;
+    middleHead;
+    rightHead;
+    tableLeft;
+    tableMiddle;
+    tableRight;
+    columns = [];
+    selectableType = null;
+    isSortable = false;
+    isFilterable = false;
+    isDeleteable = false;
+    pageSize = [];
+    isUsePagination = true;
+    panigationType = 'basic';
+    state = 'normal';
+    className = '';
+    classNameLeft = ''; // className for left fixed table
+    classNameRight = ''; // className for right fixed table
+    scrollColumnsRange = null;
+    scrollWidth = '';
+    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();
+    set dataSource(value) {
+        this._dataSource =
+            value?.map((row) => ({
+                ...row,
+                selectFc: new FormControl(false),
+            })) || [];
+        this.currentPage = 1;
+        this.selectAllFc.setValue(false, { emitEvent: false });
+        this.isIndeterminateAll = false;
+        if (this.selectableType === 'checkbox') {
+            this.bindSelectAllListener();
+        }
+        if (this.selectableType === 'radio') {
+            this._dataSource.forEach((row) => {
+                row.selectFc.valueChanges.subscribe((val) => {
+                    if (val) {
+                        this._dataSource.forEach((r) => {
+                            if (r !== row) {
+                                r.selectFc.setValue(false, { emitEvent: false });
+                            }
+                        });
+                    }
+                });
+            });
+        }
+    }
+    get fixedLeftColumns() {
+        if (!this.scrollColumnsRange)
+            return [];
+        return this.columns.slice(0, this.scrollColumnsRange[0]);
+    }
+    get scrollableColumns() {
+        if (!this.scrollColumnsRange)
+            return this.columns;
+        return this.columns.slice(this.scrollColumnsRange[0], this.scrollColumnsRange[1] + 1);
+    }
+    get fixedRightColumns() {
+        if (!this.scrollColumnsRange)
+            return [];
+        return this.columns.slice(this.scrollColumnsRange[1] + 1);
+    }
+    syncRowHeights() {
+        const left = this.leftRows.toArray();
+        const middle = this.middleRows.toArray();
+        const right = this.rightRows.toArray();
+        for (let i = 0; i < middle.length; i++) {
+            left[i]?.nativeElement.style.removeProperty('height');
+            middle[i]?.nativeElement.style.removeProperty('height');
+            right[i]?.nativeElement.style.removeProperty('height');
+        }
+        for (let i = 0; i < middle.length; i++) {
+            const hLeft = left[i]?.nativeElement.offsetHeight || 0;
+            const hMid = middle[i]?.nativeElement.offsetHeight || 0;
+            const hRight = right[i]?.nativeElement.offsetHeight || 0;
+            const max = Math.max(hLeft, hMid, hRight);
+            if (left[i])
+                left[i].nativeElement.style.height = `${max}px`;
+            if (middle[i])
+                middle[i].nativeElement.style.height = `${max}px`;
+            if (right[i])
+                right[i].nativeElement.style.height = `${max}px`;
+        }
+        this.leftHead?.nativeElement.style.removeProperty('height');
+        this.middleHead?.nativeElement.style.removeProperty('height');
+        this.rightHead?.nativeElement.style.removeProperty('height');
+        const hHeadLeft = this.leftHead?.nativeElement.offsetHeight || 0;
+        const hHeadMid = this.middleHead?.nativeElement.offsetHeight || 0;
+        const hHeadRight = this.rightHead?.nativeElement.offsetHeight || 0;
+        const maxHead = Math.max(hHeadLeft, hHeadMid, hHeadRight);
+        if (this.leftHead)
+            this.leftHead.nativeElement.style.height = `${maxHead}px`;
+        if (this.middleHead)
+            this.middleHead.nativeElement.style.height = `${maxHead}px`;
+        if (this.rightHead)
+            this.rightHead.nativeElement.style.height = `${maxHead}px`;
+    }
+    updatePaginationWidth() {
+        const wLeft = this.tableLeft?.nativeElement.offsetWidth || 0;
+        const wMid = this.tableMiddle?.nativeElement.offsetWidth || 0;
+        const wRight = this.tableRight?.nativeElement.offsetWidth || 0;
+        const total = wLeft + wMid + wRight;
+        this.paginationWidth = `${total}px`;
+    }
+    bindSelectAllListener() {
+        this.selectAllSub?.unsubscribe();
+        this.selectAllSub = this.selectAllFc.valueChanges.subscribe((checked) => {
+            this._dataSource?.forEach((row) => {
+                row.selectFc.patchValue(checked, { emitEvent: false });
+            });
+            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])) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }
+    get pagedData() {
+        const filtered = this.filteredData;
+        if (this.isUsePagination) {
+            const start = (this.currentPage - 1) * this.currentPageSize;
+            const end = start + this.currentPageSize;
+            return filtered.slice(start, end);
+        }
+        else {
+            return filtered;
+        }
+    }
+    onPageChange(newPage) {
+        this.currentPage = newPage;
+    }
+    onPageSizeChange(newSize) {
+        this.currentPageSize = newSize;
+        this.currentPage = 1;
+    }
+    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';
+        }
+        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.currentPage = 1;
+    }
+    onChangeSelectColumn($event) {
+        if (this.selectableType !== 'checkbox')
+            return;
+        const allSelected = this._dataSource?.every((child) => child.selectFc?.value);
+        const someSelected = this._dataSource?.some((child) => child.selectFc?.value);
+        this.isIndeterminateAll = someSelected && !allSelected;
+        this.selectAllFc?.patchValue(someSelected, { emitEvent: false });
+    }
+    ngOnDestroy() {
+        this.selectAllSub?.unsubscribe();
+    }
+    get selectedCount() {
+        return this._dataSource.filter((row) => row.selectFc?.value).length;
+    }
+    onDeleteSelected() {
+        const selectedRows = this._dataSource.filter((row) => row.selectFc?.value);
+        this.deleteSelectedRows.emit(selectedRows);
+        this._dataSource = this._dataSource.filter((row) => !row.selectFc?.value);
+        this.currentPage = 1;
+        this.selectAllFc.setValue(false, { emitEvent: false });
+        this.isIndeterminateAll = false;
+    }
+    onRefresh() { }
+    onContactSupport() { }
+    activeFilterKey = null;
+    searchKeyword = {};
+    searchControls = {};
+    selectedFilters = {};
+    toggleFilter(key) {
+        this.activeFilterKey = this.activeFilterKey === key ? null : key;
+        if (!this.searchControls[key]) {
+            this.searchControls[key] = new FormControl('');
+            this.searchControls[key].valueChanges.subscribe((val) => {
+                this.searchKeyword[key] = val?.toLowerCase() || '';
+            });
+        }
+        setTimeout(() => {
+            const icon = this.filterIcons?.find((_, idx) => this.columns[idx]?.key === key);
+            if (icon) {
+                const rect = icon.nativeElement.getBoundingClientRect();
+                const dropdownWidth = 250;
+                const left = rect.left + rect.width / 2 - dropdownWidth / 2;
+                this.dropdownPositionMap[key] = {
+                    top: `${rect.bottom + 4}px`,
+                    left: `${left}px`,
+                };
+            }
+        }, 0);
+    }
+    shouldShowFilterCheck(colKey) {
+        return (this.selectedFilters[colKey]?.size > 0 && this.activeFilterKey !== colKey);
+    }
+    getDistinctFilteredValues(colKey) {
+        const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
+        const uniqueSet = new Set();
+        const filteredExcludingCurrent = this._dataSource.filter((row) => {
+            for (const key in this.selectedFilters) {
+                if (key === colKey)
+                    continue;
+                const selectedSet = this.selectedFilters[key];
+                if (selectedSet && selectedSet.size > 0 && !selectedSet.has(row[key])) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        filteredExcludingCurrent.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);
+            }
+            else {
+                return String(a).localeCompare(String(b));
+            }
+        });
+    }
+    getFilteredColumnValues(colKey) {
+        const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
+        return this._dataSource.filter((row) => String(row[colKey]).toLowerCase().includes(keyword));
+    }
+    isChecked(colKey, value) {
+        const isSelected = this.selectedFilters[colKey]?.has(value) ?? false;
+        return new FormControl(isSelected);
+    }
+    onToggleFilter(colKey, value, checked) {
+        if (!this.selectedFilters[colKey]) {
+            this.selectedFilters[colKey] = new Set();
+        }
+        if (checked) {
+            this.selectedFilters[colKey].add(value);
+        }
+        else {
+            this.selectedFilters[colKey].delete(value);
+        }
+        this.currentPage = 1;
+        if (this.activeFilterKey && this.activeFilterKey !== colKey) {
+            const currentControl = this.searchControls[this.activeFilterKey];
+            const value = currentControl?.value || '';
+            currentControl?.setValue(value);
+        }
+    }
+    onClickOutside(event) {
+        const clickedInside = this.filterIcons?.some((el) => el.nativeElement.contains(event.target));
+        const dropdownClicked = Object.keys(this.dropdownPositionMap).some((key) => {
+            const el = document.querySelector(`.filter-dropdown`);
+            return el?.contains(event.target);
+        });
+        if (!clickedInside && !dropdownClicked) {
+            this.activeFilterKey = null;
+        }
+    }
+    onScrollCloseFilter() {
+        this.activeFilterKey = null;
+    }
+    onResizeWindow() {
+        setTimeout(() => this.syncRowHeights(), 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' && _dataSource.length > 0\"\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' && _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\">\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 *ngIf=\"!col.headerTemplate\">\n      <div class=\"flex gap-2 ms-2\">\n        <div *ngIf=\"isSortable && !col.template\" (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            <np-scrollbar height=\"200px\">\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n                <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"py-2 flex items-center\">\n                  <np-checkbox\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"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-table', imports: [
+                        CommonModule,
+                        NpCheckboxComponent,
+                        NpPaginationComponent,
+                        NpTypographyComponent,
+                        NpLoadingIndicatorComponent,
+                        NpButtonComponent,
+                        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' && _dataSource.length > 0\"\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' && _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\">\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 *ngIf=\"!col.headerTemplate\">\n      <div class=\"flex gap-2 ms-2\">\n        <div *ngIf=\"isSortable && !col.template\" (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            <np-scrollbar height=\"200px\">\n              <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n                <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"py-2 flex items-center\">\n                  <np-checkbox\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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leftRows: [{
+                type: ViewChildren,
+                args: ['leftRow', { read: ElementRef }]
+            }], middleRows: [{
+                type: ViewChildren,
+                args: ['middleRow', { read: ElementRef }]
+            }], rightRows: [{
+                type: ViewChildren,
+                args: ['rightRow', { read: ElementRef }]
+            }], leftHead: [{
+                type: ViewChild,
+                args: ['leftHead', { read: ElementRef }]
+            }], middleHead: [{
+                type: ViewChild,
+                args: ['middleHead', { read: ElementRef }]
+            }], rightHead: [{
+                type: ViewChild,
+                args: ['rightHead', { read: ElementRef }]
+            }], tableLeft: [{
+                type: ViewChild,
+                args: ['tableLeft', { static: false }]
+            }], tableMiddle: [{
+                type: ViewChild,
+                args: ['tableMiddle', { static: false }]
+            }], tableRight: [{
+                type: ViewChild,
+                args: ['tableRight', { static: false }]
+            }], columns: [{
+                type: Input
+            }], selectableType: [{
+                type: Input
+            }], isSortable: [{
+                type: Input
+            }], isFilterable: [{
+                type: Input
+            }], isDeleteable: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], isUsePagination: [{
+                type: Input
+            }], panigationType: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], classNameLeft: [{
+                type: Input
+            }], classNameRight: [{
+                type: Input
+            }], scrollColumnsRange: [{
+                type: Input
+            }], scrollWidth: [{
+                type: Input
+            }], isReverse: [{
+                type: Input
+            }], showVerticalDivider: [{
+                type: Input
+            }], deleteSelectedRows: [{
+                type: Output
+            }], dataSource: [{
+                type: Input
+            }], filterIcons: [{
+                type: ViewChildren,
+                args: ['filterIcon']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onScrollCloseFilter: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }], onResizeWindow: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class NpTabComponent {
+    _Router;
+    _ActivatedRoute;
+    tabs = [];
+    tabActive = '';
+    isLink = false;
+    onChange = new EventEmitter();
+    indexActive = 0;
+    constructor(_Router, _ActivatedRoute) {
+        this._Router = _Router;
+        this._ActivatedRoute = _ActivatedRoute;
+    }
+    ngOnInit() {
+        this.setTabActiveDefault();
+    }
+    setTabActiveDefault() {
+        if (this.tabActive) {
+            this.indexActive = this.tabs?.findIndex((x) => x.key === this.tabActive);
+            return;
+        }
+        if (!this.isLink) {
+            this.tabActive = this.tabs[0]?.key;
+            this.indexActive = 0;
+            return;
+        }
+        const queryParmTabIndex = this._ActivatedRoute.snapshot.queryParamMap.get('tab');
+        if (queryParmTabIndex === undefined || queryParmTabIndex === null) {
+            this.tabActive = this.tabs[0]?.key;
+            this.indexActive = 0;
+            return;
+        }
+        const tabActive = this.tabs?.[+queryParmTabIndex];
+        this.tabActive = tabActive?.key;
+        this.indexActive = +queryParmTabIndex;
+    }
+    onChangeTab(tab, index) {
+        this.tabActive = tab.key;
+        this.indexActive = index;
+        this.onChange.emit(tab);
+        if (tab?.path && this.isLink) {
+            this._Router.navigate([], {
+                relativeTo: this._ActivatedRoute,
+                queryParams: { tab: index },
+                queryParamsHandling: 'merge',
+            });
+        }
+    }
+    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" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<!-- <div class=\"tab-container\">\n  <div class=\"tab-list\">\n    <a *ngFor=\"let tab of tabs\" class=\"tab\" [routerLink]=\"tab.path\" [class.active]=\"isActive(tab.path)\">\n      {{ tab.label }}\n    </a>\n    <div class=\"indicator\" [ngStyle]=\"indicatorStyle()\"></div>\n  </div>\n</div> -->\n<div class=\"np-tab flex flex-col h-full\">\n  <div class=\"flex justify-between w-full p-2 np-tab-header\">\n    @for (tab of tabs; track tab; let index = $index; let first = $first) {\n    <div class=\"flex-1\">\n      <div\n        class=\"text-[16px] font-[600] flex justify-center p-2 tab-item\"\n        (click)=\"onChangeTab(tab, $index)\"\n      >\n        <!-- [class.active]=\"tabActive === tab.key\" -->\n        <span class=\"tab-label\">{{ tab?.label }}</span>\n\n        @if($first) {\n        <div\n          class=\"tab-active\"\n          [ngStyle]=\"{\n            left: indexActive * 100 + '%'\n          }\"\n        ></div>\n        }\n      </div>\n    </div>\n    }\n    <!-- <div class=\"box\" [class.test]=\"tabActive === 'Tab 3'\"></div> -->\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".np-tab .np-tab-header{background-color:#f2f4f7}.np-tab .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;position:relative}.np-tab .np-tab-header .tab-item .tab-active{position:absolute;width:100%;bottom:0;left:0%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:6px;transition:left .3s ease-in-out}.np-tab .np-tab-header .tab-item .tab-label{z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 class=\"tab-container\">\n  <div class=\"tab-list\">\n    <a *ngFor=\"let tab of tabs\" class=\"tab\" [routerLink]=\"tab.path\" [class.active]=\"isActive(tab.path)\">\n      {{ tab.label }}\n    </a>\n    <div class=\"indicator\" [ngStyle]=\"indicatorStyle()\"></div>\n  </div>\n</div> -->\n<div class=\"np-tab flex flex-col h-full\">\n  <div class=\"flex justify-between w-full p-2 np-tab-header\">\n    @for (tab of tabs; track tab; let index = $index; let first = $first) {\n    <div class=\"flex-1\">\n      <div\n        class=\"text-[16px] font-[600] flex justify-center p-2 tab-item\"\n        (click)=\"onChangeTab(tab, $index)\"\n      >\n        <!-- [class.active]=\"tabActive === tab.key\" -->\n        <span class=\"tab-label\">{{ tab?.label }}</span>\n\n        @if($first) {\n        <div\n          class=\"tab-active\"\n          [ngStyle]=\"{\n            left: indexActive * 100 + '%'\n          }\"\n        ></div>\n        }\n      </div>\n    </div>\n    }\n    <!-- <div class=\"box\" [class.test]=\"tabActive === 'Tab 3'\"></div> -->\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".np-tab .np-tab-header{background-color:#f2f4f7}.np-tab .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;position:relative}.np-tab .np-tab-header .tab-item .tab-active{position:absolute;width:100%;bottom:0;left:0%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:6px;transition:left .3s ease-in-out}.np-tab .np-tab-header .tab-item .tab-label{z-index:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{
+                type: Input
+            }], tabActive: [{
+                type: Input
+            }], isLink: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class NpResizeComponent {
+    renderer;
+    iconService;
+    container;
+    constructor(renderer, iconService) {
+        this.renderer = renderer;
+        this.iconService = iconService;
+        this.iconService.addIconLiteral('ng-zorro:antd', this.ngZorroIconLiteral);
+    }
+    width;
+    height;
+    maxWidth;
+    maxHeight;
+    minWidth;
+    minHeight;
+    directions = [];
+    isDisable = false;
+    id = -1;
+    resizeDirection = null;
+    _ngContent = null;
+    ngZorroIconLiteral = '<svg width="8" height="18" viewBox="0 0 8 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4739_7041)"><path d="M0.535156 3.99987L0.535156 13.0665C0.535156 14.9811 2.08724 16.5332 4.00182 16.5332C5.91641 16.5332 7.46849 14.9811 7.46849 13.0665L7.46849 3.99987C7.46849 2.08528 5.91641 0.533203 4.00182 0.533203C2.08724 0.533203 0.535156 2.08528 0.535156 3.99987Z" fill="white"/><path d="M0.535156 3.99987L0.535156 13.0665C0.535156 14.9811 2.08724 16.5332 4.00182 16.5332C5.91641 16.5332 7.46849 14.9811 7.46849 13.0665L7.46849 3.99987C7.46849 2.08528 5.91641 0.533203 4.00182 0.533203C2.08724 0.533203 0.535156 2.08528 0.535156 3.99987Z" stroke="#D0D5DD"/><path d="M3.99225 4C4.36434 4 4.67442 4.21593 4.86047 4.51826C5.04651 4.84223 5.04651 5.25252 4.86047 5.55485C4.67442 5.87883 4.36434 6.07319 3.99225 6.07319C3.64083 6.07319 3.33075 5.87883 3.14471 5.55485C2.95865 5.25252 2.95865 4.84223 3.14471 4.51826C3.33075 4.21593 3.64083 4 3.99225 4ZM3.99225 7.45532C4.36434 7.45532 4.67442 7.67125 4.86047 7.97358C5.04651 8.29755 5.04651 8.70784 4.86047 9.01017C4.67442 9.33414 4.36434 9.52851 3.99225 9.52851C3.64083 9.52851 3.33075 9.33414 3.14471 9.01017C2.95865 8.70784 2.95865 8.29755 3.14471 7.97358C3.33075 7.67125 3.64083 7.45532 3.99225 7.45532ZM4.9845 11.9472C4.9845 12.336 4.79845 12.6599 4.48837 12.8542C4.19897 13.0486 3.8062 13.0486 3.49612 12.8542C3.20672 12.6599 3 12.336 3 11.9472C3 11.5801 3.20672 11.2562 3.49612 11.0618C3.8062 10.8674 4.19897 10.8674 4.48837 11.0618C4.79845 11.2562 4.9845 11.5801 4.9845 11.9472Z" fill="#D0D5DD"/></g><defs><clipPath id="clip0_4739_7041"><rect width="8" height="17.0667" fill="white"/></clipPath></defs></svg>';
+    set ngContent(value) {
+        this._ngContent = value;
+        this.updateContent();
+    }
+    onResize({ width, height, direction }) {
+        cancelAnimationFrame(this.id);
+        this.id = requestAnimationFrame(() => {
+            this.width = width;
+            this.height = height;
+            this.resizeDirection = direction;
+        });
+    }
+    updateContent() {
+        if (!this._ngContent) {
+            return;
+        }
+        if (this._ngContent instanceof Element) {
+            this.renderer.appendChild(this.container.nativeElement, this._ngContent);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpResizeComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.NzIconService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpResizeComponent, isStandalone: true, selector: "np-resize", inputs: { width: "width", height: "height", maxWidth: "maxWidth", maxHeight: "maxHeight", minWidth: "minWidth", minHeight: "minHeight", directions: "directions", isDisable: "isDisable", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"box\"\n  nz-resizable\n  (nzResize)=\"onResize($event)\"\n  [style.height.px]=\"height\"\n  [style.width.px]=\"width\"\n  [nzMaxWidth]=\"maxWidth\"\n  [nzMinWidth]=\"minWidth\"\n  [nzMaxHeight]=\"maxHeight\"\n  [nzMinHeight]=\"minHeight\"\n  [nzDisabled]=\"isDisable\"\n  >\n  <nz-resize-handle\n    *ngIf=\"directions.includes('topLeft') || (directions.includes('top') && directions.includes('left'))\"\n    nzDirection=\"topLeft\"\n  >\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"225\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle\n    *ngIf=\"directions.includes('topRight') || (directions.includes('top') && directions.includes('right'))\"\n    nzDirection=\"topRight\"\n  >\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"135\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle\n    *ngIf=\"directions.includes('bottomLeft') || (directions.includes('bottom') && directions.includes('left'))\"\n    nzDirection=\"bottomLeft\"\n  >\n   <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"315\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle\n    *ngIf=\"directions.includes('bottomRight') || (directions.includes('bottom') && directions.includes('right'))\"\n    nzDirection=\"bottomRight\"\n  >\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"45\" />\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('top')\" nzDirection=\"top\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('right')\" nzDirection=\"right\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('bottom')\" nzDirection=\"bottom\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('left')\" nzDirection=\"left\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n  </nz-resize-handle>\n\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{height:100%;width:100%}.box{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ddd;border-radius:10px}.anticon{color:#fff!important}::ng-deep .anticon svg{height:24px!important}::ng-deep .nz-resizable-handle{position:absolute;width:2px;height:2px;background:transparent;z-index:100}::ng-deep .nz-resizable-handle-left,::ng-deep .nz-resizable-handle-right{width:24px;height:24px;top:50%;transform:translateY(-50%);cursor:ew-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-bottom{width:24px;height:24px;left:50%;transform:translate(-50%);cursor:ns-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-left{left:-12px}::ng-deep .nz-resizable-handle-right{right:-12px}::ng-deep .nz-resizable-handle-top{top:-12px}::ng-deep .nz-resizable-handle-bottom{bottom:-12px}::ng-deep .nz-resizable-handle-topLeft,::ng-deep .nz-resizable-handle-topRight{width:24px;height:24px;position:absolute;top:-11px;display:flex;justify-content:center;align-items:center;rotate:180deg}::ng-deep .nz-resizable-handle-bottomLeft,::ng-deep .nz-resizable-handle-bottomRight{width:24px;height:24px;position:absolute;bottom:-11px;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-topLeft{left:-11px;cursor:nwse-resize}::ng-deep .nz-resizable-handle-topRight{right:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomLeft{left:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomRight{right:-11px;cursor:nwse-resize}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzResizableModule }, { kind: "directive", type: i3$4.NzResizableDirective, selector: "[nz-resizable]", inputs: ["nzBounds", "nzMaxHeight", "nzMaxWidth", "nzMinHeight", "nzMinWidth", "nzGridColumnCount", "nzMaxColumn", "nzMinColumn", "nzLockAspectRatio", "nzPreview", "nzDisabled"], outputs: ["nzResize", "nzResizeEnd", "nzResizeStart"], exportAs: ["nzResizable"] }, { kind: "component", type: i3$4.NzResizeHandleComponent, selector: "nz-resize-handle, [nz-resize-handle]", inputs: ["nzDirection", "nzCursorType"], outputs: ["nzMouseDown"], exportAs: ["nzResizeHandle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpResizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-resize', imports: [CommonModule, NzResizableModule, NzIconModule], template: "<div\n  #container\n  class=\"box\"\n  nz-resizable\n  (nzResize)=\"onResize($event)\"\n  [style.height.px]=\"height\"\n  [style.width.px]=\"width\"\n  [nzMaxWidth]=\"maxWidth\"\n  [nzMinWidth]=\"minWidth\"\n  [nzMaxHeight]=\"maxHeight\"\n  [nzMinHeight]=\"minHeight\"\n  [nzDisabled]=\"isDisable\"\n  >\n  <nz-resize-handle\n    *ngIf=\"directions.includes('topLeft') || (directions.includes('top') && directions.includes('left'))\"\n    nzDirection=\"topLeft\"\n  >\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"225\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle\n    *ngIf=\"directions.includes('topRight') || (directions.includes('top') && directions.includes('right'))\"\n    nzDirection=\"topRight\"\n  >\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"135\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle\n    *ngIf=\"directions.includes('bottomLeft') || (directions.includes('bottom') && directions.includes('left'))\"\n    nzDirection=\"bottomLeft\"\n  >\n   <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"315\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle\n    *ngIf=\"directions.includes('bottomRight') || (directions.includes('bottom') && directions.includes('right'))\"\n    nzDirection=\"bottomRight\"\n  >\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"45\" />\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('top')\" nzDirection=\"top\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('right')\" nzDirection=\"right\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('bottom')\" nzDirection=\"bottom\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n  </nz-resize-handle>\n\n  <nz-resize-handle *ngIf=\"directions.includes('left')\" nzDirection=\"left\">\n    <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n  </nz-resize-handle>\n\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{height:100%;width:100%}.box{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ddd;border-radius:10px}.anticon{color:#fff!important}::ng-deep .anticon svg{height:24px!important}::ng-deep .nz-resizable-handle{position:absolute;width:2px;height:2px;background:transparent;z-index:100}::ng-deep .nz-resizable-handle-left,::ng-deep .nz-resizable-handle-right{width:24px;height:24px;top:50%;transform:translateY(-50%);cursor:ew-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-bottom{width:24px;height:24px;left:50%;transform:translate(-50%);cursor:ns-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-left{left:-12px}::ng-deep .nz-resizable-handle-right{right:-12px}::ng-deep .nz-resizable-handle-top{top:-12px}::ng-deep .nz-resizable-handle-bottom{bottom:-12px}::ng-deep .nz-resizable-handle-topLeft,::ng-deep .nz-resizable-handle-topRight{width:24px;height:24px;position:absolute;top:-11px;display:flex;justify-content:center;align-items:center;rotate:180deg}::ng-deep .nz-resizable-handle-bottomLeft,::ng-deep .nz-resizable-handle-bottomRight{width:24px;height:24px;position:absolute;bottom:-11px;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-topLeft{left:-11px;cursor:nwse-resize}::ng-deep .nz-resizable-handle-topRight{right:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomLeft{left:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomRight{right:-11px;cursor:nwse-resize}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.NzIconService }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], width: [{
+                type: Input,
+                args: [{ required: true }]
+            }], height: [{
+                type: Input,
+                args: [{ required: true }]
+            }], maxWidth: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], directions: [{
+                type: Input
+            }], isDisable: [{
+                type: Input
+            }], ngContent: [{
+                type: Input
+            }] } });
+
+class BasicModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: BasicModule, imports: [CommonModule,
+            NpCheckboxComponent,
+            NpInputFieldComponent,
+            NpButtonComponent,
+            NpTypographyComponent,
+            NpInputTexteraComponent], exports: [NpCheckboxComponent,
+            NpInputFieldComponent,
+            NpButtonComponent,
+            NpTypographyComponent,
+            NpInputTexteraComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicModule, imports: [CommonModule,
+            NpCheckboxComponent,
+            NpInputFieldComponent,
+            NpButtonComponent,
+            NpTypographyComponent,
+            NpInputTexteraComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        NpCheckboxComponent,
+                        NpInputFieldComponent,
+                        NpButtonComponent,
+                        NpTypographyComponent,
+                        NpInputTexteraComponent,
+                    ],
+                    exports: [
+                        NpCheckboxComponent,
+                        NpInputFieldComponent,
+                        NpButtonComponent,
+                        NpTypographyComponent,
+                        NpInputTexteraComponent,
+                    ],
+                }]
+        }] });
+
+class NpModalComponent {
+    modalButton = '';
+    modalTitle = '';
+    modalDescriptions = '';
+    modalType = 'notification';
+    modalState = 'default';
+    useIcon = true;
+    useCheckBox = true;
+    cancelText = 'Cancel';
+    okText = 'OK';
+    modalContent;
+    modalFooter;
+    loadingOK = false;
+    ok = new EventEmitter();
+    cancel = new EventEmitter();
+    checkbox = new EventEmitter();
+    isVisible = false;
+    isOkLoading = false;
+    modalWidth = 544;
+    checkboxControl = new FormControl(false);
+    ngOnInit() {
+        if (this.modalType === 'confirmation') {
+            this.modalWidth = 400;
+        }
+        else if (this.modalType === 'notification') {
+            this.modalWidth = 544;
+        }
+    }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+    get iconPath() {
+        switch (this.modalState) {
+            case 'error':
+                return 'assets/images/error.png';
+            case 'success':
+                return 'assets/images/success.png';
+            case 'warning':
+                return 'assets/images/warning.png';
+            case 'default':
+            default:
+                return 'assets/images/default.png';
+        }
+    }
+    showModal() {
+        this.isVisible = true;
+    }
+    handleOk() {
+        this.ok.emit();
+        this.isVisible = false;
+    }
+    handleCancel() {
+        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: "<np-button (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>{{ modalButton }}</ng-template>\n</np-button>\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: NpModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'np-modal', imports: [
+                        NzModalModule,
+                        NpButtonComponent,
+                        CommonModule,
+                        NpTypographyComponent,
+                        BasicModule,
+                        NpCheckboxComponent,
+                    ], template: "<np-button (click)=\"showModal()\">\n  <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n    <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n  </ng-container>\n  <ng-template #textTitle>{{ modalButton }}</ng-template>\n</np-button>\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
+            }], modalType: [{
+                type: Input
+            }], modalState: [{
+                type: Input
+            }], useIcon: [{
+                type: Input
+            }], useCheckBox: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], okText: [{
+                type: Input
+            }], modalContent: [{
+                type: Input
+            }], modalFooter: [{
+                type: Input
+            }], loadingOK: [{
+                type: Input
+            }], ok: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], checkbox: [{
+                type: Output
+            }] } });
+
+class DefaultModel {
+    /**
+     * all keys are in lowercase
+     * @type {{}}
+     * @private
+     */
+    _data = {};
+    /**
+     * all keys are raw
+     * @type {{}}
+     * @private
+     */
+    _raw = {};
+    _idKey = '';
+    _id;
+    /**
+     *
+     * @param _data
+     * @param idKey
+     * @param isAutoAssign
+     */
+    constructor(_data = {}, idKey = '', isAutoAssign = false, isAssignRawData = true) {
+        if (_data) {
+            // set raw
+            if (_data.hasOwnProperty('_raw')) {
+                delete _data['_raw'];
+            }
+            this._raw = _data;
+            // store data to new place
+            for (const key of Object.keys(_data)) {
+                this._data[key.toLowerCase()] = this._raw[key];
+            }
+            const self = this;
+            // setTimeout(() => {
+            if (isAutoAssign) {
+                if (isAssignRawData) {
+                    Object.assign(self, self._raw);
+                }
+                else {
+                    Object.assign(self, self._data);
+                }
+            }
+            // });
+        }
+        if (idKey) {
+            // set id key
+            this._idKey = idKey.toLowerCase();
+            this._id = this.getId();
+        }
+    }
+    /**
+     * get value of id
+     * @return {any}
+     */
+    getId() {
+        if (this._idKey && this._data[this._idKey]) {
+            return this._data[this._idKey];
+        }
+        return null;
+    }
+    setId(id) {
+        this._data[this._idKey] = id;
+        this._id = this.getId();
+    }
+    /**
+     * delete object property
+     * @param key: string
+     */
+    deleteProperty(key) {
+        const self = this;
+        if (!!self?.key) {
+            delete self[key];
+        }
+    }
+    /**
+     * get key of id
+     * @returns {string}
+     */
+    getIdKey() {
+        return this._idKey || '';
+    }
+    /**
+     * get value of _data by key
+     * @param key: string
+     * @returns {any}
+     */
+    getValue(key) {
+        return this._data[key.toLowerCase()];
+    }
+    /**
+     * set value of _data by key & value of this object's attribute if existed
+     * @param key: string
+     * @param value: string
+     * @returns {any}
+     */
+    setValue(key, value) {
+        const self = this;
+        if (self.hasOwnProperty(key)) {
+            self[key] = value;
+        }
+        return (this._data[key.toLowerCase()] = value);
+    }
+    /**
+     * get raw value of _data by key
+     * @param key: string
+     * @returns {any}
+     */
+    getRawValue(key) {
+        return this._raw[key];
+    }
+    /**
+     * set value of _data by key
+     * @param key: string
+     * @param value: string
+     * @returns {any}
+     */
+    setRawValue(key, value) {
+        return (this._raw[key] = value);
+    }
+    /*STATIC*/
+    static describe(instance) {
+        return Object.getOwnPropertyNames(instance)?.filter((x) => !x.startsWith('_'));
+    }
+}
+
+/*
+ * Public API Surface of neop-ui-lib
+ */
+// export service
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DefaultModel, ETypeNpBreadcrumb, E_NP_BREADCRUMB, FORM_ERROR_MAP, NeopComponentModule, NpActionBarComponent, NpAlertComponent, NpBreadcrumbComponent, NpButtonComponent, NpCheckboxComponent, NpDialogService, NpDropdownsComponent, NpInputFieldComponent, NpInputMode, NpInputTexteraComponent, NpLoadingIndicatorComponent, NpModalComponent, NpMode, NpPaginationComponent, NpProgressBarComponent, NpResizeComponent, NpScrollbarComponent, NpSelectComponent, NpSliderComponent, NpTabComponent, NpTableComponent, NpToggleComponent, NpTooltipComponent, NpTreeComponent, NpTypographyComponent, TestService, ThemeService };
+//# sourceMappingURL=neoprototype-neop-ui-lib.mjs.map