@neoprototype/neop-ui-lib 1.1.1 → 1.1.2
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 +98 -98
- package/fesm2022/neoprototype-neop-ui-lib.mjs.map +1 -1
- package/package.json +3 -3
- package/types/neoprototype-neop-ui-lib.d.ts +904 -0
- package/index.d.ts +0 -5
- package/lib/components/basic/basic.module.d.ts +0 -12
- package/lib/components/basic/np-action-bar/np-action-bar.component.d.ts +0 -56
- package/lib/components/basic/np-alert/np-alert.component.d.ts +0 -32
- package/lib/components/basic/np-breadcrumb/np-breadcrumb.component.d.ts +0 -32
- package/lib/components/basic/np-button/np-button.component.d.ts +0 -18
- package/lib/components/basic/np-checkbox/np-checkbox.component.d.ts +0 -19
- package/lib/components/basic/np-dropdowns/np-dropdowns.component.d.ts +0 -33
- package/lib/components/basic/np-input-field/np-input-field.component.d.ts +0 -48
- package/lib/components/basic/np-input-textera/np-input-textera.component.d.ts +0 -26
- package/lib/components/basic/np-loading-indicator/np-loading-indicator.component.d.ts +0 -7
- package/lib/components/basic/np-modal/np-modal.component.d.ts +0 -34
- package/lib/components/basic/np-pagination/np-pagination.component.d.ts +0 -38
- package/lib/components/basic/np-progress-bar/np-progress-bar.component.d.ts +0 -7
- package/lib/components/basic/np-resize/np-resize.component.d.ts +0 -27
- package/lib/components/basic/np-scrollbar/np-scrollbar.component.d.ts +0 -14
- package/lib/components/basic/np-select/np-select.component.d.ts +0 -29
- package/lib/components/basic/np-slider/np-slider.component.d.ts +0 -16
- package/lib/components/basic/np-tab/np-tab.component.d.ts +0 -35
- package/lib/components/basic/np-table/np-table.component.d.ts +0 -113
- package/lib/components/basic/np-toggle/np-toggle.component.d.ts +0 -15
- package/lib/components/basic/np-tooltip/np-tooltip.component.d.ts +0 -18
- package/lib/components/basic/np-tree/np-tree.component.d.ts +0 -48
- package/lib/components/basic/np-typography/np-typography.component.d.ts +0 -15
- package/lib/components/modal/confirm-template/confirm-template.component.d.ts +0 -32
- package/lib/components/modal/np-dialog/np-dialog.component.d.ts +0 -10
- package/lib/components/neop-component.module.d.ts +0 -7
- package/lib/config/form-error-config.d.ts +0 -3
- package/lib/enum/basic/breadcrumb.enum.d.ts +0 -5
- package/lib/enum/np-breadcrumb.enum.d.ts +0 -4
- package/lib/interfaces/default.interface.d.ts +0 -5
- package/lib/interfaces/dictionary-item.interface.d.ts +0 -10
- package/lib/interfaces/np-tab.interface.d.ts +0 -5
- package/lib/interfaces/np-table.interface.d.ts +0 -15
- package/lib/interfaces/np-tree.interface.d.ts +0 -29
- package/lib/interfaces/np.actions.d.ts +0 -8
- package/lib/models/default.mode.d.ts +0 -68
- package/lib/services/np-alert.service.d.ts +0 -29
- package/lib/services/np-dialog.service.d.ts +0 -11
- package/lib/services/test.service.d.ts +0 -8
- package/lib/services/theme.service.d.ts +0 -9
- package/public-api.d.ts +0 -38
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, NgModule,
|
|
2
|
+
import { Injectable, NgModule, Input, ViewChild, Component, 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
5
|
import { Subject, debounceTime } from 'rxjs';
|
|
@@ -26,7 +26,7 @@ import * as i2$1 from 'ng-zorro-antd/menu';
|
|
|
26
26
|
import * as i1$4 from '@angular/router';
|
|
27
27
|
import { RouterModule, NavigationEnd } from '@angular/router';
|
|
28
28
|
import * as i2$2 from 'ng-zorro-antd/tooltip';
|
|
29
|
-
import {
|
|
29
|
+
import { NzTooltipModule } from 'ng-zorro-antd/tooltip';
|
|
30
30
|
import * as i1$3 from 'ng-zorro-antd/core/transition-patch';
|
|
31
31
|
import { filter } from 'rxjs/operators';
|
|
32
32
|
import * as i1$5 from 'ng-zorro-antd/progress';
|
|
@@ -46,10 +46,10 @@ class TestService {
|
|
|
46
46
|
test2() {
|
|
47
47
|
return 'test2';
|
|
48
48
|
}
|
|
49
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
50
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
50
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TestService, providedIn: 'root' });
|
|
51
51
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TestService, decorators: [{
|
|
53
53
|
type: Injectable,
|
|
54
54
|
args: [{
|
|
55
55
|
providedIn: 'root'
|
|
@@ -71,10 +71,10 @@ class ThemeService {
|
|
|
71
71
|
this.themeElement.className = themeClass;
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
75
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
75
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, decorators: [{
|
|
78
78
|
type: Injectable,
|
|
79
79
|
args: [{
|
|
80
80
|
providedIn: 'root'
|
|
@@ -97,10 +97,10 @@ class NpDialogService {
|
|
|
97
97
|
});
|
|
98
98
|
return modalRef.afterClose;
|
|
99
99
|
}
|
|
100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
101
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDialogService, deps: [{ token: i1.NzModalService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
101
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDialogService, providedIn: 'root' });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDialogService, decorators: [{
|
|
104
104
|
type: Injectable,
|
|
105
105
|
args: [{
|
|
106
106
|
providedIn: 'root',
|
|
@@ -133,20 +133,20 @@ class NpAlertService {
|
|
|
133
133
|
isFromService: true
|
|
134
134
|
});
|
|
135
135
|
}
|
|
136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
137
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
137
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertService, providedIn: 'root' });
|
|
138
138
|
}
|
|
139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertService, decorators: [{
|
|
140
140
|
type: Injectable,
|
|
141
141
|
args: [{ providedIn: 'root' }]
|
|
142
142
|
}] });
|
|
143
143
|
|
|
144
144
|
class NeopComponentModule {
|
|
145
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
146
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
147
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
145
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NeopComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
146
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: NeopComponentModule, imports: [CommonModule] });
|
|
147
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NeopComponentModule, imports: [CommonModule] });
|
|
148
148
|
}
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NeopComponentModule, decorators: [{
|
|
150
150
|
type: NgModule,
|
|
151
151
|
args: [{
|
|
152
152
|
declarations: [],
|
|
@@ -179,10 +179,10 @@ class NpTypographyComponent {
|
|
|
179
179
|
this.renderer.appendChild(this.container.nativeElement, this._ngContent);
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
182
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTypographyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpTypographyComponent, isStandalone: true, selector: "np-typography", inputs: { npType: "npType", npSize: "npSize", npWeight: "npWeight", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<p #container class=\"{{ npType }}-{{ npSize }} font-{{ npWeight }} font-text\">\n <!-- [ngClass]=\"splitClass()\" -->\n <ng-content></ng-content>\n</p>\n", styles: [".font-text{font-family:Inter,sans-serif;margin:0}.display-xl{font-size:60px;line-height:72px;letter-spacing:-2%}.display-lg{font-size:48px;line-height:60px;letter-spacing:-2%}.display-md{font-size:36px;line-height:44px;letter-spacing:-2%}.display-sm{font-size:30px;line-height:38px}.display-xs{font-size:24px;line-height:32px}.text-xl{font-size:20px;line-height:30px}.text-lg{font-size:18px;line-height:28px}.text-md{font-size:16px;line-height:24px}.text-sm{font-size:14px;line-height:20px}.text-xs{font-size:12px;line-height:18px}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: NzTypographyModule }, { kind: "ngmodule", type: CommonModule }] });
|
|
184
184
|
}
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTypographyComponent, decorators: [{
|
|
186
186
|
type: Component,
|
|
187
187
|
args: [{ selector: 'np-typography', imports: [NzTypographyModule, CommonModule], template: "<p #container class=\"{{ npType }}-{{ npSize }} font-{{ npWeight }} font-text\">\n <!-- [ngClass]=\"splitClass()\" -->\n <ng-content></ng-content>\n</p>\n", styles: [".font-text{font-family:Inter,sans-serif;margin:0}.display-xl{font-size:60px;line-height:72px;letter-spacing:-2%}.display-lg{font-size:48px;line-height:60px;letter-spacing:-2%}.display-md{font-size:36px;line-height:44px;letter-spacing:-2%}.display-sm{font-size:30px;line-height:38px}.display-xs{font-size:24px;line-height:32px}.text-xl{font-size:20px;line-height:30px}.text-lg{font-size:18px;line-height:28px}.text-md{font-size:16px;line-height:24px}.text-sm{font-size:14px;line-height:20px}.text-xs{font-size:12px;line-height:18px}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}\n"] }]
|
|
188
188
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
|
|
@@ -246,12 +246,12 @@ class NpButtonComponent {
|
|
|
246
246
|
this.renderer.removeChild(this.container.nativeElement, ripples);
|
|
247
247
|
}, 1000);
|
|
248
248
|
}
|
|
249
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
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"] }] });
|
|
249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpButtonComponent, isStandalone: true, selector: "np-button", inputs: { npType: "npType", npSize: "npSize", className: "className", isLoading: "isLoading", disabled: "disabled", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<button\n #container\n class=\"np-button ripple\n {{ npType }}\n {{ npSize }}\n {{ isLoading ? 'np-loading' : '' }}\n {{ disabled ? npType + '-disabled' : ''}}\n {{ className }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i class=\"fa-duotone fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@charset \"UTF-8\";@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% .003 325.6); --color-mauve-200: oklch(92.2% .005 325.62); --color-mauve-300: oklch(86.5% .012 325.68); --color-mauve-400: oklch(71.1% .019 323.02); --color-mauve-500: oklch(54.2% .034 322.5); --color-mauve-600: oklch(43.5% .029 321.78); --color-mauve-700: oklch(36.4% .029 323.89); --color-mauve-800: oklch(26.3% .024 320.12); --color-mauve-900: oklch(21.2% .019 322.12); --color-mauve-950: oklch(14.5% .008 326); --color-olive-50: oklch(98.8% .003 106.5); --color-olive-100: oklch(96.6% .005 106.5); --color-olive-200: oklch(93% .007 106.5); --color-olive-300: oklch(88% .011 106.6); --color-olive-400: oklch(73.7% .021 106.9); --color-olive-500: oklch(58% .031 107.3); --color-olive-600: oklch(46.6% .025 107.3); --color-olive-700: oklch(39.4% .023 107.4); --color-olive-800: oklch(28.6% .016 107.4); --color-olive-900: oklch(22.8% .013 107.4); --color-olive-950: oklch(15.3% .006 107.1); --color-mist-50: oklch(98.7% .002 197.1); --color-mist-100: oklch(96.3% .002 197.1); --color-mist-200: oklch(92.5% .005 214.3); --color-mist-300: oklch(87.2% .007 219.6); --color-mist-400: oklch(72.3% .014 214.4); --color-mist-500: oklch(56% .021 213.5); --color-mist-600: oklch(45% .017 213.2); --color-mist-700: oklch(37.8% .015 216); --color-mist-800: oklch(27.5% .011 216.9); --color-mist-900: oklch(21.8% .008 223.9); --color-mist-950: oklch(14.8% .004 228.8); --color-taupe-50: oklch(98.6% .002 67.8); --color-taupe-100: oklch(96% .002 17.2); --color-taupe-200: oklch(92.2% .005 34.3); --color-taupe-300: oklch(86.8% .007 39.5); --color-taupe-400: oklch(71.4% .014 41.2); --color-taupe-500: oklch(54.7% .021 43.1); --color-taupe-600: oklch(43.8% .017 39.3); --color-taupe-700: oklch(36.7% .016 35.7); --color-taupe-800: oklch(26.8% .011 36.5); --color-taupe-900: oklch(21.4% .009 43.1); --color-taupe-950: oklch(14.7% .004 49.3); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
251
251
|
}
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpButtonComponent, decorators: [{
|
|
253
253
|
type: Component,
|
|
254
|
-
args: [{ selector: 'np-button', imports: [CommonModule], template: "<button\n #container\n class=\"np-button ripple\n {{ npType }}\n {{ npSize }}\n {{ isLoading ? 'np-loading' : '' }}\n {{ disabled ? npType + '-disabled' : ''}}\n {{ className }}\"\n (click)=\"onClick($event)\"\n>\n <div class=\"inline items-center\">\n <i class=\"fa-duotone fa-solid fa-spinner-third fa-spin\" *ngIf=\"isLoading\"></i>\n <ng-content></ng-content>\n </div>\n</button>\n", styles: ["@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: ["@charset \"UTF-8\";@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% .003 325.6); --color-mauve-200: oklch(92.2% .005 325.62); --color-mauve-300: oklch(86.5% .012 325.68); --color-mauve-400: oklch(71.1% .019 323.02); --color-mauve-500: oklch(54.2% .034 322.5); --color-mauve-600: oklch(43.5% .029 321.78); --color-mauve-700: oklch(36.4% .029 323.89); --color-mauve-800: oklch(26.3% .024 320.12); --color-mauve-900: oklch(21.2% .019 322.12); --color-mauve-950: oklch(14.5% .008 326); --color-olive-50: oklch(98.8% .003 106.5); --color-olive-100: oklch(96.6% .005 106.5); --color-olive-200: oklch(93% .007 106.5); --color-olive-300: oklch(88% .011 106.6); --color-olive-400: oklch(73.7% .021 106.9); --color-olive-500: oklch(58% .031 107.3); --color-olive-600: oklch(46.6% .025 107.3); --color-olive-700: oklch(39.4% .023 107.4); --color-olive-800: oklch(28.6% .016 107.4); --color-olive-900: oklch(22.8% .013 107.4); --color-olive-950: oklch(15.3% .006 107.1); --color-mist-50: oklch(98.7% .002 197.1); --color-mist-100: oklch(96.3% .002 197.1); --color-mist-200: oklch(92.5% .005 214.3); --color-mist-300: oklch(87.2% .007 219.6); --color-mist-400: oklch(72.3% .014 214.4); --color-mist-500: oklch(56% .021 213.5); --color-mist-600: oklch(45% .017 213.2); --color-mist-700: oklch(37.8% .015 216); --color-mist-800: oklch(27.5% .011 216.9); --color-mist-900: oklch(21.8% .008 223.9); --color-mist-950: oklch(14.8% .004 228.8); --color-taupe-50: oklch(98.6% .002 67.8); --color-taupe-100: oklch(96% .002 17.2); --color-taupe-200: oklch(92.2% .005 34.3); --color-taupe-300: oklch(86.8% .007 39.5); --color-taupe-400: oklch(71.4% .014 41.2); --color-taupe-500: oklch(54.7% .021 43.1); --color-taupe-600: oklch(43.8% .017 39.3); --color-taupe-700: oklch(36.7% .016 35.7); --color-taupe-800: oklch(26.8% .011 36.5); --color-taupe-900: oklch(21.4% .009 43.1); --color-taupe-950: oklch(14.7% .004 49.3); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}.theme-dark{--color-primary: black;--color-primary-hover: black;--color-secondary: #ffffff;--color-secondary-hover: black;--color-secondary-hover-border: rgba(234, 236, 240, 1)}.theme-light{--color-primary: #475467;--color-border: #475467;--color-primary-hover: #344054;--color-shadown: 0px 1px 2px 0px rgba(16, 24, 40, .05);--color-secondary: #ffffff;--color-border: #d0d5dd;--color-secondary-hover: #d0d5dd;--color-secondary-hover-border: rgba(234, 236, 240, 1);--color-destructive: #d92d20;--color-destructive-text: #ffff;--color-destructive-border: #d0d5dd;--color-destructive-hover: #b42318;--color-destructive-hover-border: rgba(234, 236, 240, 1)}@theme{ --color-primary: var(--color-primary); --color-primary-hover: var(--color-primary-hover); --color-secondary: var(--color-secondary); --color-secondary-hover: var(--color-secondary-hover); --color-secondary-hover-border: var(--color-secondary-hover-border); }@theme{ --color-test: var(--color-test); --color-np-25: rgba(252, 252, 253, 1); --color-np-50: rgba(249, 250, 251, 1); --color-np-100: rgba(242, 244, 247, 1); --color-np-200: rgba(234, 236, 240, 1); --color-np-300: rgba(208, 213, 221, 1); --color-np-400: rgba(152, 162, 179, 1); --color-np-500: rgba(102, 112, 133, 1); --color-np-primary: rgba(102, 112, 133, 1); --color-np-600: rgba(71, 84, 103, 1); --color-np-700: rgba(52, 64, 84, 1); --color-np-800: rgba(24, 34, 48, 1); --color-np-900: rgba(16, 24, 40, 1); --color-np-950: rgba(12, 17, 29, 1); --animate-fade-in-scale: fade-in-scale .3s ease-out; }button{font-family:Inter,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;gap:10px;position:relative;overflow:hidden}button span{position:absolute;background-color:#fff;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;animation:animate 1s linear infinite}@keyframes animate{0%{width:0px;height:0px;opacity:.3}to{width:500px;height:500px;opacity:0}}.primary{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.primary:hover{background-color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-shadow:0 1px 2px #1018280d}.primary:focus{box-shadow:0 0 0 4px #f0f2f4;animation:spreadShadow 1.5s infinite alternate}.primary-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d;color:#98a2b3;cursor:not-allowed}.primary-disabled:hover,.primary-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.secondary{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.secondary:hover{background:var(--color-secondary-hover);border:1px solid var(--color-secondary-hover-border);box-shadow:0 1px 2px #1018280d}.secondary:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.secondary-disabled{background:#fff;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.secondary-disabled:hover,.secondary-disabled:focus{background:#fff;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}.destructive{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.destructive:hover{background:var(--color-destructive-hover);border:1px solid var(--color-destructive-hover-border);box-shadow:0 1px 2px #1018280d}.destructive:focus{box-shadow:0 0 0 4px #98a2b324;animation:spreadShadow 1.5s infinite alternate}.destructive-disabled{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:var(--color-shadown);color:#98a2b3;cursor:not-allowed!important}.destructive-disabled:hover,.destructive-disabled:focus{background:#f2f4f7;border:1px solid rgb(234,236,240);box-shadow:0 1px 2px #1018280d}::ng-deep .fa-spin{animation:fa-spin 2s infinite linear}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.warning{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.warning:hover{background:#b54708;border:1px solid rgb(181,71,8);box-shadow:0 1px 2px #1018280d}.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;box-shadow:0 0 0 4px #dc68030d,0 1px 2px #dc68030d;animation:spreadShadow 1.5s infinite alternate}.warning-disabled{opacity:.7;cursor:not-allowed!important}.warning-disabled:hover,.warning-disabled:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading{opacity:.7;cursor:not-allowed}.np-loading.primary:hover{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.primary:focus{border:1px solid var(--color-border);background-color:var(--color-primary);color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:hover{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.secondary:focus{border:1px solid var(--color-border);background:var(--color-secondary);color:#344054;box-shadow:0 1px 2px #1018280d}.np-loading.destructive:hover{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.destructive:focus{border:1px solid var(--color-border);background:var(--color-destructive);color:var(--color-destructive-text);box-shadow:0 1px 2px #1018280d}.np-loading.warning:hover{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.np-loading.warning:focus{border:1px solid rgb(220,104,3);background:#dc6803;color:#fff;box-shadow:0 1px 2px #1018280d}.xs{font-size:14px;line-height:8px;padding:6px 12px;height:28px}.sm{font-size:14px;line-height:20px;padding:8px 12px}.md{font-size:14px;padding:10px 14px;line-height:20px}.lg{font-size:16px;padding:10px 16px;line-height:24px}.bs{padding:4px}img{width:20px}\n"] }]
|
|
255
255
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
|
|
256
256
|
type: ViewChild,
|
|
257
257
|
args: ['container', { static: true }]
|
|
@@ -293,10 +293,10 @@ class NpCheckboxComponent {
|
|
|
293
293
|
this._input?.patchValue(value);
|
|
294
294
|
this.valueChange.emit(value);
|
|
295
295
|
}
|
|
296
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
297
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
296
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
297
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpCheckboxComponent, isStandalone: true, selector: "np-checkbox", inputs: { input: "input", type: "type", size: "size", npType: "npType", isDisabled: "isDisabled", groupName: "groupName", label: "label", description: "description", isIndeterminate: "isIndeterminate" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<label\n [ngClass]=\"[\n size,\n isIndeterminate ? 'indeterminate' : type,\n isDisabled ? 'disabled' : '',\n _input.value ? 'isChecked' : '',\n ]\"\n>\n <input\n [type]=\"type === 'radio' ? 'radio' : 'checkbox'\"\n [name]=\"type === 'radio' ? groupName : null\"\n [checked]=\"_input.value\"\n [disabled]=\"isDisabled\"\n (change)=\"onChange($event)\"\n />\n <span\n [ngClass]=\"[\n 'custom-checkbox',\n isIndeterminate ? 'indeterminate' : type,\n isDisabled ? 'span-disabled' : ''\n ]\"\n ></span>\n <div>\n <np-typography\n *ngIf=\"label\"\n [class]=\"'label-' + size\"\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(52, 64, 84, 1)\"\n >{{ label }}</np-typography\n >\n <np-typography\n *ngIf=\"description\"\n [class]=\"'description-' + size\"\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >{{ description }}</np-typography\n >\n </div>\n</label>\n\n<!-- <label nz-checkbox >Checkbox</label> -->\n", styles: ["input[type=checkbox],input[type=radio]{display:none}.checkbox,.indeterminate,.radio{display:flex;gap:5px}.custom-checkbox{display:flex;border:1px solid rgb(208,213,221);border-radius:2px;cursor:pointer;position:relative;transition:all .6s ease}input:checked+.custom-checkbox{background:#475467;border:1px solid rgb(71,84,103)}input:checked+.custom-checkbox:after{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%)}input:checked+.checkbox:after{min-height:16px;text-align:center;content:url(/assets/images/check.svg)}.checkbox span:hover{background:#475467;border:1px solid rgb(71,84,103);content:url(/assets/images/check.svg)}.checkbox span:focus{box-shadow:0 0 0 4px #98a2b324}input:checked+.indeterminate:after{content:url(/assets/images/minus.svg)}.indeterminate span:hover{background:#475467;border:1px solid rgb(71,84,103);content:url(/assets/images/minus.svg)}.indeterminate span:focus{box-shadow:0 0 0 4px #98a2b324}.radio .custom-checkbox{border-radius:50%}.radio .custom-checkbox:hover{background:#475467;border-color:#475467}.radio .custom-checkbox:hover:after{content:\"\";background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.radio input:checked+.custom-checkbox:after{content:\"\";background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:.36s ease-in-out 0s 1 normal backwards running antCheckboxEffect;transition:all .6s ease}.sm .custom-checkbox{display:flex;width:16px;height:16px;min-width:16px}.md .custom-checkbox{display:flex;width:20px;height:20px;min-width:20px}.sm.radio input:checked+.custom-checkbox:after,.sm.radio .custom-checkbox:hover:after{width:6px;height:6px}.md.radio input:checked+.custom-checkbox:after,.md.radio .custom-checkbox:hover:after{width:8px;height:8px}.checkbox-label,.checkbox-description{margin:0}.label-sm{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:16px;color:#344054;cursor:pointer}.label-md{font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#344054;cursor:pointer}.description-sm{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:16px;color:#475467}.description-md{font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#475467}.disabled{cursor:not-allowed!important}.disabled .checkbox-label{cursor:not-allowed}.span-disabled{cursor:not-allowed!important;background-color:#f9fafb!important;border:1px solid rgb(208,213,221)!important}.radio.disabled input:checked+.custom-checkbox{border:1px solid rgb(208,213,221);background:#f9fafb}.radio.disabled input:checked+.custom-checkbox:after{background:#d0d5dd}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
298
298
|
}
|
|
299
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpCheckboxComponent, decorators: [{
|
|
300
300
|
type: Component,
|
|
301
301
|
args: [{ selector: 'np-checkbox', imports: [
|
|
302
302
|
CommonModule,
|
|
@@ -478,10 +478,10 @@ class NpInputFieldComponent {
|
|
|
478
478
|
handleIconRightClick() {
|
|
479
479
|
this.iconRightClick.emit();
|
|
480
480
|
}
|
|
481
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
482
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
481
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpInputFieldComponent, deps: [{ token: i1$1.DecimalPipe }, { token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
482
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpInputFieldComponent, isStandalone: true, selector: "np-input-field", inputs: { size: "size", label: "label", placeholder: "placeholder", iconLeft: "iconLeft", iconRight: "iconRight", hint: "hint", errorMap: "errorMap", disabled: "disabled", limitValue: "limitValue", functionHandler: "functionHandler", submitted: "submitted", digitsInfo: "digitsInfo", locale: "locale", formatDate: "formatDate", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick", blur: "blur" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\n (keypress)=\"handleKeyPress($event)\"\n />\n </nz-input-group>\n </ng-template>\n\n <ng-template #prefixTemplateUser>\n <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n </ng-template>\n\n <ng-template #suffixTemplateInfo>\n <i\n class=\"{{ iconRight }} icon-input\"\n *ngIf=\"type !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"type == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\">\n </span>\n </ng-template>\n\n <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
|
|
483
483
|
}
|
|
484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpInputFieldComponent, decorators: [{
|
|
485
485
|
type: Component,
|
|
486
486
|
args: [{ selector: 'np-input-field', imports: [
|
|
487
487
|
CommonModule,
|
|
@@ -589,10 +589,10 @@ class NpInputTexteraComponent {
|
|
|
589
589
|
const firstKey = Object.keys(this._input.errors)[0];
|
|
590
590
|
return this.defaultErrorMap?.[firstKey] || null;
|
|
591
591
|
}
|
|
592
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
593
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
592
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpInputTexteraComponent, deps: [{ token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
593
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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: ["nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], 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"] }] });
|
|
594
594
|
}
|
|
595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpInputTexteraComponent, decorators: [{
|
|
596
596
|
type: Component,
|
|
597
597
|
args: [{ selector: 'np-input-textera', imports: [
|
|
598
598
|
CommonModule,
|
|
@@ -653,10 +653,10 @@ class NpToggleComponent {
|
|
|
653
653
|
this._input?.patchValue(value);
|
|
654
654
|
this.valueChange.emit(value);
|
|
655
655
|
}
|
|
656
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpToggleComponent, isStandalone: true, selector: "np-toggle", inputs: { input: "input", size: "size", label: "label", subLabel: "subLabel", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex gap-2\">\n <nz-switch\n [ngModel]=\"_input.value\"\n (ngModelChange)=\"toggleChecked($event)\"\n [nzDisabled]=\"disabled\"\n [nzSize]=\"size === 'sm' ? 'small' : 'default'\"\n ></nz-switch>\n <div class=\"flex flex-col justify-center\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label leading-none\"\n [class.input-label-checked]=\"_input.value\"\n >{{ label }}</np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" *ngIf=\"subLabel\" class=\"input-subLabel\"\n [class.input-label-checked]=\"_input.value\">{{ subLabel }}</np-typography>\n </div>\n</div>\n", styles: ["::ng-deep .ant-switch{background-color:#f2f4f7}::ng-deep .ant-switch:focus{box-shadow:0 0 0 4px #98a2b333}::ng-deep .ant-switch:focus:hover{box-shadow:0 0 0 4px #98a2b333}::ng-deep .ant-switch-checked{background-color:#475467}::ng-deep .ant-switch-checked:hover{background-color:#344054}.input-label{color:#344054}.input-subLabel{color:#475467}nz-switch{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i3$1.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
658
658
|
}
|
|
659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpToggleComponent, decorators: [{
|
|
660
660
|
type: Component,
|
|
661
661
|
args: [{ selector: 'np-toggle', imports: [
|
|
662
662
|
CommonModule,
|
|
@@ -706,10 +706,10 @@ class NpSelectComponent {
|
|
|
706
706
|
onChangeValue() {
|
|
707
707
|
this.valueChange.emit(this._input?.value);
|
|
708
708
|
}
|
|
709
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
709
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
710
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpSelectComponent, isStandalone: true, selector: "np-select", inputs: { npType: "npType", className: "className", label: "label", hint: "hint", placeHolder: "placeHolder", labelTemplate: "labelTemplate", valueTemplate: "valueTemplate", isAllowClear: "isAllowClear", iconPrefixClass: "iconPrefixClass", mode: "mode", listItem: "listItem", input: "input" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1 np-select {{ className }}\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n <div class=\"relative {{ npType }} \" [class.add-prefix-icon]=\"iconPrefixClass\">\n <nz-select\n [nzPlaceHolder]=\"placeHolder\"\n class=\"w-full\"\n [formControl]=\"_input\"\n [nzShowSearch]=\"true\"\n [nzAllowClear]=\"isAllowClear\"\n [nzMode]=\"mode\"\n [nzCustomTemplate]=\"valueTemplate ?? defaultTemplate\"\n (ngModelChange)=\"onChangeValue()\"\n >\n @for (item of listItem; track item) {\n <nz-option\n nzCustomContent\n [nzLabel]=\"item?.label\"\n [nzValue]=\"item?.value\"\n >\n @if (labelTemplate) {\n <ng-container\n *ngTemplateOutlet=\"labelTemplate; context: { item: item }\"\n ></ng-container>\n } @else {\n <div class=\"flex justify-between\">\n <div>{{ item?.label }}</div>\n @if(mode === NpMode.DEFAULT) {\n <div class=\"icon-check\"><i class=\"fa-light fa-check\"></i></div>\n }\n </div>\n }\n </nz-option>\n }\n </nz-select>\n <ng-template #defaultTemplate let-selected>\n {{ selected.nzLabel }}\n </ng-template>\n <div class=\"prefix-icon absolute\">\n <i class=\"{{ iconPrefixClass }}\"></i>\n </div>\n </div>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n</div>\n\n<!-- <nz-select\n nzMode=\"multiple\"\n nzPlaceHolder=\"Please select\"\n [(ngModel)]=\"value\"\n class=\"w-full\"\n >\n @for (item of listItem; track item) {\n <nz-option [nzLabel]=\"item?.label\" [nzValue]=\"item?.value\"></nz-option>\n }\n </nz-select> -->\n", styles: ["::ng-deep .np-select .prefix-icon{display:none}::ng-deep .np-select .ant-select .ant-select-selector{border-radius:8px}::ng-deep .np-select .ant-select .ant-select-selector:focus{box-shadow:0 0 0 4px #98a2b324}::ng-deep .np-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{box-shadow:0 0 0 4px #98a2b324}::ng-deep .np-select .ant-select-multiple .ant-select-selection-item-remove{margin-left:5px;margin-top:1px}::ng-deep .np-select .add-prefix-icon .ant-select-single .ant-select-selection-search .ant-select-selection-search-input{margin-left:28px}::ng-deep .np-select .add-prefix-icon .ant-select-selection-search .ant-select-selection-search-input{min-height:100%}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selection-search{margin-left:0}::ng-deep .np-select .add-prefix-icon .prefix-icon{display:block}::ng-deep .np-select .add-prefix-icon .ant-select-selection-placeholder{padding-left:8px}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selection-placeholder{padding-left:28px}::ng-deep .np-select .add-prefix-icon .ant-select-single .ant-select-selector{padding-left:30px}::ng-deep .np-select .add-prefix-icon .ant-select-multiple .ant-select-selector{padding-left:38px}::ng-deep .np-select .add-prefix-icon .ant-select-selection-item{padding-left:8px}::ng-deep .np-select .ant-select-multiple .ant-select-selection-item{background:#fff;border-radius:6px;margin:0 6px 0 0;padding-left:10px;padding-right:10px}::ng-deep .np-select .sm .prefix-icon{top:10px;left:14px}::ng-deep .np-select .sm .ant-select .ant-select-selector{padding-top:5px;padding-bottom:5px;min-height:40px}::ng-deep .np-select .md .prefix-icon{top:14px;left:14px}::ng-deep .np-select .md .ant-select .ant-select-selector{padding-top:7px;padding-bottom:7px;min-height:44px}::ng-deep .ant-select-dropdown{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px}::ng-deep .ant-select-dropdown .icon-check{display:none}::ng-deep .ant-select-item-option-selected:not(.ant-select-item-option-disabled){background-color:#f9fafb}::ng-deep .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .icon-check{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }] });
|
|
711
711
|
}
|
|
712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpSelectComponent, decorators: [{
|
|
713
713
|
type: Component,
|
|
714
714
|
args: [{ selector: 'np-select', imports: [
|
|
715
715
|
CommonModule,
|
|
@@ -817,14 +817,14 @@ class NpDropdownsComponent {
|
|
|
817
817
|
this.filteredList = matchedItems;
|
|
818
818
|
}
|
|
819
819
|
}
|
|
820
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
821
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
820
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDropdownsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
821
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", className: "className", value: "value", useSearch: "useSearch", alwaysOpen: "alwaysOpen", placement: "placement", list: "list" }, outputs: { valueChange: "valueChange", visible: "visible" }, ngImport: i0, template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ className }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n <i *ngIf=\"selectedItem?.classIcon\" class=\"{{ selectedItem?.classIcon }}\"></i>\n {{ selectedItem?.label || value }}\n @if (npType === 'icon') {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n type=\"string\"\n placeholder=\"Search\"\n iconLeft=\"fa-regular fa-magnifying-glass\"\n iconRight=\"fa-solid fa-xmark-large\"\n [input]=\"searchControl\"\n (iconRightClick)=\"onRightIconClick()\"\n ></np-input-field>\n </div>\n @for (item of filteredList; track item) {\n <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n ></ng-container>\n }\n </ul>\n\n <ng-template #contentMenu let-item=\"item\">\n @if (item?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!item?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </li>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n ></ng-container>\n }\n </ng-template>\n\n <ng-template #contentSubMenuTemplate let-item=\"item\">\n <li nz-submenu [nzTitle]=\"submenuTitle\">\n <ng-template #submenuTitle>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild of item?.childrens; track itemChild) { @if\n (itemChild?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!itemChild?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </li>\n } @else {\n\n <!-- Start Fix temp when not use recursive template -->\n <li nz-submenu [nzTitle]=\"submenuTitle2\">\n <ng-template #submenuTitle2>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: itemChild2 }\n \"\n ></ng-container>\n </li>\n }\n </ul>\n </li>\n <!-- End Fix temp when not use recursive template -->\n\n <!-- <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n ></ng-container> -->\n } }\n </ul>\n </li>\n </ng-template>\n\n <ng-template #contentTemplate let-item=\"item\">\n <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n {{ item?.label }}\n </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type:
|
|
822
822
|
// NzPopoverModule,
|
|
823
|
-
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.
|
|
823
|
+
NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i2$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "directive", type: i2$1.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i3$3.NzDropdownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzArrow", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type:
|
|
824
824
|
// NpDropdownContentMenuComponent
|
|
825
825
|
NzSelectModule }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }] });
|
|
826
826
|
}
|
|
827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
827
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDropdownsComponent, decorators: [{
|
|
828
828
|
type: Component,
|
|
829
829
|
args: [{ selector: 'np-dropdowns', imports: [
|
|
830
830
|
CommonModule,
|
|
@@ -893,14 +893,14 @@ class NpTooltipComponent {
|
|
|
893
893
|
? 'rgba(255, 255, 255, 1)'
|
|
894
894
|
: 'rgba(16, 24, 40, 1)';
|
|
895
895
|
}
|
|
896
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
897
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
896
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTooltipComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
897
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpTooltipComponent, isStandalone: true, selector: "np-tooltip", inputs: { type: "type", text: "text", descriptions: "descriptions", position: "position", tooltipVisible: "tooltipVisible", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n #container\n class=\"h-full\"\n [nzTooltipTitle]=\"customTooltip\"\n [nzTooltipPlacement]=\"position\"\n nzTooltipTrigger=\"hover\"\n [nzTooltipVisible]='tooltipVisible'\n nzTooltipOverlayClassName=\"tooltip-class\"\n nz-button\n nz-tooltip\n [nzTooltipColor]=\"tooltipColor\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #customTooltip>\n <div class=\"custom-tooltip\">\n <np-typography\n npType=\"text\"\n npSize=\"xs\"\n npWeight=\"semibold\"\n [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n >{{ text }}</np-typography\n >\n <np-typography\n npType=\"text\"\n npSize=\"xs\"\n npWeight=\"medium\"\n [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n >{{ descriptions }}</np-typography\n >\n </div>\n</ng-template>\n", styles: [".custom-tooltip{box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;padding:6px 8px;border-radius:8px}::ng-deep .ant-tooltip-inner{padding:0;border-radius:8px;display:flex;align-items:center}::ng-deep .tooltip-class .ant-tooltip-arrow{display:block!important}::ng-deep .ant-tooltip-placement-top.tooltip-class .ant-tooltip-arrow{transform:translateY(95%) translate(-50%)}::ng-deep .ant-tooltip-placement-topLeft .ant-tooltip-arrow{transform:translateY(94%)}\n"], dependencies: [{ kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i1$3.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i2$2.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
898
898
|
}
|
|
899
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
899
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTooltipComponent, decorators: [{
|
|
900
900
|
type: Component,
|
|
901
901
|
args: [{ selector: 'np-tooltip', imports: [
|
|
902
902
|
NzButtonModule,
|
|
903
|
-
|
|
903
|
+
NzTooltipModule,
|
|
904
904
|
CommonModule,
|
|
905
905
|
NpTypographyComponent,
|
|
906
906
|
], template: "<div\n #container\n class=\"h-full\"\n [nzTooltipTitle]=\"customTooltip\"\n [nzTooltipPlacement]=\"position\"\n nzTooltipTrigger=\"hover\"\n [nzTooltipVisible]='tooltipVisible'\n nzTooltipOverlayClassName=\"tooltip-class\"\n nz-button\n nz-tooltip\n [nzTooltipColor]=\"tooltipColor\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #customTooltip>\n <div class=\"custom-tooltip\">\n <np-typography\n npType=\"text\"\n npSize=\"xs\"\n npWeight=\"semibold\"\n [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n >{{ text }}</np-typography\n >\n <np-typography\n npType=\"text\"\n npSize=\"xs\"\n npWeight=\"medium\"\n [ngStyle]=\"{ color: type === 'primary' ? 'rgba(52, 64, 84, 1)' : 'rgba(255, 255, 255, 1)' }\"\n >{{ descriptions }}</np-typography\n >\n </div>\n</ng-template>\n", styles: [".custom-tooltip{box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;padding:6px 8px;border-radius:8px}::ng-deep .ant-tooltip-inner{padding:0;border-radius:8px;display:flex;align-items:center}::ng-deep .tooltip-class .ant-tooltip-arrow{display:block!important}::ng-deep .ant-tooltip-placement-top.tooltip-class .ant-tooltip-arrow{transform:translateY(95%) translate(-50%)}::ng-deep .ant-tooltip-placement-topLeft .ant-tooltip-arrow{transform:translateY(94%)}\n"] }]
|
|
@@ -1161,10 +1161,10 @@ class NpActionBarComponent {
|
|
|
1161
1161
|
const visibleIcons = Math.ceil(containerWidth / (iconWidth + gap));
|
|
1162
1162
|
return visibleIcons * (iconWidth + gap);
|
|
1163
1163
|
}
|
|
1164
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1164
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1165
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n <div #resizeContainer class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n <button\n *ngIf=\"canPrevious\"\n (click)=\"scrollLeft()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isPreviousDisable,\n 'cursor-pointer': !isPreviousDisable,\n\n }\"\n >\n <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n </button>\n\n <div\n #scrollWrapper\n class=\"flex w-full no-scrollbar scroll-smooth\"\n [ngClass]=\"{\n 'mx-3': compressedActions.length === 0 && !canPrevious,\n 'ms-3': !canPrevious && compressedActions.length > 0,\n 'overflow-x-auto': isOverflowing,\n }\"\n [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n >\n <ng-container *ngFor=\"let action of unCompressedActions2\">\n <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n <button\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n </button>\n </np-tooltip>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"canNext\"\n (click)=\"scrollRight()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isNextDisable,\n 'cursor-pointer': !isNextDisable,\n }\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n\n <np-tooltip\n *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n text=\"More actions\"\n class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n [ngClass]=\"{\n 'bg-gray-100': isMoreOpen,\n 'bg-transparent': !isMoreOpen,\n }\"\n >\n <button\n #triggerBtn\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"showMoreActions()\"\n >\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n </np-tooltip>\n </div>\n</div>\n\n<div\n *ngIf=\"isMoreOpen\"\n class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n [ngStyle]=\"dropdownStyles\"\n>\n <ng-container *ngFor=\"let action of compressedActions\">\n <button\n class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n {{ action.label }}\n </button>\n </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTooltipComponent, selector: "np-tooltip", inputs: ["type", "text", "descriptions", "position", "tooltipVisible", "ngContent"] }] });
|
|
1166
1166
|
}
|
|
1167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpActionBarComponent, decorators: [{
|
|
1168
1168
|
type: Component,
|
|
1169
1169
|
args: [{ selector: 'np-action-bar', imports: [CommonModule, NpTooltipComponent], template: "<div class=\"relative flex w-full justify-center items-center\">\n <div #resizeContainer class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n <button\n *ngIf=\"canPrevious\"\n (click)=\"scrollLeft()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isPreviousDisable,\n 'cursor-pointer': !isPreviousDisable,\n\n }\"\n >\n <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n </button>\n\n <div\n #scrollWrapper\n class=\"flex w-full no-scrollbar scroll-smooth\"\n [ngClass]=\"{\n 'mx-3': compressedActions.length === 0 && !canPrevious,\n 'ms-3': !canPrevious && compressedActions.length > 0,\n 'overflow-x-auto': isOverflowing,\n }\"\n [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n >\n <ng-container *ngFor=\"let action of unCompressedActions2\">\n <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n <button\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n </button>\n </np-tooltip>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"canNext\"\n (click)=\"scrollRight()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isNextDisable,\n 'cursor-pointer': !isNextDisable,\n }\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n\n <np-tooltip\n *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n text=\"More actions\"\n class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n [ngClass]=\"{\n 'bg-gray-100': isMoreOpen,\n 'bg-transparent': !isMoreOpen,\n }\"\n >\n <button\n #triggerBtn\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"showMoreActions()\"\n >\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n </np-tooltip>\n </div>\n</div>\n\n<div\n *ngIf=\"isMoreOpen\"\n class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n [ngStyle]=\"dropdownStyles\"\n>\n <ng-container *ngFor=\"let action of compressedActions\">\n <button\n class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n {{ action.label }}\n </button>\n </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"] }]
|
|
1170
1170
|
}], propDecorators: { actions: [{
|
|
@@ -1348,10 +1348,10 @@ class NpTreeComponent {
|
|
|
1348
1348
|
'is-last': isLast,
|
|
1349
1349
|
};
|
|
1350
1350
|
}
|
|
1351
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1352
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { type: "type", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", className: "className", list: "list", input: "input", itemActiveId: "itemActiveId", useLine: "useLine" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ng-template\n #wrapWithLevel\n let-content\n let-level=\"level\"\n let-max=\"max\"\n let-isLastByLevel=\"isLastByLevel\"\n let-hasParentByLevel=\"hasParentByLevel\"\n let-isLine=\"isLine\"\n>\n <div\n [ngClass]=\"[\n 'tree-line',\n 'level-' + level,\n isLine ? '' : 'no-line',\n isLastByLevel?.[level] ? 'is-last' : '',\n hasParentByLevel?.[level] ? 'has-parent' : '',\n expandPosition === 'right' ? 'expand-right' : '',\n ]\"\n >\n @if (level < max) {\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: content,\n level: level + 1,\n max: max,\n isLastByLevel: isLastByLevel,\n hasParentByLevel: hasParentByLevel,\n isLine: isLine\n }\n \"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n @for (item of visibleNodes; track item; let isLast = $last) {\n <ng-template #treeNodeContent>\n <div\n class=\"tree-node\"\n [ngClass]=\"[\n itemHasChildren(item) ? 'has-children' : '',\n item.parentId ? 'has-parent' : ''\n ]\"\n >\n <div\n class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n [class.tree-node-selected]=\"item?.id === itemActiveId\"\n [routerLink]=\"item.path ? item.path : null\"\n [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n >\n <div class=\"flex gap-1 items-center\">\n @if (expandPosition === 'left') {\n @if (itemHasChildren(item)) {\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\">\n <i\n class=\"fa-solid fa-caret-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n } @else {\n <div class=\"w-[15px] h-[14px]\"></div>\n }\n }\n\n <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n @if ( type === 'checkbox' ) {\n <np-checkbox\n [input]=\"item.isChecked\"\n [type]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n } @if (type === 'icon') {\n <i\n class=\"fa-light\"\n [ngClass]=\"\n item?.childrens?.length\n ? item?.isExpanded\n ? item?.iconExpanded\n : item?.iconCollapsed\n : item?.iconLeaf\n \"\n ></i>\n }\n\n <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n </div>\n </div>\n\n <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n @if ((item?.actions?.length ?? 0) > 0){\n <np-action-bar\n class=\"w-full flex justify-end\"\n ngClass=\"\n {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n (click)=\"item.path ? $event.stopPropagation() : null\"\n >\n </np-action-bar>\n }\n @if (expandPosition === 'right')\n {\n @if (itemHasChildren(item)){\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\" className=\"flex w-[17px]\">\n <i\n class=\"fa-solid fa-chevron-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n }\n @else {\n <div class=\"w-[17px]\"></div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: treeNodeContent,\n level: 0,\n max: item.level ?? 0,\n isLastByLevel: item.isLastByLevel,\n hasParentByLevel: item.hasParentByLevel,\n isLine: useLine\n }\n \"\n ></ng-container>\n }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NpActionBarComponent, selector: "np-action-bar", inputs: ["actions", "data", "notCompressMin", "isNotResponsive"] }] });
|
|
1351
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1352
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { type: "type", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", className: "className", list: "list", input: "input", itemActiveId: "itemActiveId", useLine: "useLine" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ng-template\n #wrapWithLevel\n let-content\n let-level=\"level\"\n let-max=\"max\"\n let-isLastByLevel=\"isLastByLevel\"\n let-hasParentByLevel=\"hasParentByLevel\"\n let-isLine=\"isLine\"\n>\n <div\n [ngClass]=\"[\n 'tree-line',\n 'level-' + level,\n isLine ? '' : 'no-line',\n isLastByLevel?.[level] ? 'is-last' : '',\n hasParentByLevel?.[level] ? 'has-parent' : '',\n expandPosition === 'right' ? 'expand-right' : '',\n ]\"\n >\n @if (level < max) {\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: content,\n level: level + 1,\n max: max,\n isLastByLevel: isLastByLevel,\n hasParentByLevel: hasParentByLevel,\n isLine: isLine\n }\n \"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n @for (item of visibleNodes; track item; let isLast = $last) {\n <ng-template #treeNodeContent>\n <div\n class=\"tree-node\"\n [ngClass]=\"[\n itemHasChildren(item) ? 'has-children' : '',\n item.parentId ? 'has-parent' : ''\n ]\"\n >\n <div\n class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n [class.tree-node-selected]=\"item?.id === itemActiveId\"\n [routerLink]=\"item.path ? item.path : null\"\n [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n >\n <div class=\"flex gap-1 items-center\">\n @if (expandPosition === 'left') {\n @if (itemHasChildren(item)) {\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\">\n <i\n class=\"fa-solid fa-caret-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n } @else {\n <div class=\"w-[15px] h-[14px]\"></div>\n }\n }\n\n <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n @if ( type === 'checkbox' ) {\n <np-checkbox\n [input]=\"item.isChecked\"\n [type]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n } @if (type === 'icon') {\n <i\n class=\"fa-light\"\n [ngClass]=\"\n item?.childrens?.length\n ? item?.isExpanded\n ? item?.iconExpanded\n : item?.iconCollapsed\n : item?.iconLeaf\n \"\n ></i>\n }\n\n <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n </div>\n </div>\n\n <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n @if ((item?.actions?.length ?? 0) > 0){\n <np-action-bar\n class=\"w-full flex justify-end\"\n ngClass=\"\n {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n (click)=\"item.path ? $event.stopPropagation() : null\"\n >\n </np-action-bar>\n }\n @if (expandPosition === 'right')\n {\n @if (itemHasChildren(item)){\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand($event, item)\" className=\"flex w-[17px]\">\n <i\n class=\"fa-solid fa-chevron-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n }\n @else {\n <div class=\"w-[17px]\"></div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: treeNodeContent,\n level: 0,\n max: item.level ?? 0,\n isLastByLevel: item.isLastByLevel,\n hasParentByLevel: item.hasParentByLevel,\n isLine: useLine\n }\n \"\n ></ng-container>\n }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NpActionBarComponent, selector: "np-action-bar", inputs: ["actions", "data", "notCompressMin", "isNotResponsive"] }] });
|
|
1353
1353
|
}
|
|
1354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTreeComponent, decorators: [{
|
|
1355
1355
|
type: Component,
|
|
1356
1356
|
args: [{ selector: 'np-tree', imports: [
|
|
1357
1357
|
CommonModule,
|
|
@@ -1563,12 +1563,12 @@ class NpPaginationComponent {
|
|
|
1563
1563
|
this.isDropdownOpenMap[this.type] = false;
|
|
1564
1564
|
}
|
|
1565
1565
|
}
|
|
1566
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1567
|
-
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-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\"> \n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\"\n >\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1566
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1567
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\"> \n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\"\n >\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1568
1568
|
}
|
|
1569
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpPaginationComponent, decorators: [{
|
|
1570
1570
|
type: Component,
|
|
1571
|
-
args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\"> \n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\"\n >\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n" }]
|
|
1571
|
+
args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center flex-1 space-x-2\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\"> \n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div \n class=\"flex items-center w-full flex-1\"\n [ngClass]=\"isReverse ? 'justify-end' : ''\"\n >\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 np-dropdown mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n" }]
|
|
1572
1572
|
}], propDecorators: { type: [{
|
|
1573
1573
|
type: Input
|
|
1574
1574
|
}], totalItems: [{
|
|
@@ -1618,10 +1618,10 @@ class NpScrollbarComponent {
|
|
|
1618
1618
|
this.renderer.appendChild(this.container.nativeElement, this._ngContent);
|
|
1619
1619
|
}
|
|
1620
1620
|
}
|
|
1621
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1621
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpScrollbarComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpScrollbarComponent, isStandalone: true, selector: "np-scrollbar", inputs: { width: "width", height: "height", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n #container\n class=\"custom-scrollbar overflow-auto\"\n [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1623
1623
|
}
|
|
1624
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1624
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpScrollbarComponent, decorators: [{
|
|
1625
1625
|
type: Component,
|
|
1626
1626
|
args: [{ selector: 'np-scrollbar', imports: [CommonModule], template: "<div\n #container\n class=\"custom-scrollbar overflow-auto\"\n [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
1627
1627
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
|
|
@@ -1747,10 +1747,10 @@ class NpAlertComponent {
|
|
|
1747
1747
|
return { icon: '', color: '' };
|
|
1748
1748
|
}
|
|
1749
1749
|
}
|
|
1750
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1751
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1750
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NpAlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1751
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHideDelay: "autoHideDelay", autoHide: "autoHide", isFromService: "isFromService" }, ngImport: i0, template: "<ng-container>\n <div \n class=\"np-alert flex gap-3 items-start\" \n [ngClass]=\"type\" \n [ngStyle]=\"{\n 'opacity': opacity,\n 'padding': padding,\n 'display': opacity == 0 ? 'none' : 'flex'\n }\"\n >\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
1752
1752
|
}
|
|
1753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpAlertComponent, decorators: [{
|
|
1754
1754
|
type: Component,
|
|
1755
1755
|
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div \n class=\"np-alert flex gap-3 items-start\" \n [ngClass]=\"type\" \n [ngStyle]=\"{\n 'opacity': opacity,\n 'padding': padding,\n 'display': opacity == 0 ? 'none' : 'flex'\n }\"\n >\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
|
|
1756
1756
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { type: [{
|
|
@@ -1870,10 +1870,10 @@ class NpBreadcrumbComponent {
|
|
|
1870
1870
|
onExpand() {
|
|
1871
1871
|
this.isExpanded = !this.isExpanded;
|
|
1872
1872
|
}
|
|
1873
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1874
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1873
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpBreadcrumbComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
1874
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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"] }] });
|
|
1875
1875
|
}
|
|
1876
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpBreadcrumbComponent, decorators: [{
|
|
1877
1877
|
type: Component,
|
|
1878
1878
|
args: [{ selector: 'np-breadcrumb', imports: [CommonModule], template: "<div\n class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n [id]=\"idBreadcrum\"\n>\n <!-- [class.border-breadcrumb]=\"isBorder\" -->\n <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n let last = $last) {\n <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n @if (isExpanded) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } @else { @if (index === 1 && breadcrumbs.length > 2) {\n <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n } @if (first || last) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } } }\n</div>\n\n<ng-template\n #contentTemplate\n let-item=\"item\"\n let-last=\"last\"\n let-isBgLast=\"isBgLast\"\n>\n <!-- [class.item-last]=\"last && isBgLast\" -->\n <div\n class=\"cursor-pointer text-[#475467]\"\n [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n (click)=\"onRedirect(item)\"\n >\n {{ item?.label }}\n </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"] }]
|
|
1879
1879
|
}], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { npType: [{
|
|
@@ -1895,10 +1895,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1895
1895
|
class NpProgressBarComponent {
|
|
1896
1896
|
type = 'style-1';
|
|
1897
1897
|
percent = 0;
|
|
1898
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1899
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1899
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpProgressBarComponent, isStandalone: true, selector: "np-progress-bar", inputs: { type: "type", percent: "percent" }, ngImport: i0, template: "<nz-progress\n [nzPercent]=\"percent\"\n [nzShowInfo]=\"type == 'style-2'\"\n [nzFormat]=\"customFormat\"\n nzStrokeColor=\"rgba(71, 84, 103, 1)\"\n></nz-progress>\n<np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"type === 'style-3'\" class=\"flex justify-end\">\n {{ percent }}%\n</np-typography>\n\n<ng-template #customFormat>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n {{ percent }}%\n </np-typography>\n</ng-template>\n", styles: ["::ng-deep .ant-progress-inner{background-color:#eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: NzProgressModule }, { kind: "component", type: i1$5.NzProgressComponent, selector: "nz-progress", inputs: ["nzShowInfo", "nzWidth", "nzStrokeColor", "nzSize", "nzFormat", "nzSuccessPercent", "nzPercent", "nzStrokeWidth", "nzGapDegree", "nzStatus", "nzType", "nzGapPosition", "nzStrokeLinecap", "nzSteps"], exportAs: ["nzProgress"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
1900
1900
|
}
|
|
1901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpProgressBarComponent, decorators: [{
|
|
1902
1902
|
type: Component,
|
|
1903
1903
|
args: [{ selector: 'np-progress-bar', imports: [NzProgressModule, CommonModule, NpTypographyComponent], template: "<nz-progress\n [nzPercent]=\"percent\"\n [nzShowInfo]=\"type == 'style-2'\"\n [nzFormat]=\"customFormat\"\n nzStrokeColor=\"rgba(71, 84, 103, 1)\"\n></nz-progress>\n<np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"type === 'style-3'\" class=\"flex justify-end\">\n {{ percent }}%\n</np-typography>\n\n<ng-template #customFormat>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\">\n {{ percent }}%\n </np-typography>\n</ng-template>\n", styles: ["::ng-deep .ant-progress-inner{background-color:#eaecf0}\n"] }]
|
|
1904
1904
|
}], propDecorators: { type: [{
|
|
@@ -1923,10 +1923,10 @@ class NpSliderComponent {
|
|
|
1923
1923
|
isDisabled = false;
|
|
1924
1924
|
isFloating = false;
|
|
1925
1925
|
valuesChange = new EventEmitter();
|
|
1926
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1927
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1926
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpSliderComponent, isStandalone: true, selector: "np-slider", inputs: { values: "values", min: "min", max: "max", step: "step", tooltipVisible: "tooltipVisible", isDisabled: "isDisabled", isFloating: "isFloating" }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<nz-slider\n nzRange\n [(ngModel)]=\"values\"\n [nzDisabled]=\"isDisabled\"\n [nzMin]=\"min\"\n [nzMax]=\"max\"\n [nzStep]=\"step\"\n [nzTipFormatter]=\"tooltipTemplate\"\n [nzTooltipVisible]=\"tooltipVisible\"\n >\n</nz-slider>\n\n<ng-template #tooltipTemplate let-value>\n <div [ngClass]=\"isFloating ? 'tooltip-class-floating' : 'tooltip-class'\">\n <np-typography npSize=\"sm\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(16, 24, 40, 1);\">\n {{value}} %\n </np-typography>\n </div>\n</ng-template>\n\n\n", styles: ["::ng-deep .ant-tooltip:has(.tooltip-class){padding:0}::ng-deep .ant-slider-rail{background-color:#eaecf0;height:8px;border-radius:4px}::ng-deep .ant-slider-track{height:8px;background-color:#475467}::ng-deep .ant-slider-handle{width:24px;height:24px;margin-top:-8px;border:1.5px solid rgb(71,84,103);background-color:#fff}::ng-deep .ant-tooltip-placement-right,::ng-deep .ant-tooltip-placement-left{padding:0 10px}::ng-deep .ant-tooltip-arrow{display:none!important}::ng-deep .ant-tooltip-inner{background:none;box-shadow:none}::ng-deep .ant-slider:hover .ant-slider-track{background-color:#475467}::ng-deep .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){border-color:#475467}::ng-deep .ant-slider:hover .ant-slider-rail{background-color:#eaecf0}::ng-deep .ant-slider:focus .ant-slider-handle:not(.ant-tooltip-open){box-shadow:0 0 0 4px #d0d5dd}.tooltip-class-floating{background-color:#fff;padding:6px 8px;border-radius:8px;border:1px solid rgb(234,236,240)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzSliderModule }, { kind: "component", type: i2$3.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzDefaultValue", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1928
1928
|
}
|
|
1929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpSliderComponent, decorators: [{
|
|
1930
1930
|
type: Component,
|
|
1931
1931
|
args: [{ selector: 'np-slider', standalone: true, imports: [FormsModule, NzSliderModule, NpTypographyComponent, CommonModule], template: "<nz-slider\n nzRange\n [(ngModel)]=\"values\"\n [nzDisabled]=\"isDisabled\"\n [nzMin]=\"min\"\n [nzMax]=\"max\"\n [nzStep]=\"step\"\n [nzTipFormatter]=\"tooltipTemplate\"\n [nzTooltipVisible]=\"tooltipVisible\"\n >\n</nz-slider>\n\n<ng-template #tooltipTemplate let-value>\n <div [ngClass]=\"isFloating ? 'tooltip-class-floating' : 'tooltip-class'\">\n <np-typography npSize=\"sm\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(16, 24, 40, 1);\">\n {{value}} %\n </np-typography>\n </div>\n</ng-template>\n\n\n", styles: ["::ng-deep .ant-tooltip:has(.tooltip-class){padding:0}::ng-deep .ant-slider-rail{background-color:#eaecf0;height:8px;border-radius:4px}::ng-deep .ant-slider-track{height:8px;background-color:#475467}::ng-deep .ant-slider-handle{width:24px;height:24px;margin-top:-8px;border:1.5px solid rgb(71,84,103);background-color:#fff}::ng-deep .ant-tooltip-placement-right,::ng-deep .ant-tooltip-placement-left{padding:0 10px}::ng-deep .ant-tooltip-arrow{display:none!important}::ng-deep .ant-tooltip-inner{background:none;box-shadow:none}::ng-deep .ant-slider:hover .ant-slider-track{background-color:#475467}::ng-deep .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){border-color:#475467}::ng-deep .ant-slider:hover .ant-slider-rail{background-color:#eaecf0}::ng-deep .ant-slider:focus .ant-slider-handle:not(.ant-tooltip-open){box-shadow:0 0 0 4px #d0d5dd}.tooltip-class-floating{background-color:#fff;padding:6px 8px;border-radius:8px;border:1px solid rgb(234,236,240)}\n"] }]
|
|
1932
1932
|
}], propDecorators: { values: [{
|
|
@@ -1950,10 +1950,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1950
1950
|
class NpLoadingIndicatorComponent {
|
|
1951
1951
|
npType = 'type-1';
|
|
1952
1952
|
npSize = 'sm';
|
|
1953
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1954
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1953
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpLoadingIndicatorComponent, isStandalone: true, selector: "np-loading-indicator", inputs: { npType: "npType", npSize: "npSize" }, ngImport: i0, template: "<div class=\"flex flex-col items-center gap-2\" [ngClass]=\"npSize\">\n <i\n *ngIf=\"npType === 'outlined'\"\n class=\"fa-duotone fa-solid fa-spinner-third fa-spin\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #f2f4f7; --fa-secondary-opacity: 1;\">\n </i>\n <div *ngIf=\"npType === 'filled'\" class=\"solid-loader\"></div>\n\n <np-typography [npSize]=\"npSize\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Loading...\n </np-typography>\n</div>\n\n\n", styles: [".sm .fa-spin{font-size:28px;-webkit-text-stroke:1px currentColor}.sm .solid-loader{width:28px;height:28px;border:4px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.sm .solid-loader:before,.sm .solid-loader:after{width:4px;height:4px}.sm .solid-loader:before{top:0;left:-1px}.sm .solid-loader:after{top:0;right:-1px}.md .fa-spin{font-size:48px;-webkit-text-stroke:1px currentColor}.md .solid-loader{width:48px;height:48px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.md .solid-loader:before,.md .solid-loader:after{width:6px;height:6px}.md .solid-loader:before{top:0;left:0}.md .solid-loader:after{top:0;right:0}.lg .fa-spin{font-size:56px;-webkit-text-stroke:0px currentColor}.lg .solid-loader{width:56px;height:56px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.lg .solid-loader:before,.lg .solid-loader:after{width:6px;height:6px}.lg .solid-loader:before{top:2px;left:1px}.lg .solid-loader:after{top:2px;right:1px}.xl .fa-spin{font-size:58px;-webkit-text-stroke:1px currentColor}.xl .solid-loader{width:58px;height:58px;border:8px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.xl .solid-loader:before,.xl .solid-loader:after{width:8px;height:8px}.xl .solid-loader:before{top:0;left:-1px}.xl .solid-loader:after{top:0;right:-1px}.solid-loader{position:relative;animation:spin 2s linear infinite}.solid-loader:before,.solid-loader:after{content:\"\";position:absolute;background-color:#475467;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
1955
1955
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpLoadingIndicatorComponent, decorators: [{
|
|
1957
1957
|
type: Component,
|
|
1958
1958
|
args: [{ selector: 'np-loading-indicator', imports: [NzSpinModule, NzIconModule, CommonModule, NpTypographyComponent], template: "<div class=\"flex flex-col items-center gap-2\" [ngClass]=\"npSize\">\n <i\n *ngIf=\"npType === 'outlined'\"\n class=\"fa-duotone fa-solid fa-spinner-third fa-spin\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #f2f4f7; --fa-secondary-opacity: 1;\">\n </i>\n <div *ngIf=\"npType === 'filled'\" class=\"solid-loader\"></div>\n\n <np-typography [npSize]=\"npSize\" npType=\"text\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Loading...\n </np-typography>\n</div>\n\n\n", styles: [".sm .fa-spin{font-size:28px;-webkit-text-stroke:1px currentColor}.sm .solid-loader{width:28px;height:28px;border:4px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.sm .solid-loader:before,.sm .solid-loader:after{width:4px;height:4px}.sm .solid-loader:before{top:0;left:-1px}.sm .solid-loader:after{top:0;right:-1px}.md .fa-spin{font-size:48px;-webkit-text-stroke:1px currentColor}.md .solid-loader{width:48px;height:48px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.md .solid-loader:before,.md .solid-loader:after{width:6px;height:6px}.md .solid-loader:before{top:0;left:0}.md .solid-loader:after{top:0;right:0}.lg .fa-spin{font-size:56px;-webkit-text-stroke:0px currentColor}.lg .solid-loader{width:56px;height:56px;border:6px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.lg .solid-loader:before,.lg .solid-loader:after{width:6px;height:6px}.lg .solid-loader:before{top:2px;left:1px}.lg .solid-loader:after{top:2px;right:1px}.xl .fa-spin{font-size:58px;-webkit-text-stroke:1px currentColor}.xl .solid-loader{width:58px;height:58px;border:8px solid rgb(71,84,103);border-top-color:transparent;border-radius:50%}.xl .solid-loader:before,.xl .solid-loader:after{width:8px;height:8px}.xl .solid-loader:before{top:0;left:-1px}.xl .solid-loader:after{top:0;right:-1px}.solid-loader{position:relative;animation:spin 2s linear infinite}.solid-loader:before,.solid-loader:after{content:\"\";position:absolute;background-color:#475467;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
1959
1959
|
}], propDecorators: { npType: [{
|
|
@@ -2452,10 +2452,10 @@ class NpTableComponent {
|
|
|
2452
2452
|
this.updatePaginationWidth();
|
|
2453
2453
|
this.syncRowHeight();
|
|
2454
2454
|
}
|
|
2455
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2456
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", isUsePagination: "isUsePagination", paginationType: "paginationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", scrollHeight: "scrollHeight", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource", pageSize: "pageSize" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99\" \n [ngClass]=\"{\n 'np-table-shadow': scrollHeight.length > 0 && scrollHeight !== '0px',\n }\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div #tableContainer class=\"flex w-full\">\n <table \n *ngIf=\"!isAtStart\" \n class=\"np-table fixed-left z-10 {{ classNameLeft }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n >\n <thead>\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n <div class=\"flex flex-col\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div \n #tableContainer \n class=\"flex w-full relative\" \n [style.max-height]=\"scrollHeight\"\n >\n <!-- Fixed Left Table -->\n <div \n #tableLeft \n *ngIf=\"!isAtStart\" \n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\"\n style=\"border-right: none;\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\n <thead class=\"sticky-header\">\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Scrollable Middle Table -->\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"scrollWidth\"\n [style.max-height]=\"scrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none'\n }\"\n >\n <table class=\"scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead class=\"sticky-header\">\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Fixed Right Table -->\n <div \n #tableRight \n *ngIf=\"!isAtEnd\" \n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\">\n <table class=\"rounded-r-xl fixed-right z-10 {{ classNameRight }}\">\n <thead class=\"sticky-header\">\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <br> Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", isUsePagination: "isUsePagination", paginationType: "paginationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", scrollHeight: "scrollHeight", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource", pageSize: "pageSize" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99\" \n [ngClass]=\"{\n 'np-table-shadow': scrollHeight.length > 0 && scrollHeight !== '0px',\n }\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div #tableContainer class=\"flex w-full\">\n <table \n *ngIf=\"!isAtStart\" \n class=\"np-table fixed-left z-10 {{ classNameLeft }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n >\n <thead>\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n <div class=\"flex flex-col\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div \n #tableContainer \n class=\"flex w-full relative\" \n [style.max-height]=\"scrollHeight\"\n >\n <!-- Fixed Left Table -->\n <div \n #tableLeft \n *ngIf=\"!isAtStart\" \n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\"\n style=\"border-right: none;\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\n <thead class=\"sticky-header\">\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Scrollable Middle Table -->\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"scrollWidth\"\n [style.max-height]=\"scrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none'\n }\"\n >\n <table class=\"scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead class=\"sticky-header\">\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Fixed Right Table -->\n <div \n #tableRight \n *ngIf=\"!isAtEnd\" \n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\">\n <table class=\"rounded-r-xl fixed-right z-10 {{ classNameRight }}\">\n <thead class=\"sticky-header\">\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <br> Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2457
2457
|
}
|
|
2458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTableComponent, decorators: [{
|
|
2459
2459
|
type: Component,
|
|
2460
2460
|
args: [{ selector: 'np-table', imports: [
|
|
2461
2461
|
CommonModule,
|
|
@@ -2649,10 +2649,10 @@ class NpTabComponent {
|
|
|
2649
2649
|
onResize() {
|
|
2650
2650
|
this.updateScrollButtons();
|
|
2651
2651
|
}
|
|
2652
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2653
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2652
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTabComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
2653
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", className: "className", subClassName: "subClassName", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "w-full" }, viewQueries: [{ propertyName: "headerWrapperRef", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div\n class=\"np-tab h-full relative {{className}}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n <div \n #scrollContainer class=\"flex w-fit w-full\" \n [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n <div #tabItem class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if(first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}.small{padding:4px}.small .tab-item{padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
2654
2654
|
}
|
|
2655
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2655
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpTabComponent, decorators: [{
|
|
2656
2656
|
type: Component,
|
|
2657
2657
|
args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], host: {
|
|
2658
2658
|
class: 'w-full'
|
|
@@ -2730,10 +2730,10 @@ class NpResizeComponent {
|
|
|
2730
2730
|
this.renderer.appendChild(this.container.nativeElement, this._ngContent);
|
|
2731
2731
|
}
|
|
2732
2732
|
}
|
|
2733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpResizeComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.NzIconService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpResizeComponent, isStandalone: true, selector: "np-resize", inputs: { width: "width", height: "height", maxWidth: "maxWidth", maxHeight: "maxHeight", minWidth: "minWidth", minHeight: "minHeight", directions: "directions", isDisable: "isDisable", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n #container\n class=\"box\"\n nz-resizable\n (nzResize)=\"onResize($event)\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n [nzMaxWidth]=\"maxWidth\"\n [nzMinWidth]=\"minWidth\"\n [nzMaxHeight]=\"maxHeight\"\n [nzMinHeight]=\"minHeight\"\n [nzDisabled]=\"isDisable\"\n >\n <nz-resize-handle\n *ngIf=\"directions.includes('topLeft') || (directions.includes('top') && directions.includes('left'))\"\n nzDirection=\"topLeft\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"225\"/>\n </nz-resize-handle>\n\n <nz-resize-handle\n *ngIf=\"directions.includes('topRight') || (directions.includes('top') && directions.includes('right'))\"\n nzDirection=\"topRight\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"135\"/>\n </nz-resize-handle>\n\n <nz-resize-handle\n *ngIf=\"directions.includes('bottomLeft') || (directions.includes('bottom') && directions.includes('left'))\"\n nzDirection=\"bottomLeft\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"315\"/>\n </nz-resize-handle>\n\n <nz-resize-handle\n *ngIf=\"directions.includes('bottomRight') || (directions.includes('bottom') && directions.includes('right'))\"\n nzDirection=\"bottomRight\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"45\" />\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('top')\" nzDirection=\"top\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('right')\" nzDirection=\"right\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('bottom')\" nzDirection=\"bottom\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('left')\" nzDirection=\"left\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n </nz-resize-handle>\n\n <ng-content></ng-content>\n</div>\n\n", styles: [":host{height:100%;width:100%}.box{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ddd;border-radius:10px}.anticon{color:#fff!important}::ng-deep .anticon svg{height:24px!important}::ng-deep .nz-resizable-handle{position:absolute;width:2px;height:2px;background:transparent;z-index:100}::ng-deep .nz-resizable-handle-left,::ng-deep .nz-resizable-handle-right{width:24px;height:24px;top:50%;transform:translateY(-50%);cursor:ew-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-bottom{width:24px;height:24px;left:50%;transform:translate(-50%);cursor:ns-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-left{left:-12px}::ng-deep .nz-resizable-handle-right{right:-12px}::ng-deep .nz-resizable-handle-top{top:-12px}::ng-deep .nz-resizable-handle-bottom{bottom:-12px}::ng-deep .nz-resizable-handle-topLeft,::ng-deep .nz-resizable-handle-topRight{width:24px;height:24px;position:absolute;top:-11px;display:flex;justify-content:center;align-items:center;rotate:180deg}::ng-deep .nz-resizable-handle-bottomLeft,::ng-deep .nz-resizable-handle-bottomRight{width:24px;height:24px;position:absolute;bottom:-11px;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-topLeft{left:-11px;cursor:nwse-resize}::ng-deep .nz-resizable-handle-topRight{right:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomLeft{left:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomRight{right:-11px;cursor:nwse-resize}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzResizableModule }, { kind: "directive", type: i3$4.NzResizableDirective, selector: "[nz-resizable]", inputs: ["nzBounds", "nzMaxHeight", "nzMaxWidth", "nzMinHeight", "nzMinWidth", "nzGridColumnCount", "nzMaxColumn", "nzMinColumn", "nzLockAspectRatio", "nzPreview", "nzDisabled"], outputs: ["nzResize", "nzResizeEnd", "nzResizeStart"], exportAs: ["nzResizable"] }, { kind: "component", type: i3$4.NzResizeHandleComponent, selector: "nz-resize-handle, [nz-resize-handle]", inputs: ["nzDirection", "nzCursorType"], outputs: ["nzMouseDown"], exportAs: ["nzResizeHandle"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
|
|
2735
2735
|
}
|
|
2736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpResizeComponent, decorators: [{
|
|
2737
2737
|
type: Component,
|
|
2738
2738
|
args: [{ selector: 'np-resize', imports: [CommonModule, NzResizableModule, NzIconModule], template: "<div\n #container\n class=\"box\"\n nz-resizable\n (nzResize)=\"onResize($event)\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n [nzMaxWidth]=\"maxWidth\"\n [nzMinWidth]=\"minWidth\"\n [nzMaxHeight]=\"maxHeight\"\n [nzMinHeight]=\"minHeight\"\n [nzDisabled]=\"isDisable\"\n >\n <nz-resize-handle\n *ngIf=\"directions.includes('topLeft') || (directions.includes('top') && directions.includes('left'))\"\n nzDirection=\"topLeft\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"225\"/>\n </nz-resize-handle>\n\n <nz-resize-handle\n *ngIf=\"directions.includes('topRight') || (directions.includes('top') && directions.includes('right'))\"\n nzDirection=\"topRight\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"135\"/>\n </nz-resize-handle>\n\n <nz-resize-handle\n *ngIf=\"directions.includes('bottomLeft') || (directions.includes('bottom') && directions.includes('left'))\"\n nzDirection=\"bottomLeft\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"315\"/>\n </nz-resize-handle>\n\n <nz-resize-handle\n *ngIf=\"directions.includes('bottomRight') || (directions.includes('bottom') && directions.includes('right'))\"\n nzDirection=\"bottomRight\"\n >\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"45\" />\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('top')\" nzDirection=\"top\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('right')\" nzDirection=\"right\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('bottom')\" nzDirection=\"bottom\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"90\"/>\n </nz-resize-handle>\n\n <nz-resize-handle *ngIf=\"directions.includes('left')\" nzDirection=\"left\">\n <nz-icon class=\"bottom-right\" nzType=\"ng-zorro:antd\" nzTheme=\"outline\" [nzRotate]=\"0\"/>\n </nz-resize-handle>\n\n <ng-content></ng-content>\n</div>\n\n", styles: [":host{height:100%;width:100%}.box{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ddd;border-radius:10px}.anticon{color:#fff!important}::ng-deep .anticon svg{height:24px!important}::ng-deep .nz-resizable-handle{position:absolute;width:2px;height:2px;background:transparent;z-index:100}::ng-deep .nz-resizable-handle-left,::ng-deep .nz-resizable-handle-right{width:24px;height:24px;top:50%;transform:translateY(-50%);cursor:ew-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-bottom{width:24px;height:24px;left:50%;transform:translate(-50%);cursor:ns-resize;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-left{left:-12px}::ng-deep .nz-resizable-handle-right{right:-12px}::ng-deep .nz-resizable-handle-top{top:-12px}::ng-deep .nz-resizable-handle-bottom{bottom:-12px}::ng-deep .nz-resizable-handle-topLeft,::ng-deep .nz-resizable-handle-topRight{width:24px;height:24px;position:absolute;top:-11px;display:flex;justify-content:center;align-items:center;rotate:180deg}::ng-deep .nz-resizable-handle-bottomLeft,::ng-deep .nz-resizable-handle-bottomRight{width:24px;height:24px;position:absolute;bottom:-11px;display:flex;justify-content:center;align-items:center}::ng-deep .nz-resizable-handle-topLeft{left:-11px;cursor:nwse-resize}::ng-deep .nz-resizable-handle-topRight{right:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomLeft{left:-11px;cursor:nesw-resize}::ng-deep .nz-resizable-handle-bottomRight{right:-11px;cursor:nwse-resize}\n"] }]
|
|
2739
2739
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.NzIconService }], propDecorators: { container: [{
|
|
@@ -2762,8 +2762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2762
2762
|
}] } });
|
|
2763
2763
|
|
|
2764
2764
|
class BasicModule {
|
|
2765
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2766
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2766
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: BasicModule, imports: [CommonModule,
|
|
2767
2767
|
NpCheckboxComponent,
|
|
2768
2768
|
NpInputFieldComponent,
|
|
2769
2769
|
NpButtonComponent,
|
|
@@ -2773,14 +2773,14 @@ class BasicModule {
|
|
|
2773
2773
|
NpButtonComponent,
|
|
2774
2774
|
NpTypographyComponent,
|
|
2775
2775
|
NpInputTexteraComponent] });
|
|
2776
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2776
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicModule, imports: [CommonModule,
|
|
2777
2777
|
NpCheckboxComponent,
|
|
2778
2778
|
NpInputFieldComponent,
|
|
2779
2779
|
NpButtonComponent,
|
|
2780
2780
|
NpTypographyComponent,
|
|
2781
2781
|
NpInputTexteraComponent] });
|
|
2782
2782
|
}
|
|
2783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2783
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BasicModule, decorators: [{
|
|
2784
2784
|
type: NgModule,
|
|
2785
2785
|
args: [{
|
|
2786
2786
|
declarations: [],
|
|
@@ -2857,10 +2857,10 @@ class NpModalComponent {
|
|
|
2857
2857
|
this.isVisible = false;
|
|
2858
2858
|
this.cancel.emit();
|
|
2859
2859
|
}
|
|
2860
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2860
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2861
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpModalComponent, isStandalone: true, selector: "np-modal", inputs: { modalButton: "modalButton", modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", modalFooter: "modalFooter", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div (click)=\"showModal()\">\n <ng-container *ngIf=\"isTemplate(modalButton); else textTitle\">\n <ng-container *ngTemplateOutlet=\"modalButton\"></ng-container>\n </ng-container>\n <ng-template #textTitle>\n <np-button>\n {{ modalButton }}\n </np-button>\n </ng-template>\n</div>\n\n<nz-modal\n [(nzVisible)]=\"isVisible\"\n (nzOnCancel)=\"handleCancel()\"\n (nzOnOk)=\"handleOk()\"\n [nzTitle]=\"isTemplate(modalTitle) ? modalTitle : titleTemplate\"\n [nzContent]=\"modalContent || ''\"\n [nzFooter]=\"isTemplate(modalFooter) ? modalFooter : footerTemplate\"\n [nzWidth]=\"modalWidth\"\n nzClassName=\"np-modal\"\n>\n</nz-modal>\n\n<ng-template #titleTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? contentConfirmation : contentNotification\n \"\n ></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n modalType === 'confirmation' ? footerConfirmation : footerNotification\n \"\n ></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{ modalTitle }}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{ modalType }}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{ cancelText }}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{ okText }}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full py-2\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{ modalTitle }}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i\n class=\"fa-solid fa-xmark cursor-pointer fa-xl\"\n (click)=\"handleCancel()\"\n ></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(71, 84, 103, 1)\"\n >\n {{ modalDescriptions }}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{ cancelText }}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{ okText }}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .np-modal .ant-modal-content{border-radius:8px}::ng-deep .np-modal .confirmation .np-button{width:175px}::ng-deep .ant-modal-footer{border-top:none;padding:10px 20px;border-radius:8px}::ng-deep .ant-modal-header{border-bottom:none;padding:10px 20px;border-radius:8px}::ng-deep .checkbox{align-items:center}::ng-deep .ant-modal{top:calc(50% - 100px)}\n"], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: i1.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzDraggable", "nzContent", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
|
|
2862
2862
|
}
|
|
2863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpModalComponent, decorators: [{
|
|
2864
2864
|
type: Component,
|
|
2865
2865
|
args: [{ selector: 'np-modal', imports: [
|
|
2866
2866
|
NzModalModule,
|
|
@@ -2957,10 +2957,10 @@ class NpConfirmTemplateComponent {
|
|
|
2957
2957
|
this.isVisible = false;
|
|
2958
2958
|
this.cancel.emit();
|
|
2959
2959
|
}
|
|
2960
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2961
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2960
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpConfirmTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
|
|
2962
2962
|
}
|
|
2963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpConfirmTemplateComponent, decorators: [{
|
|
2964
2964
|
type: Component,
|
|
2965
2965
|
args: [{ selector: 'np-confirm-template', imports: [
|
|
2966
2966
|
NzModalModule,
|
|
@@ -3009,10 +3009,10 @@ class NpDialogComponent {
|
|
|
3009
3009
|
submit(result) {
|
|
3010
3010
|
this.modalRef.close(result);
|
|
3011
3011
|
}
|
|
3012
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3012
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDialogComponent, deps: [{ token: i1.NzModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3013
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.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: [""] });
|
|
3014
3014
|
}
|
|
3015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NpDialogComponent, decorators: [{
|
|
3016
3016
|
type: Component,
|
|
3017
3017
|
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" }]
|
|
3018
3018
|
}], ctorParameters: () => [{ type: i1.NzModalRef }] });
|