@neoprototype/neop-ui-lib 1.1.3 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/neoprototype-neop-ui-lib.mjs +264 -160
  2. package/fesm2022/neoprototype-neop-ui-lib.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/neoprototype-neop-ui-lib.d.ts +60 -53
package/fesm2022/neoprototype-neop-ui-lib.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { Injectable, NgModule, Input, ViewChild, Component, EventEmitter, Output, InjectionToken, Optional, Inject, ElementRef, HostListener, ViewChildren, inject, PLATFORM_ID, afterNextRender, TemplateRef } from '@angular/core';
3
3
  import * as i1 from 'ng-zorro-antd/modal';
4
4
  import { NzModalModule } from 'ng-zorro-antd/modal';
5
- import { Subject, debounceTime } from 'rxjs';
5
+ import { Subject } from 'rxjs';
6
6
  import * as i1$1 from '@angular/common';
7
7
  import { CommonModule, DecimalPipe } from '@angular/common';
8
8
  import { NzTypographyModule } from 'ng-zorro-antd/typography';
@@ -34,6 +34,8 @@ import { NzProgressModule } from 'ng-zorro-antd/progress';
34
34
  import * as i2$3 from 'ng-zorro-antd/slider';
35
35
  import { NzSliderModule } from 'ng-zorro-antd/slider';
36
36
  import { NzSpinModule } from 'ng-zorro-antd/spin';
37
+ import * as i2$4 from '@angular/cdk/drag-drop';
38
+ import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
37
39
  import * as i3$4 from 'ng-zorro-antd/resizable';
38
40
  import { NzResizableModule } from 'ng-zorro-antd/resizable';
39
41
 
@@ -122,9 +124,9 @@ class NpAlertService {
122
124
  warning: (description, title, message) => this.emit('notification', 'warning', description, title, message),
123
125
  error: (description, title, message) => this.emit('notification', 'error', description, title, message),
124
126
  };
125
- emit(type, state, description, title, message) {
127
+ emit(npType, state, description, title, message) {
126
128
  this.alertSubject.next({
127
- type,
129
+ npType,
128
130
  state,
129
131
  description,
130
132
  title,
@@ -203,7 +205,7 @@ class NpButtonComponent {
203
205
  container;
204
206
  npType = 'primary';
205
207
  npSize = 'sm';
206
- className = '';
208
+ npClassName = '';
207
209
  isLoading = false;
208
210
  disabled = false;
209
211
  _ngContent = null;
@@ -247,11 +249,11 @@ class NpButtonComponent {
247
249
  }, 1000);
248
250
  }
249
251
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
250
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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-duotone fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@charset \"UTF-8\";@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(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% .003 325.6); --color-mauve-200: oklch(92.2% .005 325.62); --color-mauve-300: oklch(86.5% .012 325.68); --color-mauve-400: oklch(71.1% .019 323.02); --color-mauve-500: oklch(54.2% .034 322.5); --color-mauve-600: oklch(43.5% .029 321.78); --color-mauve-700: oklch(36.4% .029 323.89); --color-mauve-800: oklch(26.3% .024 320.12); --color-mauve-900: oklch(21.2% .019 322.12); --color-mauve-950: oklch(14.5% .008 326); --color-olive-50: oklch(98.8% .003 106.5); --color-olive-100: oklch(96.6% .005 106.5); --color-olive-200: oklch(93% .007 106.5); --color-olive-300: oklch(88% .011 106.6); --color-olive-400: oklch(73.7% .021 106.9); --color-olive-500: oklch(58% .031 107.3); --color-olive-600: oklch(46.6% .025 107.3); --color-olive-700: oklch(39.4% .023 107.4); --color-olive-800: oklch(28.6% .016 107.4); --color-olive-900: oklch(22.8% .013 107.4); --color-olive-950: oklch(15.3% .006 107.1); --color-mist-50: oklch(98.7% .002 197.1); --color-mist-100: oklch(96.3% .002 197.1); --color-mist-200: oklch(92.5% .005 214.3); --color-mist-300: oklch(87.2% .007 219.6); --color-mist-400: oklch(72.3% .014 214.4); --color-mist-500: oklch(56% .021 213.5); --color-mist-600: oklch(45% .017 213.2); --color-mist-700: oklch(37.8% .015 216); --color-mist-800: oklch(27.5% .011 216.9); --color-mist-900: oklch(21.8% .008 223.9); --color-mist-950: oklch(14.8% .004 228.8); --color-taupe-50: oklch(98.6% .002 67.8); --color-taupe-100: oklch(96% .002 17.2); --color-taupe-200: oklch(92.2% .005 34.3); --color-taupe-300: oklch(86.8% .007 39.5); --color-taupe-400: oklch(71.4% .014 41.2); --color-taupe-500: oklch(54.7% .021 43.1); --color-taupe-600: oklch(43.8% .017 39.3); --color-taupe-700: oklch(36.7% .016 35.7); --color-taupe-800: oklch(26.8% .011 36.5); --color-taupe-900: oklch(21.4% .009 43.1); --color-taupe-950: oklch(14.7% .004 49.3); --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); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --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: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@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:--theme(--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:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--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}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{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}::-webkit-calendar-picker-indicator{line-height:1}:-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"] }] });
252
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpButtonComponent, isStandalone: true, selector: "np-button", inputs: { npType: "npType", npSize: "npSize", npClassName: "npClassName", 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 {{ npClassName }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i\n class=\"fa-duotone fa-solid fa-spinner-third fa-spin\"\n *ngIf=\"isLoading\"\n ></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@charset \"UTF-8\";@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(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% .003 325.6); --color-mauve-200: oklch(92.2% .005 325.62); --color-mauve-300: oklch(86.5% .012 325.68); --color-mauve-400: oklch(71.1% .019 323.02); --color-mauve-500: oklch(54.2% .034 322.5); --color-mauve-600: oklch(43.5% .029 321.78); --color-mauve-700: oklch(36.4% .029 323.89); --color-mauve-800: oklch(26.3% .024 320.12); --color-mauve-900: oklch(21.2% .019 322.12); --color-mauve-950: oklch(14.5% .008 326); --color-olive-50: oklch(98.8% .003 106.5); --color-olive-100: oklch(96.6% .005 106.5); --color-olive-200: oklch(93% .007 106.5); --color-olive-300: oklch(88% .011 106.6); --color-olive-400: oklch(73.7% .021 106.9); --color-olive-500: oklch(58% .031 107.3); --color-olive-600: oklch(46.6% .025 107.3); --color-olive-700: oklch(39.4% .023 107.4); --color-olive-800: oklch(28.6% .016 107.4); --color-olive-900: oklch(22.8% .013 107.4); --color-olive-950: oklch(15.3% .006 107.1); --color-mist-50: oklch(98.7% .002 197.1); --color-mist-100: oklch(96.3% .002 197.1); --color-mist-200: oklch(92.5% .005 214.3); --color-mist-300: oklch(87.2% .007 219.6); --color-mist-400: oklch(72.3% .014 214.4); --color-mist-500: oklch(56% .021 213.5); --color-mist-600: oklch(45% .017 213.2); --color-mist-700: oklch(37.8% .015 216); --color-mist-800: oklch(27.5% .011 216.9); --color-mist-900: oklch(21.8% .008 223.9); --color-mist-950: oklch(14.8% .004 228.8); --color-taupe-50: oklch(98.6% .002 67.8); --color-taupe-100: oklch(96% .002 17.2); --color-taupe-200: oklch(92.2% .005 34.3); --color-taupe-300: oklch(86.8% .007 39.5); --color-taupe-400: oklch(71.4% .014 41.2); --color-taupe-500: oklch(54.7% .021 43.1); --color-taupe-600: oklch(43.8% .017 39.3); --color-taupe-700: oklch(36.7% .016 35.7); --color-taupe-800: oklch(26.8% .011 36.5); --color-taupe-900: oklch(21.4% .009 43.1); --color-taupe-950: oklch(14.7% .004 49.3); --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); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --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: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@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:--theme(--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:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--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}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{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}::-webkit-calendar-picker-indicator{line-height:1}:-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"] }] });
251
253
  }
252
254
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpButtonComponent, decorators: [{
253
255
  type: Component,
254
- 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-duotone fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@charset \"UTF-8\";@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(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% .003 325.6); --color-mauve-200: oklch(92.2% .005 325.62); --color-mauve-300: oklch(86.5% .012 325.68); --color-mauve-400: oklch(71.1% .019 323.02); --color-mauve-500: oklch(54.2% .034 322.5); --color-mauve-600: oklch(43.5% .029 321.78); --color-mauve-700: oklch(36.4% .029 323.89); --color-mauve-800: oklch(26.3% .024 320.12); --color-mauve-900: oklch(21.2% .019 322.12); --color-mauve-950: oklch(14.5% .008 326); --color-olive-50: oklch(98.8% .003 106.5); --color-olive-100: oklch(96.6% .005 106.5); --color-olive-200: oklch(93% .007 106.5); --color-olive-300: oklch(88% .011 106.6); --color-olive-400: oklch(73.7% .021 106.9); --color-olive-500: oklch(58% .031 107.3); --color-olive-600: oklch(46.6% .025 107.3); --color-olive-700: oklch(39.4% .023 107.4); --color-olive-800: oklch(28.6% .016 107.4); --color-olive-900: oklch(22.8% .013 107.4); --color-olive-950: oklch(15.3% .006 107.1); --color-mist-50: oklch(98.7% .002 197.1); --color-mist-100: oklch(96.3% .002 197.1); --color-mist-200: oklch(92.5% .005 214.3); --color-mist-300: oklch(87.2% .007 219.6); --color-mist-400: oklch(72.3% .014 214.4); --color-mist-500: oklch(56% .021 213.5); --color-mist-600: oklch(45% .017 213.2); --color-mist-700: oklch(37.8% .015 216); --color-mist-800: oklch(27.5% .011 216.9); --color-mist-900: oklch(21.8% .008 223.9); --color-mist-950: oklch(14.8% .004 228.8); --color-taupe-50: oklch(98.6% .002 67.8); --color-taupe-100: oklch(96% .002 17.2); --color-taupe-200: oklch(92.2% .005 34.3); --color-taupe-300: oklch(86.8% .007 39.5); --color-taupe-400: oklch(71.4% .014 41.2); --color-taupe-500: oklch(54.7% .021 43.1); --color-taupe-600: oklch(43.8% .017 39.3); --color-taupe-700: oklch(36.7% .016 35.7); --color-taupe-800: oklch(26.8% .011 36.5); --color-taupe-900: oklch(21.4% .009 43.1); --color-taupe-950: oklch(14.7% .004 49.3); --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); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --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: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@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:--theme(--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:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--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}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{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}::-webkit-calendar-picker-indicator{line-height:1}:-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"] }]
256
+ 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 {{ npClassName }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i\n class=\"fa-duotone fa-solid fa-spinner-third fa-spin\"\n *ngIf=\"isLoading\"\n ></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@charset \"UTF-8\";@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(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% .003 325.6); --color-mauve-200: oklch(92.2% .005 325.62); --color-mauve-300: oklch(86.5% .012 325.68); --color-mauve-400: oklch(71.1% .019 323.02); --color-mauve-500: oklch(54.2% .034 322.5); --color-mauve-600: oklch(43.5% .029 321.78); --color-mauve-700: oklch(36.4% .029 323.89); --color-mauve-800: oklch(26.3% .024 320.12); --color-mauve-900: oklch(21.2% .019 322.12); --color-mauve-950: oklch(14.5% .008 326); --color-olive-50: oklch(98.8% .003 106.5); --color-olive-100: oklch(96.6% .005 106.5); --color-olive-200: oklch(93% .007 106.5); --color-olive-300: oklch(88% .011 106.6); --color-olive-400: oklch(73.7% .021 106.9); --color-olive-500: oklch(58% .031 107.3); --color-olive-600: oklch(46.6% .025 107.3); --color-olive-700: oklch(39.4% .023 107.4); --color-olive-800: oklch(28.6% .016 107.4); --color-olive-900: oklch(22.8% .013 107.4); --color-olive-950: oklch(15.3% .006 107.1); --color-mist-50: oklch(98.7% .002 197.1); --color-mist-100: oklch(96.3% .002 197.1); --color-mist-200: oklch(92.5% .005 214.3); --color-mist-300: oklch(87.2% .007 219.6); --color-mist-400: oklch(72.3% .014 214.4); --color-mist-500: oklch(56% .021 213.5); --color-mist-600: oklch(45% .017 213.2); --color-mist-700: oklch(37.8% .015 216); --color-mist-800: oklch(27.5% .011 216.9); --color-mist-900: oklch(21.8% .008 223.9); --color-mist-950: oklch(14.8% .004 228.8); --color-taupe-50: oklch(98.6% .002 67.8); --color-taupe-100: oklch(96% .002 17.2); --color-taupe-200: oklch(92.2% .005 34.3); --color-taupe-300: oklch(86.8% .007 39.5); --color-taupe-400: oklch(71.4% .014 41.2); --color-taupe-500: oklch(54.7% .021 43.1); --color-taupe-600: oklch(43.8% .017 39.3); --color-taupe-700: oklch(36.7% .016 35.7); --color-taupe-800: oklch(26.8% .011 36.5); --color-taupe-900: oklch(21.4% .009 43.1); --color-taupe-950: oklch(14.7% .004 49.3); --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); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --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: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@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:--theme(--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:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--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}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{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}::-webkit-calendar-picker-indicator{line-height:1}:-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"] }]
255
257
  }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
256
258
  type: ViewChild,
257
259
  args: ['container', { static: true }]
@@ -259,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
259
261
  type: Input
260
262
  }], npSize: [{
261
263
  type: Input
262
- }], className: [{
264
+ }], npClassName: [{
263
265
  type: Input
264
266
  }], isLoading: [{
265
267
  type: Input
@@ -278,7 +280,6 @@ class NpCheckboxComponent {
278
280
  }
279
281
  this._input = !!value ? value : new FormControl(false);
280
282
  }
281
- type = '';
282
283
  size = 'md';
283
284
  npType = 'checkbox';
284
285
  isDisabled = false;
@@ -294,7 +295,7 @@ class NpCheckboxComponent {
294
295
  this.valueChange.emit(value);
295
296
  }
296
297
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
297
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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"] }] });
298
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpCheckboxComponent, isStandalone: true, selector: "np-checkbox", inputs: { input: "input", 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' : npType,\n isDisabled ? 'disabled' : '',\n _input.value ? 'isChecked' : '',\n ]\"\n>\n <input\n [type]=\"npType === 'radio' ? 'radio' : 'checkbox'\"\n [name]=\"npType === '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' : npType,\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"] }] });
298
299
  }
299
300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpCheckboxComponent, decorators: [{
300
301
  type: Component,
@@ -306,11 +307,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
306
307
  NzButtonModule,
307
308
  NzSwitchModule,
308
309
  NpTypographyComponent,
309
- ], 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"] }]
310
+ ], template: "<label\n [ngClass]=\"[\n size,\n isIndeterminate ? 'indeterminate' : npType,\n isDisabled ? 'disabled' : '',\n _input.value ? 'isChecked' : '',\n ]\"\n>\n <input\n [type]=\"npType === 'radio' ? 'radio' : 'checkbox'\"\n [name]=\"npType === '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' : npType,\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"] }]
310
311
  }], propDecorators: { input: [{
311
312
  type: Input
312
- }], type: [{
313
- type: Input
314
313
  }], size: [{
315
314
  type: Input
316
315
  }], npType: [{
@@ -360,11 +359,11 @@ class NpInputFieldComponent {
360
359
  set input(value) {
361
360
  this._input = value ? value : new FormControl('');
362
361
  }
363
- set type(value) {
362
+ set npType(value) {
364
363
  this._type = value;
365
364
  this.updateInputType();
366
365
  }
367
- get type() {
366
+ get npType() {
368
367
  return this._type;
369
368
  }
370
369
  valueChange = new EventEmitter();
@@ -426,7 +425,7 @@ class NpInputFieldComponent {
426
425
  event.target.value = this._input.value || '';
427
426
  return;
428
427
  }
429
- if (this.type === 'number') {
428
+ if (this.npType === 'number') {
430
429
  if ((!isNaN(+input) && reg.test(input)) ||
431
430
  input === '' ||
432
431
  input === '-') {
@@ -444,7 +443,7 @@ class NpInputFieldComponent {
444
443
  }
445
444
  this._input.setValue(input);
446
445
  this.valueChange.emit(input);
447
- if (this.type === 'function') {
446
+ if (this.npType === 'function') {
448
447
  try {
449
448
  this.functionHandler?.(input);
450
449
  }
@@ -455,7 +454,7 @@ class NpInputFieldComponent {
455
454
  }
456
455
  }
457
456
  onBlur(event) {
458
- if (this.type === 'number') {
457
+ if (this.npType === 'number') {
459
458
  const raw = this._input.value;
460
459
  const numeric = Number(raw?.toString().replace(/,/g, ''));
461
460
  const formatted = this.decimalPipe.transform(numeric, this.digitsInfo, this.locale);
@@ -479,7 +478,7 @@ class NpInputFieldComponent {
479
478
  this.iconRightClick.emit();
480
479
  }
481
480
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpInputFieldComponent, deps: [{ token: i1$1.DecimalPipe }, { token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
482
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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", formatDate: "formatDate", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick", blur: "blur" }, 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]=\"formatDate\"\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 [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\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: ["nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch"], 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: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
481
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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", formatDate: "formatDate", input: "input", npType: "npType" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick", blur: "blur" }, 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n *ngIf=\"label\"\n class=\"input-label\"\n >{{ label }}</np-typography\n >\n\n <ng-container *ngIf=\"npType === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\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 [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\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=\"npType !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"npType == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\"\n >\n </span>\n </ng-template>\n\n <div\n class=\"flex justify-between\"\n *ngIf=\"\n computedStatus === 'error' || hint || (limitValue && npType !== 'date')\n \"\n >\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography\n *ngIf=\"computedStatus === 'error'\"\n class=\"input-error text-red-500\"\n >{{ errorMessageFromInput }}</np-typography\n >\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && npType !== '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: ["nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch"], 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: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
483
482
  }
484
483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpInputFieldComponent, decorators: [{
485
484
  type: Component,
@@ -491,7 +490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
491
490
  NzIconModule,
492
491
  NpTypographyComponent,
493
492
  NzDatePickerModule,
494
- ], 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]=\"formatDate\"\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 [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\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"] }]
493
+ ], providers: [DecimalPipe], template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n *ngIf=\"label\"\n class=\"input-label\"\n >{{ label }}</np-typography\n >\n\n <ng-container *ngIf=\"npType === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\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 [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\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=\"npType !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"npType == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\"\n >\n </span>\n </ng-template>\n\n <div\n class=\"flex justify-between\"\n *ngIf=\"\n computedStatus === 'error' || hint || (limitValue && npType !== 'date')\n \"\n >\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography\n *ngIf=\"computedStatus === 'error'\"\n class=\"input-error text-red-500\"\n >{{ errorMessageFromInput }}</np-typography\n >\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && npType !== '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"] }]
495
494
  }], ctorParameters: () => [{ type: i1$1.DecimalPipe }, { type: undefined, decorators: [{
496
495
  type: Optional
497
496
  }, {
@@ -530,7 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
530
529
  type: Input
531
530
  }], input: [{
532
531
  type: Input
533
- }], type: [{
532
+ }], npType: [{
534
533
  type: Input
535
534
  }], valueChange: [{
536
535
  type: Output
@@ -687,7 +686,7 @@ var NpInputMode;
687
686
  })(NpInputMode || (NpInputMode = {}));
688
687
  class NpSelectComponent {
689
688
  npType = 'sm';
690
- className = '';
689
+ npClassName = '';
691
690
  label;
692
691
  hint;
693
692
  placeHolder = '';
@@ -707,7 +706,7 @@ class NpSelectComponent {
707
706
  this.valueChange.emit(this._input?.value);
708
707
  }
709
708
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
710
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }] });
709
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpSelectComponent, isStandalone: true, selector: "np-select", inputs: { npType: "npType", npClassName: "npClassName", 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 {{ npClassName }}\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n *ngIf=\"label\"\n class=\"input-label\"\n >{{ label }}</np-typography\n >\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-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", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }] });
711
710
  }
712
711
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpSelectComponent, decorators: [{
713
712
  type: Component,
@@ -717,10 +716,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
717
716
  FormsModule,
718
717
  ReactiveFormsModule,
719
718
  NzSelectModule,
720
- ], 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"] }]
719
+ ], template: "<div class=\"flex flex-col gap-1 np-select {{ npClassName }}\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n *ngIf=\"label\"\n class=\"input-label\"\n >{{ label }}</np-typography\n >\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-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"] }]
721
720
  }], propDecorators: { npType: [{
722
721
  type: Input
723
- }], className: [{
722
+ }], npClassName: [{
724
723
  type: Input
725
724
  }], label: [{
726
725
  type: Input
@@ -762,7 +761,7 @@ var NpMode;
762
761
  class NpDropdownsComponent {
763
762
  npType = 'secondary';
764
763
  npSize = 'sm';
765
- className = '';
764
+ npClassName = '';
766
765
  value = 'Menu Dropdown';
767
766
  useSearch = false;
768
767
  alwaysOpen = false;
@@ -807,7 +806,7 @@ class NpDropdownsComponent {
807
806
  return;
808
807
  }
809
808
  const matchedItems = this.originalList.filter((item) => item.label?.toLowerCase().includes(normalizedSearch));
810
- const originalWithoutDivider = this.originalList.filter((item) => item.type !== 'divider');
809
+ const originalWithoutDivider = this.originalList.filter((item) => item.npType !== 'divider');
811
810
  const isSame = matchedItems.length === originalWithoutDivider.length &&
812
811
  matchedItems.every((item) => originalWithoutDivider.some((o) => o.label === item.label));
813
812
  if (isSame) {
@@ -818,11 +817,11 @@ class NpDropdownsComponent {
818
817
  }
819
818
  }
820
819
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDropdownsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
821
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", className: "className", value: "value", useSearch: "useSearch", alwaysOpen: "alwaysOpen", placement: "placement", list: "list" }, outputs: { valueChange: "valueChange", visible: "visible" }, ngImport: i0, template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ className }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n <i *ngIf=\"selectedItem?.classIcon\" class=\"{{ selectedItem?.classIcon }}\"></i>\n {{ selectedItem?.label || value }}\n @if (npType === 'icon') {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n type=\"string\"\n placeholder=\"Search\"\n iconLeft=\"fa-regular fa-magnifying-glass\"\n iconRight=\"fa-solid fa-xmark-large\"\n [input]=\"searchControl\"\n (iconRightClick)=\"onRightIconClick()\"\n ></np-input-field>\n </div>\n @for (item of filteredList; track item) {\n <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n ></ng-container>\n }\n </ul>\n\n <ng-template #contentMenu let-item=\"item\">\n @if (item?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!item?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </li>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n ></ng-container>\n }\n </ng-template>\n\n <ng-template #contentSubMenuTemplate let-item=\"item\">\n <li nz-submenu [nzTitle]=\"submenuTitle\">\n <ng-template #submenuTitle>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild of item?.childrens; track itemChild) { @if\n (itemChild?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!itemChild?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </li>\n } @else {\n\n <!-- Start Fix temp when not use recursive template -->\n <li nz-submenu [nzTitle]=\"submenuTitle2\">\n <ng-template #submenuTitle2>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: itemChild2 }\n \"\n ></ng-container>\n </li>\n }\n </ul>\n </li>\n <!-- End Fix temp when not use recursive template -->\n\n <!-- <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n ></ng-container> -->\n } }\n </ul>\n </li>\n </ng-template>\n\n <ng-template #contentTemplate let-item=\"item\">\n <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n {{ item?.label }}\n </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type:
820
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", npClassName: "npClassName", 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 {{ npClassName }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n <i\n *ngIf=\"selectedItem?.classIcon\"\n class=\"{{ selectedItem?.classIcon }}\"\n ></i>\n {{ selectedItem?.label || value }}\n @if (npType === \"icon\") {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n npType=\"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?.npType === \"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) {\n @if (itemChild?.npType === \"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=\"\n contentTemplate;\n context: { item: itemChild }\n \"\n ></ng-container>\n </li>\n } @else {\n <!-- Start Fix temp when not use recursive template -->\n <li nz-submenu [nzTitle]=\"submenuTitle2\">\n <ng-template #submenuTitle2>\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: itemChild }\n \"\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 }\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", "npClassName", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type:
822
821
  // NzPopoverModule,
823
822
  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", "nzArrow", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type:
824
823
  // NpDropdownContentMenuComponent
825
- NzSelectModule }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }] });
824
+ NzSelectModule }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "npType"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }] });
826
825
  }
827
826
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDropdownsComponent, decorators: [{
828
827
  type: Component,
@@ -836,12 +835,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
836
835
  // NpDropdownContentMenuComponent
837
836
  NzSelectModule,
838
837
  NpInputFieldComponent,
839
- ], template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ className }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n <i *ngIf=\"selectedItem?.classIcon\" class=\"{{ selectedItem?.classIcon }}\"></i>\n {{ selectedItem?.label || value }}\n @if (npType === 'icon') {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n type=\"string\"\n placeholder=\"Search\"\n iconLeft=\"fa-regular fa-magnifying-glass\"\n iconRight=\"fa-solid fa-xmark-large\"\n [input]=\"searchControl\"\n (iconRightClick)=\"onRightIconClick()\"\n ></np-input-field>\n </div>\n @for (item of filteredList; track item) {\n <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n ></ng-container>\n }\n </ul>\n\n <ng-template #contentMenu let-item=\"item\">\n @if (item?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!item?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </li>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n ></ng-container>\n }\n </ng-template>\n\n <ng-template #contentSubMenuTemplate let-item=\"item\">\n <li nz-submenu [nzTitle]=\"submenuTitle\">\n <ng-template #submenuTitle>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild of item?.childrens; track itemChild) { @if\n (itemChild?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!itemChild?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </li>\n } @else {\n\n <!-- Start Fix temp when not use recursive template -->\n <li nz-submenu [nzTitle]=\"submenuTitle2\">\n <ng-template #submenuTitle2>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: itemChild2 }\n \"\n ></ng-container>\n </li>\n }\n </ul>\n </li>\n <!-- End Fix temp when not use recursive template -->\n\n <!-- <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n ></ng-container> -->\n } }\n </ul>\n </li>\n </ng-template>\n\n <ng-template #contentTemplate let-item=\"item\">\n <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n {{ item?.label }}\n </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"] }]
838
+ ], template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ npClassName }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n <i\n *ngIf=\"selectedItem?.classIcon\"\n class=\"{{ selectedItem?.classIcon }}\"\n ></i>\n {{ selectedItem?.label || value }}\n @if (npType === \"icon\") {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n npType=\"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?.npType === \"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) {\n @if (itemChild?.npType === \"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=\"\n contentTemplate;\n context: { item: itemChild }\n \"\n ></ng-container>\n </li>\n } @else {\n <!-- Start Fix temp when not use recursive template -->\n <li nz-submenu [nzTitle]=\"submenuTitle2\">\n <ng-template #submenuTitle2>\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: itemChild }\n \"\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 }\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"] }]
840
839
  }], propDecorators: { npType: [{
841
840
  type: Input
842
841
  }], npSize: [{
843
842
  type: Input
844
- }], className: [{
843
+ }], npClassName: [{
845
844
  type: Input
846
845
  }], value: [{
847
846
  type: Input
@@ -861,7 +860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
861
860
 
862
861
  class NpTooltipComponent {
863
862
  renderer;
864
- type = 'primary';
863
+ npType = 'primary';
865
864
  text = 'Title';
866
865
  descriptions;
867
866
  position;
@@ -889,12 +888,12 @@ class NpTooltipComponent {
889
888
  }
890
889
  }
891
890
  get tooltipColor() {
892
- return this.type === 'primary'
891
+ return this.npType === 'primary'
893
892
  ? 'rgba(255, 255, 255, 1)'
894
893
  : 'rgba(16, 24, 40, 1)';
895
894
  }
896
895
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTooltipComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
897
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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-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"] }] });
896
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpTooltipComponent, isStandalone: true, selector: "np-tooltip", inputs: { npType: "npType", 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 nzTooltipOverlaynpClassName=\"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]=\"{\n color:\n npType === 'primary'\n ? 'rgba(52, 64, 84, 1)'\n : 'rgba(255, 255, 255, 1)',\n }\"\n >{{ text }}</np-typography\n >\n <np-typography\n npType=\"text\"\n npSize=\"xs\"\n npWeight=\"medium\"\n [ngStyle]=\"{\n color:\n npType === 'primary'\n ? 'rgba(52, 64, 84, 1)'\n : 'rgba(255, 255, 255, 1)',\n }\"\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-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"] }] });
898
897
  }
899
898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTooltipComponent, decorators: [{
900
899
  type: Component,
@@ -903,8 +902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
903
902
  NzTooltipModule,
904
903
  CommonModule,
905
904
  NpTypographyComponent,
906
- ], 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"] }]
907
- }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { type: [{
905
+ ], template: "<div\n #container\n class=\"h-full\"\n [nzTooltipTitle]=\"customTooltip\"\n [nzTooltipPlacement]=\"position\"\n nzTooltipTrigger=\"hover\"\n [nzTooltipVisible]=\"tooltipVisible\"\n nzTooltipOverlaynpClassName=\"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]=\"{\n color:\n npType === 'primary'\n ? 'rgba(52, 64, 84, 1)'\n : 'rgba(255, 255, 255, 1)',\n }\"\n >{{ text }}</np-typography\n >\n <np-typography\n npType=\"text\"\n npSize=\"xs\"\n npWeight=\"medium\"\n [ngStyle]=\"{\n color:\n npType === 'primary'\n ? 'rgba(52, 64, 84, 1)'\n : 'rgba(255, 255, 255, 1)',\n }\"\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"] }]
906
+ }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { npType: [{
908
907
  type: Input
909
908
  }], text: [{
910
909
  type: Input
@@ -1029,7 +1028,7 @@ class NpActionBarComponent {
1029
1028
  // private updateScrollState(): void {
1030
1029
  // const el = this.resizeContainer?.nativeElement;
1031
1030
  // if (!el) return;
1032
- // const totalActionWidth = el.scrollWidth;
1031
+ // const totalActionWidth = el.npScrollWidth;
1033
1032
  // const parentWidth = el.parentElement ? el.parentElement.clientWidth - 3 : 0;
1034
1033
  // if (!this.isCheckValue) {
1035
1034
  // this.isCheckValue = true;
@@ -1063,7 +1062,7 @@ class NpActionBarComponent {
1063
1062
  if (!el)
1064
1063
  return;
1065
1064
  if (this.totalActionWidth !== this.scrollMaxWidth) {
1066
- this.totalActionWidth = el.scrollWidth;
1065
+ this.totalActionWidth = el.npScrollWidth;
1067
1066
  }
1068
1067
  let parentWidth = el.parentElement ? el.parentElement.clientWidth - 3 : 0;
1069
1068
  if (!this.isCheckValue) {
@@ -1122,7 +1121,7 @@ class NpActionBarComponent {
1122
1121
  updateBtnScroll() {
1123
1122
  const ele = this.scrollWrapper?.nativeElement;
1124
1123
  this.isPreviousDisable = ele.scrollLeft <= 0;
1125
- this.isNextDisable = ele.scrollLeft + ele.clientWidth >= ele.scrollWidth;
1124
+ this.isNextDisable = ele.scrollLeft + ele.clientWidth >= ele.npScrollWidth;
1126
1125
  }
1127
1126
  attachScrollListener() {
1128
1127
  const el = this.scrollWrapper?.nativeElement;
@@ -1162,7 +1161,7 @@ class NpActionBarComponent {
1162
1161
  return visibleIcons * (iconWidth + gap);
1163
1162
  }
1164
1163
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1165
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n <div #resizeContainer class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n <button\n *ngIf=\"canPrevious\"\n (click)=\"scrollLeft()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isPreviousDisable,\n 'cursor-pointer': !isPreviousDisable,\n\n }\"\n >\n <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n </button>\n\n <div\n #scrollWrapper\n class=\"flex w-full no-scrollbar scroll-smooth\"\n [ngClass]=\"{\n 'mx-3': compressedActions.length === 0 && !canPrevious,\n 'ms-3': !canPrevious && compressedActions.length > 0,\n 'overflow-x-auto': isOverflowing,\n }\"\n [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n >\n <ng-container *ngFor=\"let action of unCompressedActions2\">\n <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n <button\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n </button>\n </np-tooltip>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"canNext\"\n (click)=\"scrollRight()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isNextDisable,\n 'cursor-pointer': !isNextDisable,\n }\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n\n <np-tooltip\n *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n text=\"More actions\"\n class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n [ngClass]=\"{\n 'bg-gray-100': isMoreOpen,\n 'bg-transparent': !isMoreOpen,\n }\"\n >\n <button\n #triggerBtn\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"showMoreActions()\"\n >\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n </np-tooltip>\n </div>\n</div>\n\n<div\n *ngIf=\"isMoreOpen\"\n class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n [ngStyle]=\"dropdownStyles\"\n>\n <ng-container *ngFor=\"let action of compressedActions\">\n <button\n class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n {{ action.label }}\n </button>\n </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTooltipComponent, selector: "np-tooltip", inputs: ["type", "text", "descriptions", "position", "tooltipVisible", "ngContent"] }] });
1164
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n <div #resizeContainer class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n <button\n *ngIf=\"canPrevious\"\n (click)=\"scrollLeft()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isPreviousDisable,\n 'cursor-pointer': !isPreviousDisable,\n\n }\"\n >\n <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n </button>\n\n <div\n #scrollWrapper\n class=\"flex w-full no-scrollbar scroll-smooth\"\n [ngClass]=\"{\n 'mx-3': compressedActions.length === 0 && !canPrevious,\n 'ms-3': !canPrevious && compressedActions.length > 0,\n 'overflow-x-auto': isOverflowing,\n }\"\n [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n >\n <ng-container *ngFor=\"let action of unCompressedActions2\">\n <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n <button\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n </button>\n </np-tooltip>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"canNext\"\n (click)=\"scrollRight()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isNextDisable,\n 'cursor-pointer': !isNextDisable,\n }\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n\n <np-tooltip\n *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n text=\"More actions\"\n class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n [ngClass]=\"{\n 'bg-gray-100': isMoreOpen,\n 'bg-transparent': !isMoreOpen,\n }\"\n >\n <button\n #triggerBtn\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"showMoreActions()\"\n >\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n </np-tooltip>\n </div>\n</div>\n\n<div\n *ngIf=\"isMoreOpen\"\n class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n [ngStyle]=\"dropdownStyles\"\n>\n <ng-container *ngFor=\"let action of compressedActions\">\n <button\n class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n {{ action.label }}\n </button>\n </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTooltipComponent, selector: "np-tooltip", inputs: ["npType", "text", "descriptions", "position", "tooltipVisible", "ngContent"] }] });
1166
1165
  }
1167
1166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpActionBarComponent, decorators: [{
1168
1167
  type: Component,
@@ -1196,12 +1195,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1196
1195
  }] } });
1197
1196
 
1198
1197
  class NpTreeComponent {
1199
- type = 'default';
1198
+ npType = 'default';
1200
1199
  expandPosition = 'left';
1201
1200
  notCompressMin = 3;
1202
1201
  isCompactActions = false;
1203
1202
  autoHideActions = true;
1204
- className = '';
1203
+ npClassName = '';
1205
1204
  _list = [];
1206
1205
  _flattenList = [];
1207
1206
  set list(value) {
@@ -1275,7 +1274,7 @@ class NpTreeComponent {
1275
1274
  }
1276
1275
  item.isSelected = !item.isSelected;
1277
1276
  this.itemActiveId = item.id;
1278
- if (this.type === 'default')
1277
+ if (this.npType === 'default')
1279
1278
  return;
1280
1279
  this.onCheckItem(item);
1281
1280
  }
@@ -1349,7 +1348,7 @@ class NpTreeComponent {
1349
1348
  };
1350
1349
  }
1351
1350
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1352
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { type: "type", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", className: "className", list: "list", input: "input", itemActiveId: "itemActiveId", useLine: "useLine" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ng-template\n #wrapWithLevel\n let-content\n let-level=\"level\"\n let-max=\"max\"\n let-isLastByLevel=\"isLastByLevel\"\n let-hasParentByLevel=\"hasParentByLevel\"\n let-isLine=\"isLine\"\n>\n <div\n [ngClass]=\"[\n 'tree-line',\n 'level-' + level,\n isLine ? '' : 'no-line',\n isLastByLevel?.[level] ? 'is-last' : '',\n hasParentByLevel?.[level] ? 'has-parent' : '',\n expandPosition === 'right' ? 'expand-right' : '',\n ]\"\n >\n @if (level < max) {\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: content,\n level: level + 1,\n max: max,\n isLastByLevel: isLastByLevel,\n hasParentByLevel: hasParentByLevel,\n isLine: isLine\n }\n \"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n @for (item of visibleNodes; track item; let isLast = $last) {\n <ng-template #treeNodeContent>\n <div\n class=\"tree-node\"\n [ngClass]=\"[\n itemHasChildren(item) ? 'has-children' : '',\n item.parentId ? 'has-parent' : ''\n ]\"\n >\n <div\n class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n [class.tree-node-selected]=\"item?.id === itemActiveId\"\n [routerLink]=\"item.path ? item.path : null\"\n [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n >\n <div class=\"flex gap-1 items-center\">\n @if (expandPosition === 'left') {\n @if (itemHasChildren(item)) {\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\">\n <i\n class=\"fa-solid fa-caret-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n } @else {\n <div class=\"w-[15px] h-[14px]\"></div>\n }\n }\n\n <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n @if ( type === 'checkbox' ) {\n <np-checkbox\n [input]=\"item.isChecked\"\n [type]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n } @if (type === 'icon') {\n <i\n class=\"fa-light\"\n [ngClass]=\"\n item?.childrens?.length\n ? item?.isExpanded\n ? item?.iconExpanded\n : item?.iconCollapsed\n : item?.iconLeaf\n \"\n ></i>\n }\n\n <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n </div>\n </div>\n\n <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n @if ((item?.actions?.length ?? 0) > 0){\n <np-action-bar\n class=\"w-full flex justify-end\"\n ngClass=\"\n {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n (click)=\"item.path ? $event.stopPropagation() : null\"\n >\n </np-action-bar>\n }\n @if (expandPosition === 'right')\n {\n @if (itemHasChildren(item)){\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\" className=\"flex w-[17px]\">\n <i\n class=\"fa-solid fa-chevron-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n }\n @else {\n <div class=\"w-[17px]\"></div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: treeNodeContent,\n level: 0,\n max: item.level ?? 0,\n isLastByLevel: item.isLastByLevel,\n hasParentByLevel: item.hasParentByLevel,\n isLine: useLine\n }\n \"\n ></ng-container>\n }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NpActionBarComponent, selector: "np-action-bar", inputs: ["actions", "data", "notCompressMin", "isNotResponsive"] }] });
1351
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { npType: "npType", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", npClassName: "npClassName", 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 {{ npClassName }}\">\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 {{\n item.npClassName\n }}\"\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\n npType=\"icon\"\n npSize=\"bs\"\n (click)=\"onExpand($event, item)\"\n >\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 (npType === \"checkbox\") {\n <np-checkbox\n [input]=\"item.isChecked\"\n [npType]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n }\n @if (npType === \"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\">{{\n item?.name\n }}</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 {{\n autoHideActions\n ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200'\n : ''\n }}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n (click)=\"item.path ? $event.stopPropagation() : null\"\n >\n </np-action-bar>\n }\n @if (expandPosition === \"right\") {\n @if (itemHasChildren(item)) {\n <np-button\n npType=\"icon\"\n npSize=\"bs\"\n (click)=\"onExpand($event, item)\"\n npClassName=\"flex w-[17px]\"\n >\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 } @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", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "npClassName", "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"] }] });
1353
1352
  }
1354
1353
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTreeComponent, decorators: [{
1355
1354
  type: Component,
@@ -1359,8 +1358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1359
1358
  NpButtonComponent,
1360
1359
  RouterModule,
1361
1360
  NpActionBarComponent,
1362
- ], template: "<ng-template\n #wrapWithLevel\n let-content\n let-level=\"level\"\n let-max=\"max\"\n let-isLastByLevel=\"isLastByLevel\"\n let-hasParentByLevel=\"hasParentByLevel\"\n let-isLine=\"isLine\"\n>\n <div\n [ngClass]=\"[\n 'tree-line',\n 'level-' + level,\n isLine ? '' : 'no-line',\n isLastByLevel?.[level] ? 'is-last' : '',\n hasParentByLevel?.[level] ? 'has-parent' : '',\n expandPosition === 'right' ? 'expand-right' : '',\n ]\"\n >\n @if (level < max) {\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: content,\n level: level + 1,\n max: max,\n isLastByLevel: isLastByLevel,\n hasParentByLevel: hasParentByLevel,\n isLine: isLine\n }\n \"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n @for (item of visibleNodes; track item; let isLast = $last) {\n <ng-template #treeNodeContent>\n <div\n class=\"tree-node\"\n [ngClass]=\"[\n itemHasChildren(item) ? 'has-children' : '',\n item.parentId ? 'has-parent' : ''\n ]\"\n >\n <div\n class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n [class.tree-node-selected]=\"item?.id === itemActiveId\"\n [routerLink]=\"item.path ? item.path : null\"\n [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n >\n <div class=\"flex gap-1 items-center\">\n @if (expandPosition === 'left') {\n @if (itemHasChildren(item)) {\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\">\n <i\n class=\"fa-solid fa-caret-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n } @else {\n <div class=\"w-[15px] h-[14px]\"></div>\n }\n }\n\n <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n @if ( type === 'checkbox' ) {\n <np-checkbox\n [input]=\"item.isChecked\"\n [type]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n } @if (type === 'icon') {\n <i\n class=\"fa-light\"\n [ngClass]=\"\n item?.childrens?.length\n ? item?.isExpanded\n ? item?.iconExpanded\n : item?.iconCollapsed\n : item?.iconLeaf\n \"\n ></i>\n }\n\n <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n </div>\n </div>\n\n <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n @if ((item?.actions?.length ?? 0) > 0){\n <np-action-bar\n class=\"w-full flex justify-end\"\n ngClass=\"\n {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n (click)=\"item.path ? $event.stopPropagation() : null\"\n >\n </np-action-bar>\n }\n @if (expandPosition === 'right')\n {\n @if (itemHasChildren(item)){\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\" className=\"flex w-[17px]\">\n <i\n class=\"fa-solid fa-chevron-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n }\n @else {\n <div class=\"w-[17px]\"></div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: treeNodeContent,\n level: 0,\n max: item.level ?? 0,\n isLastByLevel: item.isLastByLevel,\n hasParentByLevel: item.hasParentByLevel,\n isLine: useLine\n }\n \"\n ></ng-container>\n }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"] }]
1363
- }], propDecorators: { type: [{
1361
+ ], 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 {{ npClassName }}\">\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 {{\n item.npClassName\n }}\"\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\n npType=\"icon\"\n npSize=\"bs\"\n (click)=\"onExpand($event, item)\"\n >\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 (npType === \"checkbox\") {\n <np-checkbox\n [input]=\"item.isChecked\"\n [npType]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n }\n @if (npType === \"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\">{{\n item?.name\n }}</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 {{\n autoHideActions\n ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200'\n : ''\n }}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n (click)=\"item.path ? $event.stopPropagation() : null\"\n >\n </np-action-bar>\n }\n @if (expandPosition === \"right\") {\n @if (itemHasChildren(item)) {\n <np-button\n npType=\"icon\"\n npSize=\"bs\"\n (click)=\"onExpand($event, item)\"\n npClassName=\"flex w-[17px]\"\n >\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 } @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"] }]
1362
+ }], propDecorators: { npType: [{
1364
1363
  type: Input
1365
1364
  }], expandPosition: [{
1366
1365
  type: Input
@@ -1370,7 +1369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1370
1369
  type: Input
1371
1370
  }], autoHideActions: [{
1372
1371
  type: Input
1373
- }], className: [{
1372
+ }], npClassName: [{
1374
1373
  type: Input
1375
1374
  }], list: [{
1376
1375
  type: Input
@@ -1385,10 +1384,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1385
1384
  }] } });
1386
1385
 
1387
1386
  class NpPaginationComponent {
1388
- type = 'basic';
1387
+ npType = 'basic';
1389
1388
  totalItems = 0;
1390
1389
  pageSize = [];
1391
- isReverse = false;
1390
+ npReverse = false;
1392
1391
  pageSizeChange = new EventEmitter();
1393
1392
  pageTotal = 1;
1394
1393
  _pageSizeValue = 10;
@@ -1451,11 +1450,11 @@ class NpPaginationComponent {
1451
1450
  }
1452
1451
  }
1453
1452
  dropdownStyleMap = {};
1454
- toggleDropdownByType(type) {
1453
+ toggleDropdownByType(npType) {
1455
1454
  Object.keys(this.isDropdownOpenMap).forEach((key) => {
1456
1455
  this.isDropdownOpenMap[key] = false;
1457
1456
  });
1458
- this.isDropdownOpenMap[type] = true;
1457
+ this.isDropdownOpenMap[npType] = true;
1459
1458
  setTimeout(() => {
1460
1459
  const triggerEl = this.triggerRef?.nativeElement;
1461
1460
  const dropdownEl = document.querySelector('.np-dropdown');
@@ -1466,7 +1465,7 @@ class NpPaginationComponent {
1466
1465
  let left = rect.left;
1467
1466
  const width = rect.width;
1468
1467
  if (top + dropdownRect.height <= window.innerHeight) {
1469
- this.dropdownStyleMap[type] = {
1468
+ this.dropdownStyleMap[npType] = {
1470
1469
  top: `${top}px`,
1471
1470
  left: `${left}px`,
1472
1471
  width: `${width}px`,
@@ -1475,7 +1474,7 @@ class NpPaginationComponent {
1475
1474
  }
1476
1475
  const topPos = rect.top - dropdownRect.height;
1477
1476
  if (topPos >= 0) {
1478
- this.dropdownStyleMap[type] = {
1477
+ this.dropdownStyleMap[npType] = {
1479
1478
  top: `${topPos - 10}px`,
1480
1479
  left: `${left}px`,
1481
1480
  width: `${width}px`,
@@ -1485,7 +1484,7 @@ class NpPaginationComponent {
1485
1484
  // // doing right
1486
1485
  // const rightPos = rect.right;
1487
1486
  // if (rightPos + dropdownRect.width <= window.innerWidth) {
1488
- // this.dropdownStyleMap[type] = {
1487
+ // this.dropdownStyleMap[npType] = {
1489
1488
  // top: `${rect.top}px`,
1490
1489
  // left: `${rightPos}px`,
1491
1490
  // width: `${dropdownRect.width}px`,
@@ -1495,14 +1494,14 @@ class NpPaginationComponent {
1495
1494
  // // doing left
1496
1495
  // const leftPos = rect.left - dropdownRect.width;
1497
1496
  // if (leftPos >= 0) {
1498
- // this.dropdownStyleMap[type] = {
1497
+ // this.dropdownStyleMap[npType] = {
1499
1498
  // top: `${rect.top}px`,
1500
1499
  // left: `${leftPos}px`,
1501
1500
  // width: `${dropdownRect.width}px`,
1502
1501
  // };
1503
1502
  // return;
1504
1503
  // }
1505
- this.dropdownStyleMap[type] = {
1504
+ this.dropdownStyleMap[npType] = {
1506
1505
  top: `${rect.top - dropdownRect.height}px`,
1507
1506
  left: `${rect.left}px`,
1508
1507
  width: `${width}px`,
@@ -1511,7 +1510,7 @@ class NpPaginationComponent {
1511
1510
  });
1512
1511
  }
1513
1512
  onSelectPageSize(size) {
1514
- this.isDropdownOpenMap[this.type] = false;
1513
+ this.isDropdownOpenMap[this.npType] = false;
1515
1514
  this.onPageSizeChange(size.toString());
1516
1515
  }
1517
1516
  getDisplayedPages() {
@@ -1554,28 +1553,28 @@ class NpPaginationComponent {
1554
1553
  }
1555
1554
  onDocumentClick(event) {
1556
1555
  const clickedInside = this.triggerRef?.nativeElement?.contains(event.target);
1557
- if (!clickedInside && this.type) {
1558
- this.isDropdownOpenMap[this.type] = false;
1556
+ if (!clickedInside && this.npType) {
1557
+ this.isDropdownOpenMap[this.npType] = false;
1559
1558
  }
1560
1559
  }
1561
1560
  onWindowScroll() {
1562
- if (this.type) {
1563
- this.isDropdownOpenMap[this.type] = false;
1561
+ if (this.npType) {
1562
+ this.isDropdownOpenMap[this.npType] = false;
1564
1563
  }
1565
1564
  }
1566
1565
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1567
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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-100 np-dropdown 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 \n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\">\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 np-dropdown 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 np-dropdown 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 np-dropdown 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 \n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\"\n >\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 np-dropdown 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 }] });
1566
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { npType: "npType", totalItems: "totalItems", pageSize: "pageSize", npReverse: "npReverse", 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]=\"npType\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"npReverse ? '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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(24, 34, 48, 1)\"\n >{{ page }}</np-typography\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div\n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"npReverse ? 'justify-end' : ''\"\n >\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(24, 34, 48, 1)\"\n >{{ page }}</np-typography\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[npType]\"\n *ngIf=\"isDropdownOpenMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? '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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div\n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"npReverse ? 'justify-end' : ''\"\n >\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\n *ngFor=\"let page of getDisplayedPages(); let last = last\"\n >\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(24, 34, 48, 1)\"\n >\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span\n class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\"\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\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 }] });
1568
1567
  }
1569
1568
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpPaginationComponent, decorators: [{
1570
1569
  type: Component,
1571
- 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-100 np-dropdown 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 \n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\">\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 np-dropdown 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 np-dropdown 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 np-dropdown 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 \n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\"\n >\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 np-dropdown 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" }]
1572
- }], propDecorators: { type: [{
1570
+ args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"npType\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"npReverse ? '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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(24, 34, 48, 1)\"\n >{{ page }}</np-typography\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div\n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"npReverse ? 'justify-end' : ''\"\n >\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(24, 34, 48, 1)\"\n >{{ page }}</np-typography\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[npType]\"\n *ngIf=\"isDropdownOpenMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? '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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\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]=\"npReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div\n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"npReverse ? 'justify-end' : ''\"\n >\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\n *ngFor=\"let page of getDisplayedPages(); let last = last\"\n >\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(24, 34, 48, 1)\"\n >\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span\n class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\"\n >\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(npType)\"\n >\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"semibold\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[npType]\"\n [ngStyle]=\"dropdownStyleMap[npType]\"\n class=\"fixed z-100 np-dropdown 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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\"\n >\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n" }]
1571
+ }], propDecorators: { npType: [{
1573
1572
  type: Input
1574
1573
  }], totalItems: [{
1575
1574
  type: Input
1576
1575
  }], pageSize: [{
1577
1576
  type: Input
1578
- }], isReverse: [{
1577
+ }], npReverse: [{
1579
1578
  type: Input
1580
1579
  }], pageSizeChange: [{
1581
1580
  type: Output
@@ -1639,7 +1638,7 @@ class NpAlertComponent {
1639
1638
  el;
1640
1639
  renderer;
1641
1640
  _alertService;
1642
- type = 'notification';
1641
+ npType = 'notification';
1643
1642
  state = 'info';
1644
1643
  description = '';
1645
1644
  title;
@@ -1657,7 +1656,7 @@ class NpAlertComponent {
1657
1656
  }
1658
1657
  ngOnInit() {
1659
1658
  this._alertService.alert$.subscribe((data) => {
1660
- this.type = data.type ?? 'notification';
1659
+ this.npType = data.npType ?? 'notification';
1661
1660
  this.state = data.state ?? 'info';
1662
1661
  this.title = data.title;
1663
1662
  this.description = data.description;
@@ -1748,12 +1747,12 @@ class NpAlertComponent {
1748
1747
  }
1749
1748
  }
1750
1749
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NpAlertService }], target: i0.ɵɵFactoryTarget.Component });
1751
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHideDelay: "autoHideDelay", autoHide: "autoHide", isFromService: "isFromService" }, ngImport: i0, template: "<ng-container>\n <div \n class=\"np-alert flex gap-3 items-start\" \n [ngClass]=\"type\" \n [ngStyle]=\"{\n 'opacity': opacity,\n 'padding': padding,\n 'display': opacity == 0 ? 'none' : 'flex'\n }\"\n >\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
1750
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { npType: "npType", state: "state", description: "description", title: "title", message: "message", autoHideDelay: "autoHideDelay", autoHide: "autoHide", isFromService: "isFromService" }, ngImport: i0, template: "<ng-container>\n <div\n class=\"np-alert flex gap-3 items-start\"\n [ngClass]=\"npType\"\n [ngStyle]=\"{\n opacity: opacity,\n padding: padding,\n display: opacity == 0 ? 'none' : 'flex',\n }\"\n >\n <div\n class=\"icon-wrapper rounded-[10px]\"\n [ngClass]=\"state\"\n *ngIf=\"npType == 'toast'\"\n >\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div\n class=\"icon-wrapper rounded-[10px]\"\n *ngIf=\"getIconNotification().icon && npType == 'notification'\"\n >\n <i\n class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ color: getIconNotification().color }\"\n >\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\">{{\n title\n }}</np-typography>\n <button\n (click)=\"closeAlert()\"\n class=\"close-btn cursor-pointer opacity-50\"\n >\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{\n description\n }}</np-typography>\n <np-typography\n *ngIf=\"isMessageVisible\"\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n >\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"npType !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\"\n >Dismiss</np-typography\n >\n </button>\n <button\n *ngIf=\"message\"\n class=\"learn-more cursor-pointer\"\n (click)=\"showMessege()\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\"\n >Learn More</np-typography\n >\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
1752
1751
  }
1753
1752
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertComponent, decorators: [{
1754
1753
  type: Component,
1755
- args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div \n class=\"np-alert flex gap-3 items-start\" \n [ngClass]=\"type\" \n [ngStyle]=\"{\n 'opacity': opacity,\n 'padding': padding,\n 'display': opacity == 0 ? 'none' : 'flex'\n }\"\n >\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
1756
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { type: [{
1754
+ args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div\n class=\"np-alert flex gap-3 items-start\"\n [ngClass]=\"npType\"\n [ngStyle]=\"{\n opacity: opacity,\n padding: padding,\n display: opacity == 0 ? 'none' : 'flex',\n }\"\n >\n <div\n class=\"icon-wrapper rounded-[10px]\"\n [ngClass]=\"state\"\n *ngIf=\"npType == 'toast'\"\n >\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div\n class=\"icon-wrapper rounded-[10px]\"\n *ngIf=\"getIconNotification().icon && npType == 'notification'\"\n >\n <i\n class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ color: getIconNotification().color }\"\n >\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\">{{\n title\n }}</np-typography>\n <button\n (click)=\"closeAlert()\"\n class=\"close-btn cursor-pointer opacity-50\"\n >\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{\n description\n }}</np-typography>\n <np-typography\n *ngIf=\"isMessageVisible\"\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n >\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"npType !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\"\n >Dismiss</np-typography\n >\n </button>\n <button\n *ngIf=\"message\"\n class=\"learn-more cursor-pointer\"\n (click)=\"showMessege()\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\"\n >Learn More</np-typography\n >\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
1755
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { npType: [{
1757
1756
  type: Input
1758
1757
  }], state: [{
1759
1758
  type: Input
@@ -1893,15 +1892,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1893
1892
  }] } });
1894
1893
 
1895
1894
  class NpProgressBarComponent {
1896
- type = 'style-1';
1895
+ npType = 'style-1';
1897
1896
  percent = 0;
1898
1897
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1899
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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"] }] });
1898
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpProgressBarComponent, isStandalone: true, selector: "np-progress-bar", inputs: { npType: "npType", percent: "percent" }, ngImport: i0, template: "<nz-progress\n [nzPercent]=\"percent\"\n [nzShowInfo]=\"npType == 'style-2'\"\n [nzFormat]=\"customFormat\"\n nzStrokeColor=\"rgba(71, 84, 103, 1)\"\n></nz-progress>\n<np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n *ngIf=\"npType === 'style-3'\"\n class=\"flex justify-end\"\n>\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"] }] });
1900
1899
  }
1901
1900
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpProgressBarComponent, decorators: [{
1902
1901
  type: Component,
1903
- 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"] }]
1904
- }], propDecorators: { type: [{
1902
+ args: [{ selector: 'np-progress-bar', imports: [NzProgressModule, CommonModule, NpTypographyComponent], template: "<nz-progress\n [nzPercent]=\"percent\"\n [nzShowInfo]=\"npType == 'style-2'\"\n [nzFormat]=\"customFormat\"\n nzStrokeColor=\"rgba(71, 84, 103, 1)\"\n></nz-progress>\n<np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n *ngIf=\"npType === 'style-3'\"\n class=\"flex justify-end\"\n>\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"] }]
1903
+ }], propDecorators: { npType: [{
1905
1904
  type: Input
1906
1905
  }], percent: [{
1907
1906
  type: Input
@@ -1948,7 +1947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1948
1947
  }] } });
1949
1948
 
1950
1949
  class NpLoadingIndicatorComponent {
1951
- npType = 'type-1';
1950
+ npType = 'npType-1';
1952
1951
  npSize = 'sm';
1953
1952
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1954
1953
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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"] }] });
@@ -2009,25 +2008,6 @@ class NpTableComponent {
2009
2008
  get columns() {
2010
2009
  return this._columns;
2011
2010
  }
2012
- selectableType = null;
2013
- isSortable = false;
2014
- isFilterable = false;
2015
- isDeleteable = false;
2016
- isUsePagination = true;
2017
- paginationType = 'basic';
2018
- state = 'normal';
2019
- className = '';
2020
- classNameLeft = ''; // className for left fixed table
2021
- classNameRight = ''; // className for right fixed table
2022
- scrollColumnsRange = null;
2023
- scrollWidth = '';
2024
- scrollHeight = '';
2025
- isReverse = false;
2026
- showVerticalDivider = false;
2027
- deleteSelectedRows = new EventEmitter();
2028
- sortChange = new EventEmitter();
2029
- filterChange = new EventEmitter();
2030
- rowChecked = new EventEmitter();
2031
2011
  set dataSource(value) {
2032
2012
  this._dataSource =
2033
2013
  value?.map((row) => {
@@ -2044,10 +2024,10 @@ class NpTableComponent {
2044
2024
  this.currentPage = 1;
2045
2025
  this.selectAllFc.setValue(false, { emitEvent: false });
2046
2026
  this.isIndeterminateAll = false;
2047
- if (this.selectableType === 'checkbox') {
2027
+ if (this.npSelectableType === 'checkbox') {
2048
2028
  this.bindSelectAllListener();
2049
2029
  }
2050
- if (this.selectableType === 'radio') {
2030
+ if (this.npSelectableType === 'radio') {
2051
2031
  this._dataSource.forEach((row) => {
2052
2032
  row.selectFc.valueChanges.subscribe((val) => {
2053
2033
  if (val) {
@@ -2060,13 +2040,13 @@ class NpTableComponent {
2060
2040
  });
2061
2041
  });
2062
2042
  }
2063
- // Set filterListAfterSearch
2064
2043
  if (this._columns) {
2065
2044
  this._columns?.forEach(col => {
2066
- if (!col?.filterList) {
2067
- col.filterListAfterSearch = this._dataSource?.map(x => {
2068
- return x?.[col?.key] ?? null;
2069
- }).filter(y => y);
2045
+ if (!col?.filterList || col.filterList.length === 0) {
2046
+ const rawValues = this._dataSource?.map(x => x?.[col?.key]).filter(y => y !== null && y !== undefined && y !== '');
2047
+ const uniqueValues = Array.from(new Set(rawValues));
2048
+ col.filterList = uniqueValues;
2049
+ col.filterListAfterSearch = uniqueValues;
2070
2050
  }
2071
2051
  });
2072
2052
  }
@@ -2079,8 +2059,31 @@ class NpTableComponent {
2079
2059
  get pageSize() {
2080
2060
  return this._pageSize;
2081
2061
  }
2062
+ npSelectableType = null;
2063
+ npSortable = false;
2064
+ npFilterable = false;
2065
+ npDeleteable = false;
2066
+ npShowPagination = true;
2067
+ npPaginationType = 'basic';
2068
+ state = 'normal';
2069
+ npClassName = '';
2070
+ npLeftClass = ''; // npClassName for left fixed table
2071
+ npRightClass = ''; // npClassName for right fixed table
2072
+ npFixedColumnRange = null;
2073
+ npScrollWidth = '';
2074
+ npScrollHeight = '';
2075
+ npReverse = false;
2076
+ npBordered = false;
2077
+ npCustomRowTemplate;
2078
+ npCustomRowCondition;
2079
+ npDraggable = false;
2080
+ deleteSelectedRows = new EventEmitter();
2081
+ sortChange = new EventEmitter();
2082
+ filterChange = new EventEmitter();
2083
+ rowChecked = new EventEmitter();
2084
+ npRowDrop = new EventEmitter();
2082
2085
  ngAfterViewInit() {
2083
- if (this.selectableType === 'checkbox') {
2086
+ if (this.npSelectableType === 'checkbox') {
2084
2087
  this.bindSelectAllListener();
2085
2088
  }
2086
2089
  this.updatePaginationWidth();
@@ -2089,7 +2092,7 @@ class NpTableComponent {
2089
2092
  this.setupScrollSync();
2090
2093
  }
2091
2094
  ngOnInit() {
2092
- const [start, end] = this.scrollColumnsRange || [
2095
+ const [start, end] = this.npFixedColumnRange || [
2093
2096
  0,
2094
2097
  this.columns.length - 1,
2095
2098
  ];
@@ -2097,19 +2100,19 @@ class NpTableComponent {
2097
2100
  this.isAtEnd = end === this.columns.length - 1;
2098
2101
  }
2099
2102
  get fixedLeftColumns() {
2100
- if (!this.scrollColumnsRange)
2103
+ if (!this.npFixedColumnRange)
2101
2104
  return [];
2102
- return this.columns.slice(0, this.scrollColumnsRange[0]);
2105
+ return this.columns.slice(0, this.npFixedColumnRange[0]);
2103
2106
  }
2104
2107
  get scrollableColumns() {
2105
- if (!this.scrollColumnsRange)
2108
+ if (!this.npFixedColumnRange)
2106
2109
  return this.columns;
2107
- return this.columns.slice(this.scrollColumnsRange[0], this.scrollColumnsRange[1] + 1);
2110
+ return this.columns.slice(this.npFixedColumnRange[0], this.npFixedColumnRange[1] + 1);
2108
2111
  }
2109
2112
  get fixedRightColumns() {
2110
- if (!this.scrollColumnsRange)
2113
+ if (!this.npFixedColumnRange)
2111
2114
  return [];
2112
- return this.columns.slice(this.scrollColumnsRange[1] + 1);
2115
+ return this.columns.slice(this.npFixedColumnRange[1] + 1);
2113
2116
  }
2114
2117
  bindSelectAllListener() {
2115
2118
  this.selectAllSub?.unsubscribe();
@@ -2146,7 +2149,7 @@ class NpTableComponent {
2146
2149
  }
2147
2150
  get pagedData() {
2148
2151
  const filtered = this.filteredData;
2149
- if (this.isUsePagination) {
2152
+ if (this.npShowPagination) {
2150
2153
  const start = (this.currentPage - 1) * this.currentPageSize;
2151
2154
  const end = start + this.currentPageSize;
2152
2155
  return filtered.slice(start, end);
@@ -2204,7 +2207,7 @@ class NpTableComponent {
2204
2207
  this.currentPage = 1;
2205
2208
  }
2206
2209
  onChangeSelectColumn($event) {
2207
- if (this.selectableType !== 'checkbox')
2210
+ if (this.npSelectableType !== 'checkbox')
2208
2211
  return;
2209
2212
  const allSelected = this._dataSource?.every((child) => child.selectFc?.value);
2210
2213
  const someSelected = this._dataSource?.some((child) => child.selectFc?.value);
@@ -2233,13 +2236,11 @@ class NpTableComponent {
2233
2236
  this.activeFilterKey = this.activeFilterKey === key ? null : key;
2234
2237
  if (!this.searchControls[key]) {
2235
2238
  this.searchControls[key] = new FormControl('');
2236
- this.searchControls[key].valueChanges
2237
- .pipe(debounceTime(300))
2238
- .subscribe((val) => {
2239
+ this.searchControls[key].valueChanges.subscribe((val) => {
2239
2240
  this.searchKeyword[key] = val?.toLowerCase() || '';
2240
2241
  const column = this._columns?.find(x => x?.key === key);
2241
- if (column) {
2242
- column.filterListAfterSearch = column?.filterList?.filter(col => col?.toLowerCase().includes(val?.toLowerCase()));
2242
+ if (column && column.filterList) {
2243
+ column.filterListAfterSearch = column.filterList.filter(colValue => String(colValue || '').toLowerCase().includes(this.searchKeyword[key]));
2243
2244
  }
2244
2245
  });
2245
2246
  }
@@ -2256,6 +2257,9 @@ class NpTableComponent {
2256
2257
  }
2257
2258
  }, 0);
2258
2259
  }
2260
+ onClearSearch(colKey) {
2261
+ this.searchControls[colKey]?.setValue('');
2262
+ }
2259
2263
  shouldShowFilterCheck(colKey) {
2260
2264
  return (this.selectedFilters[colKey]?.size > 0 && this.activeFilterKey !== colKey);
2261
2265
  }
@@ -2322,9 +2326,95 @@ class NpTableComponent {
2322
2326
  this.activeFilterKey = null;
2323
2327
  }
2324
2328
  }
2329
+ onRowDrop(event) {
2330
+ moveItemInArray(this._dataSource, event.previousIndex, event.currentIndex);
2331
+ this.originalDataSource = [...this._dataSource];
2332
+ this.npRowDrop.emit(this._dataSource);
2333
+ }
2334
+ onDragStarted(event) {
2335
+ const tbody = event.source.dropContainer.element.nativeElement;
2336
+ const table = tbody.closest('table');
2337
+ const sourceRow = event.source.element.nativeElement;
2338
+ const root = sourceRow.closest('np-table') || document;
2339
+ if (!table) {
2340
+ return;
2341
+ }
2342
+ const previewDrag = document.querySelector('.cdk-drag-preview');
2343
+ if (!previewDrag)
2344
+ return;
2345
+ const isSplitTable = root.querySelector('.fixed-left') !== null || root.querySelector('.fixed-right') !== null;
2346
+ if (isSplitTable) {
2347
+ const fixCellSize = (cell, th) => {
2348
+ const el = cell;
2349
+ const exactWidth = th.getBoundingClientRect().width;
2350
+ el.style.width = `${exactWidth}px`;
2351
+ el.style.minWidth = `${exactWidth}px`;
2352
+ el.style.maxWidth = `${exactWidth}px`;
2353
+ el.style.boxSizing = 'border-box';
2354
+ el.style.backgroundColor = 'white';
2355
+ el.style.borderBottom = 'none';
2356
+ el.style.whiteSpace = 'nowrap';
2357
+ el.style.overflow = 'hidden';
2358
+ el.style.textOverflow = 'ellipsis';
2359
+ };
2360
+ const previewTr = previewDrag.querySelector('tr') || previewDrag;
2361
+ const tableLeft = root.querySelector('.fixed-left');
2362
+ const tableMiddle = root.querySelector('.scrollable');
2363
+ const tableRight = root.querySelector('.fixed-right');
2364
+ const rowIndex = Array.from(sourceRow.parentElement.children).indexOf(sourceRow);
2365
+ const thLeft = tableLeft ? Array.from(tableLeft.querySelectorAll('thead th')) : [];
2366
+ const thMiddle = tableMiddle ? Array.from(tableMiddle.querySelectorAll('thead th')) : [];
2367
+ const thRight = tableRight ? Array.from(tableRight.querySelectorAll('thead th')) : [];
2368
+ const existingCells = Array.from(previewTr.children);
2369
+ existingCells.forEach((cell, i) => {
2370
+ if (thLeft[i])
2371
+ fixCellSize(cell, thLeft[i]);
2372
+ });
2373
+ if (tableMiddle) {
2374
+ const middleRow = tableMiddle.querySelector(`tbody tr:nth-child(${rowIndex + 1})`);
2375
+ if (middleRow) {
2376
+ Array.from(middleRow.children).forEach((cell, i) => {
2377
+ const clone = cell.cloneNode(true);
2378
+ if (thMiddle[i])
2379
+ fixCellSize(clone, thMiddle[i]);
2380
+ previewTr.appendChild(clone);
2381
+ });
2382
+ }
2383
+ }
2384
+ if (tableRight) {
2385
+ const rightRow = tableRight.querySelector(`tbody tr:nth-child(${rowIndex + 1})`);
2386
+ if (rightRow) {
2387
+ Array.from(rightRow.children).forEach((cell, i) => {
2388
+ const clone = cell.cloneNode(true);
2389
+ if (thRight[i])
2390
+ fixCellSize(clone, thRight[i]);
2391
+ previewTr.appendChild(clone);
2392
+ });
2393
+ }
2394
+ }
2395
+ previewDrag.style.width = 'max-content';
2396
+ }
2397
+ else {
2398
+ const headers = table.querySelectorAll('thead th');
2399
+ setTimeout(() => {
2400
+ const previewCells = previewDrag.querySelectorAll('td, th');
2401
+ headers.forEach((header, index) => {
2402
+ if (previewCells[index]) {
2403
+ const exactWidth = header.getBoundingClientRect().width;
2404
+ const cell = previewCells[index];
2405
+ cell.style.width = `${exactWidth}px`;
2406
+ cell.style.minWidth = `${exactWidth}px`;
2407
+ cell.style.maxWidth = `${exactWidth}px`;
2408
+ cell.style.boxSizing = 'border-box';
2409
+ cell.style.padding = '12px';
2410
+ }
2411
+ });
2412
+ });
2413
+ }
2414
+ }
2325
2415
  setupScrollSync() {
2326
2416
  setTimeout(() => {
2327
- if (this.scrollColumnsRange && this.scrollHeight) {
2417
+ if (this.npFixedColumnRange && this.npScrollHeight) {
2328
2418
  const left = this.tableLeft?.nativeElement;
2329
2419
  const middle = this.tableMiddle?.nativeElement;
2330
2420
  const right = this.tableRight?.nativeElement;
@@ -2453,7 +2543,7 @@ class NpTableComponent {
2453
2543
  this.syncRowHeight();
2454
2544
  }
2455
2545
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2456
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", isUsePagination: "isUsePagination", paginationType: "paginationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", scrollHeight: "scrollHeight", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource", pageSize: "pageSize" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99\" \n [ngClass]=\"{\n 'np-table-shadow': scrollHeight.length > 0 && scrollHeight !== '0px',\n }\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\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 <div #tableContainer class=\"flex w-full\">\n <table \n *ngIf=\"!isAtStart\" \n class=\"np-table fixed-left z-10 {{ classNameLeft }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n >\n <thead>\n <tr>\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 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\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 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>\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 {{col?.className}}\"\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>\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 }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n class=\"border-gray-200 {{col?.className}}\"\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>\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]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n <div class=\"flex flex-col\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\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 <div \n #tableContainer \n class=\"flex w-full relative\" \n [style.max-height]=\"scrollHeight\"\n >\n <!-- Fixed Left Table -->\n <div \n #tableLeft \n *ngIf=\"!isAtStart\" \n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\"\n style=\"border-right: none;\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\n <thead class=\"sticky-header\">\n <tr>\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 <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\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 @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 </div>\n\n <!-- Scrollable Middle Table -->\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"scrollWidth\"\n [style.max-height]=\"scrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none'\n }\"\n >\n <table class=\"scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead class=\"sticky-header\">\n <tr>\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 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\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 <!-- Fixed Right Table -->\n <div \n #tableRight \n *ngIf=\"!isAtEnd\" \n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\">\n <table class=\"rounded-r-xl fixed-right z-10 {{ classNameRight }}\">\n <thead class=\"sticky-header\">\n <tr>\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 <tbody>\n @for (row of pagedData; track row) {\n <tr>\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 </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\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. <br> 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\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height: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", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
2546
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", dataSource: "dataSource", pageSize: "pageSize", npSelectableType: "npSelectableType", npSortable: "npSortable", npFilterable: "npFilterable", npDeleteable: "npDeleteable", npShowPagination: "npShowPagination", npPaginationType: "npPaginationType", state: "state", npClassName: "npClassName", npLeftClass: "npLeftClass", npRightClass: "npRightClass", npFixedColumnRange: "npFixedColumnRange", npScrollWidth: "npScrollWidth", npScrollHeight: "npScrollHeight", npReverse: "npReverse", npBordered: "npBordered", npCustomRowTemplate: "npCustomRowTemplate", npCustomRowCondition: "npCustomRowCondition", npDraggable: "npDraggable" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked", npRowDrop: "npRowDrop" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== \"error\") {\n @if (npFixedColumnRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"npScrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"npScrollHeight\"\n style=\"overflow-x: hidden\"\n >\n <table class=\"w-full mx-auto {{ npClassName }}\">\n <thead\n class=\"sticky top-0 bg-white z-99\"\n [ngClass]=\"{\n 'np-table-shadow':\n npScrollHeight.length > 0 && npScrollHeight !== '0px',\n }\"\n >\n <tr\n *ngIf=\"selectedCount > 0 && npDeleteable\"\n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-2\"\n >\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\n npType=\"secondary\"\n npSize=\"sm\"\n (click)=\"onDeleteSelected()\"\n >Delete</np-button\n >\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n *ngIf=\"\n npDraggable && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n ></th>\n\n <th\n class=\"select-column\"\n *ngIf=\"npSelectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"npSelectableType === 'checkbox'\"\n npType=\"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]=\"npBordered && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @if (state === \"loading\") {\n <tr>\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"h-[400px] w-full\"\n >\n <np-loading-indicator\n npSize=\"md\"\n npType=\"outlined\"\n ></np-loading-indicator>\n </td>\n </tr>\n } @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n [class.border-r]=\"npBordered\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n npCustomRowTemplate || null;\n context: { $implicit: row, index: i }\n \"\n ></ng-container>\n </td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n <td\n *ngIf=\"npDraggable\"\n class=\"text-center text-gray-400 border-gray-200\"\n cdkDragHandle\n >\n <i\n class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n ></i>\n </td>\n\n <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n <np-checkbox\n [npType]=\"npSelectableType\"\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\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n <tr *ngIf=\"npShowPagination\">\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n style=\"padding: 12px 0px !important\"\n >\n <div class=\"w-full px-3\">\n <np-pagination\n [npType]=\"npPaginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [npReverse]=\"npReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n } @else {\n <tr>\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"h-[400px]\"\n >\n <div\n class=\"flex flex-col gap-4 h-full items-center justify-center\"\n >\n <i\n class=\"fa-regular fa-file-circle-xmark fa-2xl\"\n style=\"color: rgba(208, 213, 221, 1)\"\n ></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (npFixedColumnRange != null && npScrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div\n *ngIf=\"selectedCount > 0 && npDeleteable\"\n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n >Delete</np-button\n >\n </div>\n <div #tableContainer class=\"flex w-full\">\n <table\n *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n class=\"np-table fixed-left z-10 {{ npLeftClass }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n }\"\n >\n <thead class=\"contents\">\n <tr>\n <th\n *ngIf=\"\n npDraggable && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n ></th>\n\n <th\n class=\"select-column\"\n *ngIf=\"\n npSelectableType !== null &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n >\n <np-checkbox\n [npType]=\"npSelectableType\"\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]=\"\n npBordered && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n #leftRow\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"\n fixedLeftColumns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n [class.border-r]=\"npBordered\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n npCustomRowTemplate || null;\n context: { $implicit: row, index: i }\n \"\n ></ng-container>\n </td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n <td\n *ngIf=\"npDraggable\"\n class=\"text-center text-gray-400 border-gray-200\"\n cdkDragHandle\n >\n <i\n class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n ></i>\n </td>\n\n <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n <np-checkbox\n [npType]=\"npSelectableType\"\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\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n [style.max-width]=\"npScrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable':\n isAtStart && !npDraggable && npSelectableType === null,\n 'rounded-r-xl border-r-midtable': isAtEnd,\n }\"\n >\n <table\n class=\"np-table scrollable min-w-fit w-full\"\n style=\"border-left: none; border-right: none\"\n >\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"scrollableColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of scrollableColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <table\n *ngIf=\"!isAtEnd\"\n class=\"np-table rounded-r-xl fixed-right z-10 {{ npLeftClass }}\"\n >\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"\n npBordered && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"fixedRightColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of fixedRightColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <div\n class=\"mt-3 w-full\"\n *ngIf=\"npShowPagination\"\n [style.width]=\"paginationWidth\"\n >\n <np-pagination\n [npType]=\"npPaginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if (npFixedColumnRange != null && npScrollHeight != \"\") {\n <div class=\"flex flex-col\">\n <div\n *ngIf=\"selectedCount > 0 && npDeleteable\"\n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n >Delete</np-button\n >\n </div>\n <div\n #tableContainer\n class=\"flex w-full relative\"\n [style.max-height]=\"npScrollHeight\"\n >\n <div\n #tableLeft\n *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\"\n [style.max-height]=\"npScrollHeight\"\n style=\"border-right: none\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ npLeftClass }}\">\n <thead class=\"sticky-header\">\n <tr>\n <th\n *ngIf=\"\n npDraggable && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n ></th>\n\n <th\n class=\"select-column\"\n *ngIf=\"\n npSelectableType !== null &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n >\n <np-checkbox\n [npType]=\"npSelectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n #leftRow\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"\n fixedLeftColumns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n [class.border-r]=\"npBordered\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n npCustomRowTemplate || null;\n context: { $implicit: row, index: i }\n \"\n ></ng-container>\n </td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n <td\n *ngIf=\"npDraggable\"\n class=\"text-center text-gray-400 border-gray-200\"\n cdkDragHandle\n >\n <i\n class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n ></i>\n </td>\n\n <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n <np-checkbox\n [npType]=\"npSelectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n @for (col of fixedLeftColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"npScrollWidth\"\n [style.max-height]=\"npScrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable':\n isAtStart && !npDraggable && npSelectableType === null,\n 'rounded-r-xl border-r-midtable': isAtEnd,\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none',\n }\"\n >\n <table\n class=\"scrollable min-w-fit w-full\"\n style=\"border-left: none; border-right: none\"\n >\n <thead class=\"sticky-header\">\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"scrollableColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of scrollableColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <div\n #tableRight\n *ngIf=\"!isAtEnd\"\n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\"\n [style.max-height]=\"npScrollHeight\"\n >\n <table class=\"rounded-r-xl fixed-right z-10 {{ npRightClass }}\">\n <thead class=\"sticky-header\">\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n }\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"fixedRightColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of fixedRightColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n </div>\n\n <div\n class=\"mt-3 w-full\"\n *ngIf=\"npShowPagination\"\n [style.width]=\"paginationWidth\"\n >\n <np-pagination\n [npType]=\"npPaginationType\"\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\n class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\"\n >\n <img src=\"assets/images/error-table.png\" alt=\"error\" />\n <div\n class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\"\n >\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"\n color: rgba(71, 84, 103, 1);\n max-width: 352px;\n text-align: center;\n \"\n >\n We had some trouble loading this page. <br />\n 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\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div\n *ngIf=\"(npSortable && !col.template) || (col.template && col.sortFn)\"\n (click)=\"onSortColumn(col)\"\n class=\"cursor-pointer\"\n >\n <i\n *ngIf=\"sortKey === col.key && sortDirection === 'asc'\"\n class=\"fa-duotone fa-solid fa-sort\"\n style=\"\n --fa-primary-color: #475467;\n --fa-secondary-color: #475467;\n --fa-secondary-opacity: 0.5;\n \"\n ></i>\n <i\n *ngIf=\"sortKey === col.key && sortDirection === 'desc'\"\n class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"\n --fa-primary-color: #475467;\n --fa-secondary-color: #475467;\n --fa-secondary-opacity: 0.5;\n \"\n ></i>\n <i\n *ngIf=\"sortKey !== col.key || !sortDirection\"\n class=\"fa-solid fa-sort\"\n style=\"color: #d0d5d3\"\n ></i>\n </div>\n\n <div\n class=\"cursor-pointer relative\"\n (click)=\"toggleFilter(col.key)\"\n *ngIf=\"\n (npFilterable && !col.template) || (col.template && col.filterFn)\n \"\n >\n <ng-container\n *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\"\n >\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span\n class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"\n ></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i\n class=\"fa-solid fa-filter\"\n [ngStyle]=\"{\n color: activeFilterKey === col.key ? '#000' : '#d0d5dd',\n }\"\n ></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 npType=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n iconRight=\"fa-thin fa-xmark\"\n (iconRightClick)=\"onClearSearch(col.key)\"\n ></np-input-field>\n <div\n class=\"flex pt-2 cursor-pointer text-gray-500\"\n (click)=\"onClearFilter(col.key)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div\n *ngFor=\"let value of col.filterListAfterSearch\"\n class=\"w-full flex items-center\"\n >\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n npType=\"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\n *ngIf=\"col.filterListAfterSearch.length === 0\"\n class=\"text-center py-[50px]\"\n >\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 [class.border-r]=\"npBordered\" class=\"border-gray-200\">\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container\n *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"\n ></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}.cdk-drag-preview{background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:table}.cdk-drag-preview .cdk-drag-handle{padding:12px;display:flex;height:100%;align-items:center;width:min-content}.cdk-drag-placeholder{opacity:.2;background-color:#f3f4f6;border:2px dashed #d1d5db}.cdk-drag-animating,tbody.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\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", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["npType", "totalItems", "pageSize", "npReverse", "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", "npClassName", "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", "formatDate", "input", "npType"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
2457
2547
  }
2458
2548
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTableComponent, decorators: [{
2459
2549
  type: Component,
@@ -2467,7 +2557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2467
2557
  NpScrollbarComponent,
2468
2558
  NpInputFieldComponent,
2469
2559
  FormsModule,
2470
- ], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99\" \n [ngClass]=\"{\n 'np-table-shadow': scrollHeight.length > 0 && scrollHeight !== '0px',\n }\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\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 <div #tableContainer class=\"flex w-full\">\n <table \n *ngIf=\"!isAtStart\" \n class=\"np-table fixed-left z-10 {{ classNameLeft }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n >\n <thead>\n <tr>\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 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\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 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>\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 {{col?.className}}\"\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>\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 }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n class=\"border-gray-200 {{col?.className}}\"\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>\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]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n <div class=\"flex flex-col\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\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 <div \n #tableContainer \n class=\"flex w-full relative\" \n [style.max-height]=\"scrollHeight\"\n >\n <!-- Fixed Left Table -->\n <div \n #tableLeft \n *ngIf=\"!isAtStart\" \n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\"\n style=\"border-right: none;\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\n <thead class=\"sticky-header\">\n <tr>\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 <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\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 @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 </div>\n\n <!-- Scrollable Middle Table -->\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"scrollWidth\"\n [style.max-height]=\"scrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none'\n }\"\n >\n <table class=\"scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead class=\"sticky-header\">\n <tr>\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 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\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 <!-- Fixed Right Table -->\n <div \n #tableRight \n *ngIf=\"!isAtEnd\" \n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\">\n <table class=\"rounded-r-xl fixed-right z-10 {{ classNameRight }}\">\n <thead class=\"sticky-header\">\n <tr>\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 <tbody>\n @for (row of pagedData; track row) {\n <tr>\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 </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\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. <br> 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\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}\n"] }]
2560
+ DragDropModule
2561
+ ], template: "@if (state !== \"error\") {\n @if (npFixedColumnRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"npScrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"npScrollHeight\"\n style=\"overflow-x: hidden\"\n >\n <table class=\"w-full mx-auto {{ npClassName }}\">\n <thead\n class=\"sticky top-0 bg-white z-99\"\n [ngClass]=\"{\n 'np-table-shadow':\n npScrollHeight.length > 0 && npScrollHeight !== '0px',\n }\"\n >\n <tr\n *ngIf=\"selectedCount > 0 && npDeleteable\"\n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-2\"\n >\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\n npType=\"secondary\"\n npSize=\"sm\"\n (click)=\"onDeleteSelected()\"\n >Delete</np-button\n >\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n *ngIf=\"\n npDraggable && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n ></th>\n\n <th\n class=\"select-column\"\n *ngIf=\"npSelectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"npSelectableType === 'checkbox'\"\n npType=\"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]=\"npBordered && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @if (state === \"loading\") {\n <tr>\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"h-[400px] w-full\"\n >\n <np-loading-indicator\n npSize=\"md\"\n npType=\"outlined\"\n ></np-loading-indicator>\n </td>\n </tr>\n } @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n [class.border-r]=\"npBordered\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n npCustomRowTemplate || null;\n context: { $implicit: row, index: i }\n \"\n ></ng-container>\n </td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n <td\n *ngIf=\"npDraggable\"\n class=\"text-center text-gray-400 border-gray-200\"\n cdkDragHandle\n >\n <i\n class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n ></i>\n </td>\n\n <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n <np-checkbox\n [npType]=\"npSelectableType\"\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\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n <tr *ngIf=\"npShowPagination\">\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n style=\"padding: 12px 0px !important\"\n >\n <div class=\"w-full px-3\">\n <np-pagination\n [npType]=\"npPaginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [npReverse]=\"npReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n } @else {\n <tr>\n <td\n [attr.colspan]=\"\n columns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"h-[400px]\"\n >\n <div\n class=\"flex flex-col gap-4 h-full items-center justify-center\"\n >\n <i\n class=\"fa-regular fa-file-circle-xmark fa-2xl\"\n style=\"color: rgba(208, 213, 221, 1)\"\n ></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (npFixedColumnRange != null && npScrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div\n *ngIf=\"selectedCount > 0 && npDeleteable\"\n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n >Delete</np-button\n >\n </div>\n <div #tableContainer class=\"flex w-full\">\n <table\n *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n class=\"np-table fixed-left z-10 {{ npLeftClass }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n }\"\n >\n <thead class=\"contents\">\n <tr>\n <th\n *ngIf=\"\n npDraggable && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n ></th>\n\n <th\n class=\"select-column\"\n *ngIf=\"\n npSelectableType !== null &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n >\n <np-checkbox\n [npType]=\"npSelectableType\"\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]=\"\n npBordered && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n #leftRow\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"\n fixedLeftColumns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n [class.border-r]=\"npBordered\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n npCustomRowTemplate || null;\n context: { $implicit: row, index: i }\n \"\n ></ng-container>\n </td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n <td\n *ngIf=\"npDraggable\"\n class=\"text-center text-gray-400 border-gray-200\"\n cdkDragHandle\n >\n <i\n class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n ></i>\n </td>\n\n <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n <np-checkbox\n [npType]=\"npSelectableType\"\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\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n [style.max-width]=\"npScrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable':\n isAtStart && !npDraggable && npSelectableType === null,\n 'rounded-r-xl border-r-midtable': isAtEnd,\n }\"\n >\n <table\n class=\"np-table scrollable min-w-fit w-full\"\n style=\"border-left: none; border-right: none\"\n >\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"scrollableColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of scrollableColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <table\n *ngIf=\"!isAtEnd\"\n class=\"np-table rounded-r-xl fixed-right z-10 {{ npLeftClass }}\"\n >\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"\n npBordered && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"fixedRightColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of fixedRightColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <div\n class=\"mt-3 w-full\"\n *ngIf=\"npShowPagination\"\n [style.width]=\"paginationWidth\"\n >\n <np-pagination\n [npType]=\"npPaginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if (npFixedColumnRange != null && npScrollHeight != \"\") {\n <div class=\"flex flex-col\">\n <div\n *ngIf=\"selectedCount > 0 && npDeleteable\"\n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\"\n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\"\n >Delete</np-button\n >\n </div>\n <div\n #tableContainer\n class=\"flex w-full relative\"\n [style.max-height]=\"npScrollHeight\"\n >\n <div\n #tableLeft\n *ngIf=\"!isAtStart || npDraggable || npSelectableType !== null\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !npDeleteable,\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\"\n [style.max-height]=\"npScrollHeight\"\n style=\"border-right: none\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ npLeftClass }}\">\n <thead class=\"sticky-header\">\n <tr>\n <th\n *ngIf=\"\n npDraggable && state !== 'loading' && _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n ></th>\n\n <th\n class=\"select-column\"\n *ngIf=\"\n npSelectableType !== null &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n >\n <np-checkbox\n [npType]=\"npSelectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n #leftRow\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"\n fixedLeftColumns.length +\n (npSelectableType !== null ? 1 : 0) +\n (npDraggable ? 1 : 0)\n \"\n class=\"px-4 py-3 font-medium text-gray-900 border-gray-200\"\n [class.border-r]=\"npBordered\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n npCustomRowTemplate || null;\n context: { $implicit: row, index: i }\n \"\n ></ng-container>\n </td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\" #leftRow>\n <td\n *ngIf=\"npDraggable\"\n class=\"text-center text-gray-400 border-gray-200\"\n cdkDragHandle\n >\n <i\n class=\"fa-solid fa-grip-dots-vertical cursor-move active:cursor-grabbing\"\n ></i>\n </td>\n\n <td class=\"select-column\" *ngIf=\"npSelectableType !== null\">\n <np-checkbox\n [npType]=\"npSelectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n @for (col of fixedLeftColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"npScrollWidth\"\n [style.max-height]=\"npScrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable':\n isAtStart && !npDraggable && npSelectableType === null,\n 'rounded-r-xl border-r-midtable': isAtEnd,\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none',\n }\"\n >\n <table\n class=\"scrollable min-w-fit w-full\"\n style=\"border-left: none; border-right: none\"\n >\n <thead class=\"sticky-header\">\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200 {{ col?.npClassName }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"scrollableColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of scrollableColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <div\n #tableRight\n *ngIf=\"!isAtEnd\"\n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\"\n [style.max-height]=\"npScrollHeight\"\n >\n <table class=\"rounded-r-xl fixed-right z-10 {{ npRightClass }}\">\n <thead class=\"sticky-header\">\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"\n npBordered &&\n state !== 'loading' &&\n _dataSource.length > 0\n \"\n class=\"border-gray-200\"\n >\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"\n ></ng-container>\n </th>\n }\n </tr>\n </thead>\n <tbody\n cdkDropList\n [cdkDropListData]=\"_dataSource\"\n (cdkDropListDropped)=\"onRowDrop($event)\"\n >\n @for (row of pagedData; track row; let i = $index) {\n @if (npCustomRowCondition && npCustomRowCondition(row, i)) {\n <tr\n cdkDrag\n (cdkDragStarted)=\"onDragStarted($event)\"\n class=\"np-custom-row\"\n style=\"background-color: #f9fafb\"\n >\n <td\n [attr.colspan]=\"fixedRightColumns.length\"\n class=\"px-4 py-3 border-gray-200\"\n [class.border-r]=\"npBordered\"\n ></td>\n </tr>\n } @else {\n <tr cdkDrag (cdkDragStarted)=\"onDragStarted($event)\">\n @for (col of fixedRightColumns; track col) {\n <ng-container\n *ngTemplateOutlet=\"\n renderCell;\n context: { row: row, col: col }\n \"\n ></ng-container>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n </div>\n\n <div\n class=\"mt-3 w-full\"\n *ngIf=\"npShowPagination\"\n [style.width]=\"paginationWidth\"\n >\n <np-pagination\n [npType]=\"npPaginationType\"\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\n class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\"\n >\n <img src=\"assets/images/error-table.png\" alt=\"error\" />\n <div\n class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\"\n >\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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"\n color: rgba(71, 84, 103, 1);\n max-width: 352px;\n text-align: center;\n \"\n >\n We had some trouble loading this page. <br />\n 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\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div\n *ngIf=\"(npSortable && !col.template) || (col.template && col.sortFn)\"\n (click)=\"onSortColumn(col)\"\n class=\"cursor-pointer\"\n >\n <i\n *ngIf=\"sortKey === col.key && sortDirection === 'asc'\"\n class=\"fa-duotone fa-solid fa-sort\"\n style=\"\n --fa-primary-color: #475467;\n --fa-secondary-color: #475467;\n --fa-secondary-opacity: 0.5;\n \"\n ></i>\n <i\n *ngIf=\"sortKey === col.key && sortDirection === 'desc'\"\n class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"\n --fa-primary-color: #475467;\n --fa-secondary-color: #475467;\n --fa-secondary-opacity: 0.5;\n \"\n ></i>\n <i\n *ngIf=\"sortKey !== col.key || !sortDirection\"\n class=\"fa-solid fa-sort\"\n style=\"color: #d0d5d3\"\n ></i>\n </div>\n\n <div\n class=\"cursor-pointer relative\"\n (click)=\"toggleFilter(col.key)\"\n *ngIf=\"\n (npFilterable && !col.template) || (col.template && col.filterFn)\n \"\n >\n <ng-container\n *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\"\n >\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span\n class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"\n ></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i\n class=\"fa-solid fa-filter\"\n [ngStyle]=\"{\n color: activeFilterKey === col.key ? '#000' : '#d0d5dd',\n }\"\n ></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 npType=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n iconRight=\"fa-thin fa-xmark\"\n (iconRightClick)=\"onClearSearch(col.key)\"\n ></np-input-field>\n <div\n class=\"flex pt-2 cursor-pointer text-gray-500\"\n (click)=\"onClearFilter(col.key)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div\n *ngFor=\"let value of col.filterListAfterSearch\"\n class=\"w-full flex items-center\"\n >\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n npType=\"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\n *ngIf=\"col.filterListAfterSearch.length === 0\"\n class=\"text-center py-[50px]\"\n >\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 [class.border-r]=\"npBordered\" class=\"border-gray-200\">\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container\n *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"\n ></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}.cdk-drag-preview{background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:table}.cdk-drag-preview .cdk-drag-handle{padding:12px;display:flex;height:100%;align-items:center;width:min-content}.cdk-drag-placeholder{opacity:.2;background-color:#f3f4f6;border:2px dashed #d1d5db}.cdk-drag-animating,tbody.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
2471
2562
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { filterIcons: [{
2472
2563
  type: ViewChildren,
2473
2564
  args: ['filterIcon']
@@ -2491,35 +2582,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2491
2582
  args: ['tableRight']
2492
2583
  }], columns: [{
2493
2584
  type: Input
2494
- }], selectableType: [{
2585
+ }], dataSource: [{
2586
+ type: Input
2587
+ }], pageSize: [{
2588
+ type: Input
2589
+ }], npSelectableType: [{
2495
2590
  type: Input
2496
- }], isSortable: [{
2591
+ }], npSortable: [{
2497
2592
  type: Input
2498
- }], isFilterable: [{
2593
+ }], npFilterable: [{
2499
2594
  type: Input
2500
- }], isDeleteable: [{
2595
+ }], npDeleteable: [{
2501
2596
  type: Input
2502
- }], isUsePagination: [{
2597
+ }], npShowPagination: [{
2503
2598
  type: Input
2504
- }], paginationType: [{
2599
+ }], npPaginationType: [{
2505
2600
  type: Input
2506
2601
  }], state: [{
2507
2602
  type: Input
2508
- }], className: [{
2603
+ }], npClassName: [{
2604
+ type: Input
2605
+ }], npLeftClass: [{
2606
+ type: Input
2607
+ }], npRightClass: [{
2608
+ type: Input
2609
+ }], npFixedColumnRange: [{
2509
2610
  type: Input
2510
- }], classNameLeft: [{
2611
+ }], npScrollWidth: [{
2511
2612
  type: Input
2512
- }], classNameRight: [{
2613
+ }], npScrollHeight: [{
2513
2614
  type: Input
2514
- }], scrollColumnsRange: [{
2615
+ }], npReverse: [{
2515
2616
  type: Input
2516
- }], scrollWidth: [{
2617
+ }], npBordered: [{
2517
2618
  type: Input
2518
- }], scrollHeight: [{
2619
+ }], npCustomRowTemplate: [{
2519
2620
  type: Input
2520
- }], isReverse: [{
2621
+ }], npCustomRowCondition: [{
2521
2622
  type: Input
2522
- }], showVerticalDivider: [{
2623
+ }], npDraggable: [{
2523
2624
  type: Input
2524
2625
  }], deleteSelectedRows: [{
2525
2626
  type: Output
@@ -2529,10 +2630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2529
2630
  type: Output
2530
2631
  }], rowChecked: [{
2531
2632
  type: Output
2532
- }], dataSource: [{
2533
- type: Input
2534
- }], pageSize: [{
2535
- type: Input
2633
+ }], npRowDrop: [{
2634
+ type: Output
2536
2635
  }], onClickOutside: [{
2537
2636
  type: HostListener,
2538
2637
  args: ['document:click', ['$event']]
@@ -2552,8 +2651,8 @@ class NpTabComponent {
2552
2651
  scrollContainerRef;
2553
2652
  tabItemRefs;
2554
2653
  tabs = [];
2555
- className = '';
2556
- subClassName = '';
2654
+ npClassName = '';
2655
+ subnpClassName = '';
2557
2656
  tabActive = '';
2558
2657
  isLink = false;
2559
2658
  npStyle = 'button';
@@ -2581,8 +2680,13 @@ class NpTabComponent {
2581
2680
  this.setTabActiveDefault();
2582
2681
  }
2583
2682
  setTabActiveDefault() {
2584
- if (this.tabActive) {
2585
- this.indexActive = this.tabs?.findIndex((x) => x.key === this.tabActive);
2683
+ if (this.tabActive !== undefined && this.tabActive !== null && this.tabActive !== '') {
2684
+ if (typeof this.tabActive === 'number') {
2685
+ this.indexActive = this.tabActive;
2686
+ }
2687
+ else {
2688
+ this.indexActive = this.tabs?.findIndex((x) => x.key === this.tabActive);
2689
+ }
2586
2690
  return;
2587
2691
  }
2588
2692
  if (!this.isLink) {
@@ -2622,10 +2726,10 @@ class NpTabComponent {
2622
2726
  if (!wrapper)
2623
2727
  return;
2624
2728
  const scrollLeft = wrapper.scrollLeft;
2625
- const scrollWidth = wrapper.scrollWidth;
2729
+ const npScrollWidth = wrapper.npScrollWidth;
2626
2730
  const clientWidth = wrapper.clientWidth;
2627
2731
  this.scrollLeftButton = scrollLeft > 0;
2628
- this.scrollRightButton = scrollLeft + clientWidth < Math.ceil(scrollWidth);
2732
+ this.scrollRightButton = scrollLeft + clientWidth < Math.ceil(npScrollWidth);
2629
2733
  };
2630
2734
  scrollLeft() {
2631
2735
  const wrapper = this.headerWrapperRef?.nativeElement;
@@ -2641,16 +2745,16 @@ class NpTabComponent {
2641
2745
  const pageWidth = wrapper.clientWidth;
2642
2746
  wrapper.scrollBy({ left: pageWidth, behavior: 'smooth' });
2643
2747
  }
2644
- ngAfterViewInit() {
2645
- const wrapper = this.headerWrapperRef?.nativeElement;
2646
- if (wrapper) {
2647
- wrapper.addEventListener('scroll', this.updateScrollButtons);
2648
- }
2649
- window.addEventListener('resize', this.updateScrollButtons);
2650
- setTimeout(() => {
2651
- this.updateScrollButtons();
2652
- }, 0);
2653
- }
2748
+ // ngAfterViewInit(): void {
2749
+ // const wrapper = this.headerWrapperRef?.nativeElement;
2750
+ // if (wrapper) {
2751
+ // wrapper.addEventListener('scroll', this.updateScrollButtons);
2752
+ // }
2753
+ // window.addEventListener('resize', this.updateScrollButtons);
2754
+ // setTimeout(() => {
2755
+ // this.updateScrollButtons();
2756
+ // }, 0);
2757
+ // }
2654
2758
  ngOnDestroy() {
2655
2759
  const wrapper = this.headerWrapperRef?.nativeElement;
2656
2760
  if (wrapper) {
@@ -2661,13 +2765,13 @@ class NpTabComponent {
2661
2765
  this.updateScrollButtons();
2662
2766
  }
2663
2767
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTabComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
2664
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", className: "className", subClassName: "subClassName", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "w-full" }, viewQueries: [{ propertyName: "headerWrapperRef", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div\n class=\"np-tab h-full relative {{className}}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n <div \n #scrollContainer class=\"flex w-fit w-full\" \n [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n <div #tabItem class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if(first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}.small{padding:4px}.small .tab-item{padding: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: "ngmodule", type: RouterModule }] });
2768
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", npClassName: "npClassName", subnpClassName: "subnpClassName", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "w-full" }, viewQueries: [{ propertyName: "headerWrapperRef", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div\n class=\"np-tab h-full relative {{ npClassName }}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{\n subnpClassName\n }}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : '',\n ]\"\n >\n <div\n #scrollContainer\n class=\"flex w-fit w-full\"\n [ngClass]=\"{ 'flex-col': npDirection === 'vertical' }\"\n >\n <ng-container\n *ngFor=\"let tab of tabs; let index = index; let first = first\"\n >\n <div\n #tabItem\n class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n flex: npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if (first) {\n @if (npStyle === \"underline\") {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if (npStyle === \"button\") {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}.small{padding:4px}.small .tab-item{padding: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: "ngmodule", type: RouterModule }] });
2665
2769
  }
2666
2770
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTabComponent, decorators: [{
2667
2771
  type: Component,
2668
2772
  args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], host: {
2669
2773
  class: 'w-full'
2670
- }, template: "<div\n class=\"np-tab h-full relative {{className}}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n <div \n #scrollContainer class=\"flex w-fit w-full\" \n [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n <div #tabItem class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if(first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}.small{padding:4px}.small .tab-item{padding:5px}\n"] }]
2774
+ }, template: "<div\n class=\"np-tab h-full relative {{ npClassName }}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{\n subnpClassName\n }}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : '',\n ]\"\n >\n <div\n #scrollContainer\n class=\"flex w-fit w-full\"\n [ngClass]=\"{ 'flex-col': npDirection === 'vertical' }\"\n >\n <ng-container\n *ngFor=\"let tab of tabs; let index = index; let first = first\"\n >\n <div\n #tabItem\n class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n flex: npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if (first) {\n @if (npStyle === \"underline\") {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if (npStyle === \"button\") {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\"\n >\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}.small{padding:4px}.small .tab-item{padding:5px}\n"] }]
2671
2775
  }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { headerWrapperRef: [{
2672
2776
  type: ViewChild,
2673
2777
  args: ['headerWrapper', { static: false }]
@@ -2679,9 +2783,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2679
2783
  args: ['tabItem']
2680
2784
  }], tabs: [{
2681
2785
  type: Input
2682
- }], className: [{
2786
+ }], npClassName: [{
2683
2787
  type: Input
2684
- }], subClassName: [{
2788
+ }], subnpClassName: [{
2685
2789
  type: Input
2686
2790
  }], tabActive: [{
2687
2791
  type: Input
@@ -2869,7 +2973,7 @@ class NpModalComponent {
2869
2973
  this.cancel.emit();
2870
2974
  }
2871
2975
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2872
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button>\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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 py-2\">\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\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\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"] }] });
2976
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button>\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nznpClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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 py-2\">\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\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\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 npType=\"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", "npClassName", "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", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
2873
2977
  }
2874
2978
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpModalComponent, decorators: [{
2875
2979
  type: Component,
@@ -2880,7 +2984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2880
2984
  NpTypographyComponent,
2881
2985
  BasicModule,
2882
2986
  NpCheckboxComponent,
2883
- ], template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button>\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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 py-2\">\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\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\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"] }]
2987
+ ], template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button>\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nznpClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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 py-2\">\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\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\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 npType=\"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"] }]
2884
2988
  }], propDecorators: { modalButton: [{
2885
2989
  type: Input
2886
2990
  }], modalTitle: [{
@@ -2969,7 +3073,7 @@ class NpConfirmTemplateComponent {
2969
3073
  this.cancel.emit();
2970
3074
  }
2971
3075
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpConfirmTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2972
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
3076
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container\n *ngIf=\"modalContent\"\n [ngTemplateOutlet]=\"modalContent\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\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 npType=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{ cancelText }}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{ okText }}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "npClassName", "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", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
2973
3077
  }
2974
3078
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpConfirmTemplateComponent, decorators: [{
2975
3079
  type: Component,
@@ -2980,7 +3084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2980
3084
  NpTypographyComponent,
2981
3085
  BasicModule,
2982
3086
  NpCheckboxComponent,
2983
- ], template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n" }]
3087
+ ], template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container\n *ngIf=\"modalContent\"\n [ngTemplateOutlet]=\"modalContent\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></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\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\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 npType=\"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" }]
2984
3088
  }], propDecorators: { modalTitle: [{
2985
3089
  type: Input
2986
3090
  }], modalDescriptions: [{