@neoprototype/neop-ui-lib 1.0.26 → 1.0.28
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.
- package/fesm2022/neoprototype-neop-ui-lib.mjs +245 -44
- package/fesm2022/neoprototype-neop-ui-lib.mjs.map +1 -1
- package/lib/components/basic/np-alert/np-alert.component.d.ts +5 -2
- package/lib/components/basic/np-breadcrumb/np-breadcrumb.component.d.ts +2 -1
- package/lib/components/basic/np-input-field/np-input-field.component.d.ts +3 -2
- package/lib/components/basic/np-input-textera/np-input-textera.component.d.ts +5 -1
- package/lib/components/basic/np-tab/np-tab.component.d.ts +8 -1
- package/lib/components/basic/np-table/np-table.component.d.ts +1 -0
- package/lib/components/modal/confirm-template/confirm-template.component.d.ts +32 -0
- package/lib/components/modal/np-dialog/np-dialog.component.d.ts +10 -0
- package/lib/services/np-alert.service.d.ts +29 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Injectable, NgModule, Component, ViewChild, Input, EventEmitter, Output, InjectionToken, Optional, Inject, ElementRef, HostListener, ViewChildren, 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 } from 'rxjs';
|
|
5
6
|
import * as i1$1 from '@angular/common';
|
|
6
7
|
import { CommonModule, DecimalPipe } from '@angular/common';
|
|
7
8
|
import { NzTypographyModule } from 'ng-zorro-antd/typography';
|
|
@@ -106,6 +107,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
106
107
|
}]
|
|
107
108
|
}], ctorParameters: () => [{ type: i1.NzModalService }] });
|
|
108
109
|
|
|
110
|
+
class NpAlertService {
|
|
111
|
+
alertSubject = new Subject();
|
|
112
|
+
alert$ = this.alertSubject.asObservable();
|
|
113
|
+
toast = {
|
|
114
|
+
success: (description, title, message) => this.emit('toast', 'success', description, title, message),
|
|
115
|
+
info: (description, title, message) => this.emit('toast', 'info', description, title, message),
|
|
116
|
+
warning: (description, title, message) => this.emit('toast', 'warning', description, title, message),
|
|
117
|
+
error: (description, title, message) => this.emit('toast', 'error', description, title, message),
|
|
118
|
+
};
|
|
119
|
+
notification = {
|
|
120
|
+
success: (description, title, message) => this.emit('notification', 'success', description, title, message),
|
|
121
|
+
info: (description, title, message) => this.emit('notification', 'info', description, title, message),
|
|
122
|
+
warning: (description, title, message) => this.emit('notification', 'warning', description, title, message),
|
|
123
|
+
error: (description, title, message) => this.emit('notification', 'error', description, title, message),
|
|
124
|
+
};
|
|
125
|
+
emit(type, state, description, title, message) {
|
|
126
|
+
this.alertSubject.next({
|
|
127
|
+
type,
|
|
128
|
+
state,
|
|
129
|
+
description,
|
|
130
|
+
title,
|
|
131
|
+
message,
|
|
132
|
+
autoHide: true,
|
|
133
|
+
isFromService: true,
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
137
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, providedIn: 'root' });
|
|
138
|
+
}
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, decorators: [{
|
|
140
|
+
type: Injectable,
|
|
141
|
+
args: [{ providedIn: 'root' }]
|
|
142
|
+
}] });
|
|
143
|
+
|
|
109
144
|
class NeopComponentModule {
|
|
110
145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
111
146
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, imports: [CommonModule] });
|
|
@@ -212,11 +247,11 @@ class NpButtonComponent {
|
|
|
212
247
|
}, 1000);
|
|
213
248
|
}
|
|
214
249
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpButtonComponent, isStandalone: true, selector: "np-button", inputs: { npType: "npType", npSize: "npSize", className: "className", isLoading: "isLoading", disabled: "disabled", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<button\n #container\n class=\"np-button ripple\n {{ npType }}\n {{ npSize }}\n {{ isLoading ? 'np-loading' : '' }}\n {{ disabled ? npType + '-disabled' : ''}}\n {{ className }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i class=\"fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var( --font-sans--font-variation-settings ); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var( --font-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-mono--font-variation-settings ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpButtonComponent, isStandalone: true, selector: "np-button", inputs: { npType: "npType", npSize: "npSize", className: "className", isLoading: "isLoading", disabled: "disabled", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<button\n #container\n class=\"np-button ripple\n {{ npType }}\n {{ npSize }}\n {{ isLoading ? 'np-loading' : '' }}\n {{ disabled ? npType + '-disabled' : ''}}\n {{ className }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i class=\"fa-duotone fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var( --font-sans--font-variation-settings ); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var( --font-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-mono--font-variation-settings ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
216
251
|
}
|
|
217
252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpButtonComponent, decorators: [{
|
|
218
253
|
type: Component,
|
|
219
|
-
args: [{ selector: 'np-button', imports: [CommonModule], template: "<button\n #container\n class=\"np-button ripple\n {{ npType }}\n {{ npSize }}\n {{ isLoading ? 'np-loading' : '' }}\n {{ disabled ? npType + '-disabled' : ''}}\n {{ className }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i class=\"fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var( --font-sans--font-variation-settings ); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var( --font-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-mono--font-variation-settings ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"] }]
|
|
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: ["@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var( --font-sans--font-variation-settings ); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var( --font-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-mono--font-variation-settings ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"] }]
|
|
220
255
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
|
|
221
256
|
type: ViewChild,
|
|
222
257
|
args: ['container', { static: true }]
|
|
@@ -334,6 +369,7 @@ class NpInputFieldComponent {
|
|
|
334
369
|
valueChange = new EventEmitter();
|
|
335
370
|
iconLeftClick = new EventEmitter();
|
|
336
371
|
iconRightClick = new EventEmitter();
|
|
372
|
+
blur = new EventEmitter();
|
|
337
373
|
onChangeValue() {
|
|
338
374
|
this.valueChange.emit(this._input?.value);
|
|
339
375
|
}
|
|
@@ -417,7 +453,7 @@ class NpInputFieldComponent {
|
|
|
417
453
|
}
|
|
418
454
|
}
|
|
419
455
|
}
|
|
420
|
-
onBlur() {
|
|
456
|
+
onBlur(event) {
|
|
421
457
|
if (this.type === 'number') {
|
|
422
458
|
const raw = this._input.value;
|
|
423
459
|
const numeric = Number(raw?.toString().replace(/,/g, ''));
|
|
@@ -433,6 +469,7 @@ class NpInputFieldComponent {
|
|
|
433
469
|
this._input.setValue(numeric);
|
|
434
470
|
}
|
|
435
471
|
}
|
|
472
|
+
this.blur.emit(event || new FocusEvent('blur'));
|
|
436
473
|
}
|
|
437
474
|
handleIconLeftClick() {
|
|
438
475
|
this.iconLeftClick.emit();
|
|
@@ -441,7 +478,7 @@ class NpInputFieldComponent {
|
|
|
441
478
|
this.iconRightClick.emit();
|
|
442
479
|
}
|
|
443
480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputFieldComponent, deps: [{ token: i1$1.DecimalPipe }, { token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputFieldComponent, isStandalone: true, selector: "np-input-field", inputs: { size: "size", label: "label", placeholder: "placeholder", iconLeft: "iconLeft", iconRight: "iconRight", hint: "hint", errorMap: "errorMap", disabled: "disabled", limitValue: "limitValue", functionHandler: "functionHandler", submitted: "submitted", digitsInfo: "digitsInfo", locale: "locale", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"'yyyy-MM-dd'\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'disabled': disabled}\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keypress)=\"handleKeyPress($event)\"\n />\n </nz-input-group>\n </ng-template>\n\n <ng-template #prefixTemplateUser>\n <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n </ng-template>\n\n <ng-template #suffixTemplateInfo>\n <i\n class=\"{{ iconRight }} icon-input\"\n *ngIf=\"type !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"type == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\">\n </span>\n </ng-template>\n\n <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
|
|
481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputFieldComponent, isStandalone: true, selector: "np-input-field", inputs: { size: "size", label: "label", placeholder: "placeholder", iconLeft: "iconLeft", iconRight: "iconRight", hint: "hint", errorMap: "errorMap", disabled: "disabled", limitValue: "limitValue", functionHandler: "functionHandler", submitted: "submitted", digitsInfo: "digitsInfo", locale: "locale", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick", 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]=\"'yyyy-MM-dd'\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'disabled': disabled}\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($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: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
|
|
445
482
|
}
|
|
446
483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputFieldComponent, decorators: [{
|
|
447
484
|
type: Component,
|
|
@@ -453,7 +490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
453
490
|
NzIconModule,
|
|
454
491
|
NpTypographyComponent,
|
|
455
492
|
NzDatePickerModule,
|
|
456
|
-
], providers: [DecimalPipe], template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"'yyyy-MM-dd'\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'disabled': disabled}\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n (keypress)=\"handleKeyPress($event)\"\n />\n </nz-input-group>\n </ng-template>\n\n <ng-template #prefixTemplateUser>\n <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n </ng-template>\n\n <ng-template #suffixTemplateInfo>\n <i\n class=\"{{ iconRight }} icon-input\"\n *ngIf=\"type !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"type == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\">\n </span>\n </ng-template>\n\n <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\n"] }]
|
|
493
|
+
], providers: [DecimalPipe], template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"'yyyy-MM-dd'\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [ngClass]=\"{ 'disabled': disabled}\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($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"] }]
|
|
457
494
|
}], ctorParameters: () => [{ type: i1$1.DecimalPipe }, { type: undefined, decorators: [{
|
|
458
495
|
type: Optional
|
|
459
496
|
}, {
|
|
@@ -498,6 +535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
498
535
|
type: Output
|
|
499
536
|
}], iconRightClick: [{
|
|
500
537
|
type: Output
|
|
538
|
+
}], blur: [{
|
|
539
|
+
type: Output
|
|
501
540
|
}] } });
|
|
502
541
|
|
|
503
542
|
class NpInputTexteraComponent {
|
|
@@ -512,6 +551,10 @@ class NpInputTexteraComponent {
|
|
|
512
551
|
value;
|
|
513
552
|
limitValue;
|
|
514
553
|
submitted = false;
|
|
554
|
+
rowSize = {
|
|
555
|
+
minRows: 4,
|
|
556
|
+
maxRows: 4,
|
|
557
|
+
};
|
|
515
558
|
_input = new FormControl('');
|
|
516
559
|
currentLength = 0;
|
|
517
560
|
set input(value) {
|
|
@@ -544,7 +587,7 @@ class NpInputTexteraComponent {
|
|
|
544
587
|
return this.defaultErrorMap?.[firstKey] || null;
|
|
545
588
|
}
|
|
546
589
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputTexteraComponent, deps: [{ token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
547
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputTexteraComponent, isStandalone: true, selector: "np-input-textera", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", value: "value", limitValue: "limitValue", submitted: "submitted", input: "input" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"
|
|
590
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputTexteraComponent, isStandalone: true, selector: "np-input-textera", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", value: "value", limitValue: "limitValue", submitted: "submitted", rowSize: "rowSize", input: "input" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"rowSize\"\n [disabled]=\"_input.disabled\"\n [formControl]=\"_input\"\n (input)=\"onTextareaInput($event)\"\n ></textarea>\n\n <div class=\"flex justify-between\">\n <div class=\"flex-col flex\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">\n {{ errorMessageFromInput }}\n </np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue\" class=\"limit-value\">\n {{ currentLength }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-hint{color:#475467}.ant-input{border-radius:4px}.ant-input:focus:not(.ant-input-disabled),.ant-input:hover:not(.ant-input-disabled){background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 0 0 4px #f0f2f4}.error{border:none!important}.error:hover,.error:focus,.error:focus-visible,.error:focus-within{box-shadow:none!important}.error .ant-input{border:1px solid rgb(253,162,155)}.error .ant-input:focus:not(.ant-input-disabled),.error .ant-input:hover:not(.ant-input-disabled){background-color:#fff;box-shadow:0 0 0 4px #f044383d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i3.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
548
591
|
}
|
|
549
592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputTexteraComponent, decorators: [{
|
|
550
593
|
type: Component,
|
|
@@ -554,7 +597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
554
597
|
NzInputModule,
|
|
555
598
|
NpTypographyComponent,
|
|
556
599
|
ReactiveFormsModule,
|
|
557
|
-
], template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"
|
|
600
|
+
], template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"rowSize\"\n [disabled]=\"_input.disabled\"\n [formControl]=\"_input\"\n (input)=\"onTextareaInput($event)\"\n ></textarea>\n\n <div class=\"flex justify-between\">\n <div class=\"flex-col flex\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">\n {{ errorMessageFromInput }}\n </np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue\" class=\"limit-value\">\n {{ currentLength }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-hint{color:#475467}.ant-input{border-radius:4px}.ant-input:focus:not(.ant-input-disabled),.ant-input:hover:not(.ant-input-disabled){background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 0 0 4px #f0f2f4}.error{border:none!important}.error:hover,.error:focus,.error:focus-visible,.error:focus-within{box-shadow:none!important}.error .ant-input{border:1px solid rgb(253,162,155)}.error .ant-input:focus:not(.ant-input-disabled),.error .ant-input:hover:not(.ant-input-disabled){background-color:#fff;box-shadow:0 0 0 4px #f044383d}\n"] }]
|
|
558
601
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
559
602
|
type: Optional
|
|
560
603
|
}, {
|
|
@@ -574,6 +617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
574
617
|
type: Input
|
|
575
618
|
}], submitted: [{
|
|
576
619
|
type: Input
|
|
620
|
+
}], rowSize: [{
|
|
621
|
+
type: Input
|
|
577
622
|
}], input: [{
|
|
578
623
|
type: Input
|
|
579
624
|
}] } });
|
|
@@ -772,7 +817,7 @@ class NpDropdownsComponent {
|
|
|
772
817
|
// NzPopoverModule,
|
|
773
818
|
NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i2$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "directive", type: i2$1.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i3$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type:
|
|
774
819
|
// NpDropdownContentMenuComponent
|
|
775
|
-
NzSelectModule }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick"] }] });
|
|
820
|
+
NzSelectModule }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }] });
|
|
776
821
|
}
|
|
777
822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDropdownsComponent, decorators: [{
|
|
778
823
|
type: Component,
|
|
@@ -1467,11 +1512,11 @@ class NpPaginationComponent {
|
|
|
1467
1512
|
}
|
|
1468
1513
|
}
|
|
1469
1514
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1515
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1471
1516
|
}
|
|
1472
1517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, decorators: [{
|
|
1473
1518
|
type: Component,
|
|
1474
|
-
args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n" }]
|
|
1519
|
+
args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n" }]
|
|
1475
1520
|
}], propDecorators: { type: [{
|
|
1476
1521
|
type: Input
|
|
1477
1522
|
}], totalItems: [{
|
|
@@ -1541,6 +1586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1541
1586
|
class NpAlertComponent {
|
|
1542
1587
|
el;
|
|
1543
1588
|
renderer;
|
|
1589
|
+
_alertService;
|
|
1544
1590
|
type = 'notification';
|
|
1545
1591
|
state = 'info';
|
|
1546
1592
|
description = '';
|
|
@@ -1549,15 +1595,24 @@ class NpAlertComponent {
|
|
|
1549
1595
|
autoHide = true;
|
|
1550
1596
|
isMessageVisible = false;
|
|
1551
1597
|
opacity = 1;
|
|
1552
|
-
|
|
1598
|
+
isFromService = false;
|
|
1599
|
+
constructor(el, renderer, _alertService) {
|
|
1553
1600
|
this.el = el;
|
|
1554
1601
|
this.renderer = renderer;
|
|
1602
|
+
this._alertService = _alertService;
|
|
1555
1603
|
}
|
|
1556
1604
|
ngOnInit() {
|
|
1605
|
+
this._alertService.alert$.subscribe((data) => {
|
|
1606
|
+
this.isFromService = data.isFromService ?? false;
|
|
1607
|
+
this.type = data.type ?? 'notification';
|
|
1608
|
+
this.state = data.state ?? 'info';
|
|
1609
|
+
this.title = data.title;
|
|
1610
|
+
this.description = data.description;
|
|
1611
|
+
this.message = data.message;
|
|
1612
|
+
this.opacity = 1;
|
|
1613
|
+
});
|
|
1557
1614
|
if (this.autoHide) {
|
|
1558
|
-
setTimeout(() =>
|
|
1559
|
-
this.startFadeOut();
|
|
1560
|
-
}, 3000);
|
|
1615
|
+
setTimeout(() => this.startFadeOut(), 3000);
|
|
1561
1616
|
}
|
|
1562
1617
|
}
|
|
1563
1618
|
startFadeOut() {
|
|
@@ -1578,7 +1633,12 @@ class NpAlertComponent {
|
|
|
1578
1633
|
this.removeSelf();
|
|
1579
1634
|
}
|
|
1580
1635
|
removeSelf() {
|
|
1581
|
-
|
|
1636
|
+
if (this.isFromService) {
|
|
1637
|
+
this.opacity = 0;
|
|
1638
|
+
}
|
|
1639
|
+
else {
|
|
1640
|
+
this.renderer.removeChild(this.el.nativeElement.parentNode, this.el.nativeElement);
|
|
1641
|
+
}
|
|
1582
1642
|
}
|
|
1583
1643
|
showMessege() {
|
|
1584
1644
|
this.isMessageVisible = !this.isMessageVisible;
|
|
@@ -1621,13 +1681,13 @@ class NpAlertComponent {
|
|
|
1621
1681
|
return { icon: '', color: '' };
|
|
1622
1682
|
}
|
|
1623
1683
|
}
|
|
1624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHide: "autoHide" }, ngImport: i0, template: "<ng-container
|
|
1684
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NpAlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHide: "autoHide" }, ngImport: i0, template: "<ng-container>\n <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\">\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);padding:16px;box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
1626
1686
|
}
|
|
1627
1687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, decorators: [{
|
|
1628
1688
|
type: Component,
|
|
1629
|
-
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container
|
|
1630
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
|
|
1689
|
+
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\">\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);padding:16px;box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
|
|
1690
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { type: [{
|
|
1631
1691
|
type: Input
|
|
1632
1692
|
}], state: [{
|
|
1633
1693
|
type: Input
|
|
@@ -1662,6 +1722,7 @@ class NpBreadcrumbComponent {
|
|
|
1662
1722
|
iconBreakDown = 'fa-slash-forward';
|
|
1663
1723
|
isBgLast = false;
|
|
1664
1724
|
isGetFromUrl = false;
|
|
1725
|
+
isShowExpand = false;
|
|
1665
1726
|
breadcrumbs = [];
|
|
1666
1727
|
isExpanded = false;
|
|
1667
1728
|
ETypeNpBreadcrumb = ETypeNpBreadcrumb;
|
|
@@ -1680,6 +1741,10 @@ class NpBreadcrumbComponent {
|
|
|
1680
1741
|
}
|
|
1681
1742
|
ngAfterViewInit() {
|
|
1682
1743
|
const dotBreadcrum = document.getElementById(this.idBreadcrum);
|
|
1744
|
+
if (this.isShowExpand) {
|
|
1745
|
+
this.isExpanded = true;
|
|
1746
|
+
return;
|
|
1747
|
+
}
|
|
1683
1748
|
if (dotBreadcrum) {
|
|
1684
1749
|
dotBreadcrum.addEventListener('mouseover', () => {
|
|
1685
1750
|
this.isExpanded = true;
|
|
@@ -1736,7 +1801,7 @@ class NpBreadcrumbComponent {
|
|
|
1736
1801
|
this.isExpanded = !this.isExpanded;
|
|
1737
1802
|
}
|
|
1738
1803
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpBreadcrumbComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
1739
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpBreadcrumbComponent, isStandalone: true, selector: "np-breadcrumb", inputs: { npType: "npType", isBorder: "isBorder", iconBreakDown: "iconBreakDown", isBgLast: "isBgLast", isGetFromUrl: "isGetFromUrl", breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n [id]=\"idBreadcrum\"\n>\n <!-- [class.border-breadcrumb]=\"isBorder\" -->\n <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n let last = $last) {\n <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n @if (isExpanded) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } @else { @if (index === 1 && breadcrumbs.length > 2) {\n <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n } @if (first || last) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } } }\n</div>\n\n<ng-template\n #contentTemplate\n let-item=\"item\"\n let-last=\"last\"\n let-isBgLast=\"isBgLast\"\n>\n <!-- [class.item-last]=\"last && isBgLast\" -->\n <div\n class=\"cursor-pointer text-[#475467]\"\n [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n (click)=\"onRedirect(item)\"\n >\n {{ item?.label }}\n </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1804
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpBreadcrumbComponent, isStandalone: true, selector: "np-breadcrumb", inputs: { npType: "npType", isBorder: "isBorder", iconBreakDown: "iconBreakDown", isBgLast: "isBgLast", isGetFromUrl: "isGetFromUrl", isShowExpand: "isShowExpand", breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n [id]=\"idBreadcrum\"\n>\n <!-- [class.border-breadcrumb]=\"isBorder\" -->\n <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n let last = $last) {\n <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n @if (isExpanded) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } @else { @if (index === 1 && breadcrumbs.length > 2) {\n <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n } @if (first || last) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } } }\n</div>\n\n<ng-template\n #contentTemplate\n let-item=\"item\"\n let-last=\"last\"\n let-isBgLast=\"isBgLast\"\n>\n <!-- [class.item-last]=\"last && isBgLast\" -->\n <div\n class=\"cursor-pointer text-[#475467]\"\n [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n (click)=\"onRedirect(item)\"\n >\n {{ item?.label }}\n </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1740
1805
|
}
|
|
1741
1806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpBreadcrumbComponent, decorators: [{
|
|
1742
1807
|
type: Component,
|
|
@@ -1751,6 +1816,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1751
1816
|
type: Input
|
|
1752
1817
|
}], isGetFromUrl: [{
|
|
1753
1818
|
type: Input
|
|
1819
|
+
}], isShowExpand: [{
|
|
1820
|
+
type: Input
|
|
1754
1821
|
}], breadcrumbs: [{
|
|
1755
1822
|
type: Input
|
|
1756
1823
|
}] } });
|
|
@@ -2093,18 +2160,7 @@ class NpTableComponent {
|
|
|
2093
2160
|
getDistinctFilteredValues(colKey) {
|
|
2094
2161
|
const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
|
|
2095
2162
|
const uniqueSet = new Set();
|
|
2096
|
-
|
|
2097
|
-
for (const key in this.selectedFilters) {
|
|
2098
|
-
if (key === colKey)
|
|
2099
|
-
continue;
|
|
2100
|
-
const selectedSet = this.selectedFilters[key];
|
|
2101
|
-
if (selectedSet && selectedSet.size > 0 && !selectedSet.has(row[key])) {
|
|
2102
|
-
return false;
|
|
2103
|
-
}
|
|
2104
|
-
}
|
|
2105
|
-
return true;
|
|
2106
|
-
});
|
|
2107
|
-
filteredExcludingCurrent.forEach((row) => {
|
|
2163
|
+
this._dataSource.forEach((row) => {
|
|
2108
2164
|
const value = row[colKey];
|
|
2109
2165
|
if (!uniqueSet.has(value) &&
|
|
2110
2166
|
String(value).toLowerCase().includes(keyword)) {
|
|
@@ -2147,6 +2203,14 @@ class NpTableComponent {
|
|
|
2147
2203
|
currentControl?.setValue(value);
|
|
2148
2204
|
}
|
|
2149
2205
|
}
|
|
2206
|
+
onClearFilter(colKey) {
|
|
2207
|
+
this.selectedFilters[colKey] = new Set();
|
|
2208
|
+
this.searchControls[colKey]?.setValue('');
|
|
2209
|
+
this.currentPage = 1;
|
|
2210
|
+
if (this.activeFilterKey === colKey) {
|
|
2211
|
+
this.activeFilterKey = null;
|
|
2212
|
+
}
|
|
2213
|
+
}
|
|
2150
2214
|
onClickOutside(event) {
|
|
2151
2215
|
const clickedInside = this.filterIcons?.some((el) => el.nativeElement.contains(event.target));
|
|
2152
2216
|
const dropdownClicked = Object.keys(this.dropdownPositionMap).some((key) => {
|
|
@@ -2164,7 +2228,7 @@ class NpTableComponent {
|
|
|
2164
2228
|
setTimeout(() => this.syncRowHeights(), 0);
|
|
2165
2229
|
}
|
|
2166
2230
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", pageSize: "pageSize", isUsePagination: "isUsePagination", panigationType: "panigationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource" }, outputs: { deleteSelectedRows: "deleteSelectedRows" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResizeWindow()" } }, viewQueries: [{ propertyName: "leftHead", first: true, predicate: ["leftHead"], descendants: true, read: ElementRef }, { propertyName: "middleHead", first: true, predicate: ["middleHead"], descendants: true, read: ElementRef }, { propertyName: "rightHead", first: true, predicate: ["rightHead"], descendants: true, read: ElementRef }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "leftRows", predicate: ["leftRow"], descendants: true, read: ElementRef }, { propertyName: "middleRows", predicate: ["middleRow"], descendants: true, read: ElementRef }, { propertyName: "rightRows", predicate: ["rightRow"], descendants: true, read: ElementRef }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n\n @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row) {\n <tr>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n @else {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"!col.headerTemplate\">\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"isSortable && !col.template\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"text\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"py-2 flex items-center\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n style =\"min-width: 100px;\"\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n <div>{{ row[col.key] }}</div>\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2231
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", pageSize: "pageSize", isUsePagination: "isUsePagination", panigationType: "panigationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource" }, outputs: { deleteSelectedRows: "deleteSelectedRows" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResizeWindow()" } }, viewQueries: [{ propertyName: "leftHead", first: true, predicate: ["leftHead"], descendants: true, read: ElementRef }, { propertyName: "middleHead", first: true, predicate: ["middleHead"], descendants: true, read: ElementRef }, { propertyName: "rightHead", first: true, predicate: ["rightHead"], descendants: true, read: ElementRef }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "leftRows", predicate: ["leftRow"], descendants: true, read: ElementRef }, { propertyName: "middleRows", predicate: ["middleRow"], descendants: true, read: ElementRef }, { propertyName: "rightRows", predicate: ["rightRow"], descendants: true, read: ElementRef }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <!-- Line -->\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n <!-- Hide line\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th> -->\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n\n @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row) {\n <tr>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n @else {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"isSortable\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"text\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n style =\"min-width: 100px;\"\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n <div>{{ row[col.key] }}</div>\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2168
2232
|
}
|
|
2169
2233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, decorators: [{
|
|
2170
2234
|
type: Component,
|
|
@@ -2178,7 +2242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2178
2242
|
NpScrollbarComponent,
|
|
2179
2243
|
NpInputFieldComponent,
|
|
2180
2244
|
FormsModule,
|
|
2181
|
-
], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n\n @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row) {\n <tr>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n @else {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"!col.headerTemplate\">\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"isSortable && !col.template\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"text\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"py-2 flex items-center\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n style =\"min-width: 100px;\"\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n <div>{{ row[col.key] }}</div>\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"] }]
|
|
2245
|
+
], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <!-- Line -->\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n <!-- Hide line\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th> -->\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n\n @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row) {\n <tr>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n @else {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"isSortable\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"text\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n style =\"min-width: 100px;\"\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n <div>{{ row[col.key] }}</div>\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"] }]
|
|
2182
2246
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leftRows: [{
|
|
2183
2247
|
type: ViewChildren,
|
|
2184
2248
|
args: ['leftRow', { read: ElementRef }]
|
|
@@ -2262,8 +2326,13 @@ class NpTabComponent {
|
|
|
2262
2326
|
tabs = [];
|
|
2263
2327
|
tabActive = '';
|
|
2264
2328
|
isLink = false;
|
|
2329
|
+
npStyle = 'button';
|
|
2330
|
+
npDirection = 'horizontal';
|
|
2331
|
+
minWidthItem;
|
|
2265
2332
|
onChange = new EventEmitter();
|
|
2266
2333
|
indexActive = 0;
|
|
2334
|
+
scrollLeftButton = false;
|
|
2335
|
+
scrollRightButton = false;
|
|
2267
2336
|
constructor(_Router, _ActivatedRoute) {
|
|
2268
2337
|
this._Router = _Router;
|
|
2269
2338
|
this._ActivatedRoute = _ActivatedRoute;
|
|
@@ -2295,26 +2364,43 @@ class NpTabComponent {
|
|
|
2295
2364
|
this.tabActive = tab.key;
|
|
2296
2365
|
this.indexActive = index;
|
|
2297
2366
|
this.onChange.emit(tab);
|
|
2298
|
-
if (
|
|
2299
|
-
this._Router.navigate([], {
|
|
2300
|
-
|
|
2301
|
-
queryParams: { tab: index },
|
|
2302
|
-
queryParamsHandling: 'merge',
|
|
2367
|
+
if (this.isLink && tab.path) {
|
|
2368
|
+
this._Router.navigate([tab.path], {
|
|
2369
|
+
queryParams: this._ActivatedRoute.snapshot.queryParams,
|
|
2303
2370
|
});
|
|
2304
2371
|
}
|
|
2372
|
+
// if (tab?.path && this.isLink) {
|
|
2373
|
+
// this._Router.navigate([], {
|
|
2374
|
+
// relativeTo: this._ActivatedRoute,
|
|
2375
|
+
// queryParams: { tab: index },
|
|
2376
|
+
// queryParamsHandling: 'merge',
|
|
2377
|
+
// });
|
|
2378
|
+
// }
|
|
2379
|
+
}
|
|
2380
|
+
scrollLeft() {
|
|
2381
|
+
console.log('scrollLeft');
|
|
2382
|
+
}
|
|
2383
|
+
scrollRight() {
|
|
2384
|
+
console.log('scrollRight');
|
|
2305
2385
|
}
|
|
2306
2386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
2307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", tabActive: "tabActive", isLink: "isLink" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "
|
|
2387
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\n class=\"np-tab h-full\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n class=\"flex justify-between np-tab-header relative\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n @for (tab of tabs; track tab; let index = $index; let first = $first) {\n <div class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, $index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if($first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n }\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
2308
2388
|
}
|
|
2309
2389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, decorators: [{
|
|
2310
2390
|
type: Component,
|
|
2311
|
-
args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], template: "
|
|
2391
|
+
args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], template: "<div\n class=\"np-tab h-full\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n class=\"flex justify-between np-tab-header relative\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n @for (tab of tabs; track tab; let index = $index; let first = $first) {\n <div class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, $index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if($first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n }\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"] }]
|
|
2312
2392
|
}], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{
|
|
2313
2393
|
type: Input
|
|
2314
2394
|
}], tabActive: [{
|
|
2315
2395
|
type: Input
|
|
2316
2396
|
}], isLink: [{
|
|
2317
2397
|
type: Input
|
|
2398
|
+
}], npStyle: [{
|
|
2399
|
+
type: Input
|
|
2400
|
+
}], npDirection: [{
|
|
2401
|
+
type: Input
|
|
2402
|
+
}], minWidthItem: [{
|
|
2403
|
+
type: Input
|
|
2318
2404
|
}], onChange: [{
|
|
2319
2405
|
type: Output
|
|
2320
2406
|
}] } });
|
|
@@ -2432,6 +2518,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2432
2518
|
}]
|
|
2433
2519
|
}] });
|
|
2434
2520
|
|
|
2521
|
+
class NpConfirmTemplateComponent {
|
|
2522
|
+
// @Input() modalButton: string | TemplateRef<any> = '';
|
|
2523
|
+
modalTitle = '';
|
|
2524
|
+
modalDescriptions = '';
|
|
2525
|
+
modalType = 'notification';
|
|
2526
|
+
modalState = 'default';
|
|
2527
|
+
useIcon = true;
|
|
2528
|
+
useCheckBox = true;
|
|
2529
|
+
cancelText = 'Cancel';
|
|
2530
|
+
okText = 'OK';
|
|
2531
|
+
modalContent;
|
|
2532
|
+
// @Input() modalFooter?: TemplateRef<any>;
|
|
2533
|
+
loadingOK = false;
|
|
2534
|
+
ok = new EventEmitter();
|
|
2535
|
+
cancel = new EventEmitter();
|
|
2536
|
+
checkbox = new EventEmitter();
|
|
2537
|
+
isVisible = false;
|
|
2538
|
+
isOkLoading = false;
|
|
2539
|
+
modalWidth = 544;
|
|
2540
|
+
checkboxControl = new FormControl(false);
|
|
2541
|
+
ngOnInit() {
|
|
2542
|
+
if (this.modalType === 'confirmation') {
|
|
2543
|
+
this.modalWidth = 400;
|
|
2544
|
+
}
|
|
2545
|
+
else if (this.modalType === 'notification') {
|
|
2546
|
+
this.modalWidth = 544;
|
|
2547
|
+
}
|
|
2548
|
+
}
|
|
2549
|
+
isTemplate(value) {
|
|
2550
|
+
return value instanceof TemplateRef;
|
|
2551
|
+
}
|
|
2552
|
+
get iconPath() {
|
|
2553
|
+
switch (this.modalState) {
|
|
2554
|
+
case 'error':
|
|
2555
|
+
return 'assets/images/error.png';
|
|
2556
|
+
case 'success':
|
|
2557
|
+
return 'assets/images/success.png';
|
|
2558
|
+
case 'warning':
|
|
2559
|
+
return 'assets/images/warning.png';
|
|
2560
|
+
case 'default':
|
|
2561
|
+
default:
|
|
2562
|
+
return 'assets/images/default.png';
|
|
2563
|
+
}
|
|
2564
|
+
}
|
|
2565
|
+
showModal() {
|
|
2566
|
+
this.isVisible = true;
|
|
2567
|
+
}
|
|
2568
|
+
handleOk() {
|
|
2569
|
+
this.ok.emit();
|
|
2570
|
+
this.isVisible = false;
|
|
2571
|
+
}
|
|
2572
|
+
handleCancel() {
|
|
2573
|
+
this.isVisible = false;
|
|
2574
|
+
this.cancel.emit();
|
|
2575
|
+
}
|
|
2576
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2577
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
|
|
2578
|
+
}
|
|
2579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, decorators: [{
|
|
2580
|
+
type: Component,
|
|
2581
|
+
args: [{ selector: 'np-confirm-template', imports: [
|
|
2582
|
+
NzModalModule,
|
|
2583
|
+
NpButtonComponent,
|
|
2584
|
+
CommonModule,
|
|
2585
|
+
NpTypographyComponent,
|
|
2586
|
+
BasicModule,
|
|
2587
|
+
NpCheckboxComponent,
|
|
2588
|
+
], 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" }]
|
|
2589
|
+
}], propDecorators: { modalTitle: [{
|
|
2590
|
+
type: Input
|
|
2591
|
+
}], modalDescriptions: [{
|
|
2592
|
+
type: Input
|
|
2593
|
+
}], modalType: [{
|
|
2594
|
+
type: Input
|
|
2595
|
+
}], modalState: [{
|
|
2596
|
+
type: Input
|
|
2597
|
+
}], useIcon: [{
|
|
2598
|
+
type: Input
|
|
2599
|
+
}], useCheckBox: [{
|
|
2600
|
+
type: Input
|
|
2601
|
+
}], cancelText: [{
|
|
2602
|
+
type: Input
|
|
2603
|
+
}], okText: [{
|
|
2604
|
+
type: Input
|
|
2605
|
+
}], modalContent: [{
|
|
2606
|
+
type: Input
|
|
2607
|
+
}], loadingOK: [{
|
|
2608
|
+
type: Input
|
|
2609
|
+
}], ok: [{
|
|
2610
|
+
type: Output
|
|
2611
|
+
}], cancel: [{
|
|
2612
|
+
type: Output
|
|
2613
|
+
}], checkbox: [{
|
|
2614
|
+
type: Output
|
|
2615
|
+
}] } });
|
|
2616
|
+
|
|
2617
|
+
class NpDialogComponent {
|
|
2618
|
+
modalRef;
|
|
2619
|
+
constructor(modalRef) {
|
|
2620
|
+
this.modalRef = modalRef;
|
|
2621
|
+
}
|
|
2622
|
+
close(result) {
|
|
2623
|
+
this.modalRef.close(result);
|
|
2624
|
+
}
|
|
2625
|
+
submit(result) {
|
|
2626
|
+
this.modalRef.close(result);
|
|
2627
|
+
}
|
|
2628
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, deps: [{ token: i1.NzModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpDialogComponent, isStandalone: true, selector: "np-dialog", ngImport: i0, template: " <!-- <np-modal\n modalButton=\"Success message\"\n modalTitle=\"Modal Title\"\n modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n modalType=\"notification\"\n modalState=\"success\"\n >\n </np-modal> -->\n", styles: [""] });
|
|
2630
|
+
}
|
|
2631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, decorators: [{
|
|
2632
|
+
type: Component,
|
|
2633
|
+
args: [{ selector: 'np-dialog', imports: [], template: " <!-- <np-modal\n modalButton=\"Success message\"\n modalTitle=\"Modal Title\"\n modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n modalType=\"notification\"\n modalState=\"success\"\n >\n </np-modal> -->\n" }]
|
|
2634
|
+
}], ctorParameters: () => [{ type: i1.NzModalRef }] });
|
|
2635
|
+
|
|
2435
2636
|
class NpModalComponent {
|
|
2436
2637
|
modalButton = '';
|
|
2437
2638
|
modalTitle = '';
|
|
@@ -2488,7 +2689,7 @@ class NpModalComponent {
|
|
|
2488
2689
|
this.cancel.emit();
|
|
2489
2690
|
}
|
|
2490
2691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<
|
|
2692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button >\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
|
|
2492
2693
|
}
|
|
2493
2694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpModalComponent, decorators: [{
|
|
2494
2695
|
type: Component,
|
|
@@ -2499,7 +2700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2499
2700
|
NpTypographyComponent,
|
|
2500
2701
|
BasicModule,
|
|
2501
2702
|
NpCheckboxComponent,
|
|
2502
|
-
], template: "<
|
|
2703
|
+
], template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button >\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"] }]
|
|
2503
2704
|
}], propDecorators: { modalButton: [{
|
|
2504
2705
|
type: Input
|
|
2505
2706
|
}], modalTitle: [{
|
|
@@ -2666,5 +2867,5 @@ class DefaultModel {
|
|
|
2666
2867
|
* Generated bundle index. Do not edit.
|
|
2667
2868
|
*/
|
|
2668
2869
|
|
|
2669
|
-
export { DefaultModel, ETypeNpBreadcrumb, E_NP_BREADCRUMB, FORM_ERROR_MAP, NeopComponentModule, NpActionBarComponent, NpAlertComponent, NpBreadcrumbComponent, NpButtonComponent, NpCheckboxComponent, NpDialogService, NpDropdownsComponent, NpInputFieldComponent, NpInputMode, NpInputTexteraComponent, NpLoadingIndicatorComponent, NpModalComponent, NpMode, NpPaginationComponent, NpProgressBarComponent, NpResizeComponent, NpScrollbarComponent, NpSelectComponent, NpSliderComponent, NpTabComponent, NpTableComponent, NpToggleComponent, NpTooltipComponent, NpTreeComponent, NpTypographyComponent, TestService, ThemeService };
|
|
2870
|
+
export { DefaultModel, ETypeNpBreadcrumb, E_NP_BREADCRUMB, FORM_ERROR_MAP, NeopComponentModule, NpActionBarComponent, NpAlertComponent, NpAlertService, NpBreadcrumbComponent, NpButtonComponent, NpCheckboxComponent, NpConfirmTemplateComponent, NpDialogComponent, NpDialogService, NpDropdownsComponent, NpInputFieldComponent, NpInputMode, NpInputTexteraComponent, NpLoadingIndicatorComponent, NpModalComponent, NpMode, NpPaginationComponent, NpProgressBarComponent, NpResizeComponent, NpScrollbarComponent, NpSelectComponent, NpSliderComponent, NpTabComponent, NpTableComponent, NpToggleComponent, NpTooltipComponent, NpTreeComponent, NpTypographyComponent, TestService, ThemeService };
|
|
2670
2871
|
//# sourceMappingURL=neoprototype-neop-ui-lib.mjs.map
|