@neoprototype/neop-ui-lib 1.0.27 → 1.0.29
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 +501 -142
- package/fesm2022/neoprototype-neop-ui-lib.mjs.map +1 -1
- package/lib/components/basic/np-alert/np-alert.component.d.ts +8 -3
- package/lib/components/basic/np-breadcrumb/np-breadcrumb.component.d.ts +2 -1
- package/lib/components/basic/np-dropdowns/np-dropdowns.component.d.ts +1 -0
- package/lib/components/basic/np-input-textera/np-input-textera.component.d.ts +5 -1
- package/lib/components/basic/np-tab/np-tab.component.d.ts +16 -2
- package/lib/components/basic/np-table/np-table.component.d.ts +51 -29
- package/lib/components/basic/np-tree/np-tree.component.d.ts +1 -1
- package/lib/components/modal/confirm-template/confirm-template.component.d.ts +32 -0
- package/lib/components/modal/np-dialog/np-dialog.component.d.ts +10 -0
- package/lib/interfaces/np-table.interface.d.ts +5 -0
- package/lib/services/np-alert.service.d.ts +29 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -1
- package/scss/index.scss +2 -0
- package/scss/scroll/scroll.scss +24 -0
- /package/lib/components/{modal → basic}/np-modal/np-modal.component.d.ts +0 -0
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Injectable, NgModule, Component, ViewChild, Input, EventEmitter, Output, InjectionToken, Optional, Inject, ElementRef, HostListener, ViewChildren, TemplateRef } from '@angular/core';
|
|
3
3
|
import * as i1 from 'ng-zorro-antd/modal';
|
|
4
4
|
import { NzModalModule } from 'ng-zorro-antd/modal';
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
5
6
|
import * as i1$1 from '@angular/common';
|
|
6
7
|
import { CommonModule, DecimalPipe } from '@angular/common';
|
|
7
8
|
import { NzTypographyModule } from 'ng-zorro-antd/typography';
|
|
@@ -106,6 +107,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
106
107
|
}]
|
|
107
108
|
}], ctorParameters: () => [{ type: i1.NzModalService }] });
|
|
108
109
|
|
|
110
|
+
class NpAlertService {
|
|
111
|
+
alertSubject = new Subject();
|
|
112
|
+
alert$ = this.alertSubject.asObservable();
|
|
113
|
+
toast = {
|
|
114
|
+
success: (description, title, message) => this.emit('toast', 'success', description, title, message),
|
|
115
|
+
info: (description, title, message) => this.emit('toast', 'info', description, title, message),
|
|
116
|
+
warning: (description, title, message) => this.emit('toast', 'warning', description, title, message),
|
|
117
|
+
error: (description, title, message) => this.emit('toast', 'error', description, title, message),
|
|
118
|
+
};
|
|
119
|
+
notification = {
|
|
120
|
+
success: (description, title, message) => this.emit('notification', 'success', description, title, message),
|
|
121
|
+
info: (description, title, message) => this.emit('notification', 'info', description, title, message),
|
|
122
|
+
warning: (description, title, message) => this.emit('notification', 'warning', description, title, message),
|
|
123
|
+
error: (description, title, message) => this.emit('notification', 'error', description, title, message),
|
|
124
|
+
};
|
|
125
|
+
emit(type, state, description, title, message) {
|
|
126
|
+
this.alertSubject.next({
|
|
127
|
+
type,
|
|
128
|
+
state,
|
|
129
|
+
description,
|
|
130
|
+
title,
|
|
131
|
+
message,
|
|
132
|
+
autoHide: true,
|
|
133
|
+
isFromService: true
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
137
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, providedIn: 'root' });
|
|
138
|
+
}
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertService, decorators: [{
|
|
140
|
+
type: Injectable,
|
|
141
|
+
args: [{ providedIn: 'root' }]
|
|
142
|
+
}] });
|
|
143
|
+
|
|
109
144
|
class NeopComponentModule {
|
|
110
145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
111
146
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NeopComponentModule, imports: [CommonModule] });
|
|
@@ -516,6 +551,10 @@ class NpInputTexteraComponent {
|
|
|
516
551
|
value;
|
|
517
552
|
limitValue;
|
|
518
553
|
submitted = false;
|
|
554
|
+
rowSize = {
|
|
555
|
+
minRows: 4,
|
|
556
|
+
maxRows: 4,
|
|
557
|
+
};
|
|
519
558
|
_input = new FormControl('');
|
|
520
559
|
currentLength = 0;
|
|
521
560
|
set input(value) {
|
|
@@ -548,7 +587,7 @@ class NpInputTexteraComponent {
|
|
|
548
587
|
return this.defaultErrorMap?.[firstKey] || null;
|
|
549
588
|
}
|
|
550
589
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputTexteraComponent, deps: [{ token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputTexteraComponent, isStandalone: true, selector: "np-input-textera", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", value: "value", limitValue: "limitValue", submitted: "submitted", input: "input" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"
|
|
590
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputTexteraComponent, isStandalone: true, selector: "np-input-textera", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", value: "value", limitValue: "limitValue", submitted: "submitted", rowSize: "rowSize", input: "input" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"rowSize\"\n [disabled]=\"_input.disabled\"\n [formControl]=\"_input\"\n (input)=\"onTextareaInput($event)\"\n ></textarea>\n\n <div class=\"flex justify-between\">\n <div class=\"flex-col flex\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">\n {{ errorMessageFromInput }}\n </np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue\" class=\"limit-value\">\n {{ currentLength }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-hint{color:#475467}.ant-input{border-radius:4px}.ant-input:focus:not(.ant-input-disabled),.ant-input:hover:not(.ant-input-disabled){background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 0 0 4px #f0f2f4}.error{border:none!important}.error:hover,.error:focus,.error:focus-visible,.error:focus-within{box-shadow:none!important}.error .ant-input{border:1px solid rgb(253,162,155)}.error .ant-input:focus:not(.ant-input-disabled),.error .ant-input:hover:not(.ant-input-disabled){background-color:#fff;box-shadow:0 0 0 4px #f044383d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i3.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
552
591
|
}
|
|
553
592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputTexteraComponent, decorators: [{
|
|
554
593
|
type: Component,
|
|
@@ -558,7 +597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
558
597
|
NzInputModule,
|
|
559
598
|
NpTypographyComponent,
|
|
560
599
|
ReactiveFormsModule,
|
|
561
|
-
], template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"
|
|
600
|
+
], template: "<div class=\"flex flex-col gap-1\" [ngClass]=\"computedStatus === 'error' ? 'error' : ''\">\n <np-typography npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <textarea\n nz-input\n [placeholder]=\"placeholder\"\n [nzAutosize]=\"rowSize\"\n [disabled]=\"_input.disabled\"\n [formControl]=\"_input\"\n (input)=\"onTextareaInput($event)\"\n ></textarea>\n\n <div class=\"flex justify-between\">\n <div class=\"flex-col flex\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">\n {{ errorMessageFromInput }}\n </np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue\" class=\"limit-value\">\n {{ currentLength }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-hint{color:#475467}.ant-input{border-radius:4px}.ant-input:focus:not(.ant-input-disabled),.ant-input:hover:not(.ant-input-disabled){background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 0 0 4px #f0f2f4}.error{border:none!important}.error:hover,.error:focus,.error:focus-visible,.error:focus-within{box-shadow:none!important}.error .ant-input{border:1px solid rgb(253,162,155)}.error .ant-input:focus:not(.ant-input-disabled),.error .ant-input:hover:not(.ant-input-disabled){background-color:#fff;box-shadow:0 0 0 4px #f044383d}\n"] }]
|
|
562
601
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
563
602
|
type: Optional
|
|
564
603
|
}, {
|
|
@@ -578,6 +617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
578
617
|
type: Input
|
|
579
618
|
}], submitted: [{
|
|
580
619
|
type: Input
|
|
620
|
+
}], rowSize: [{
|
|
621
|
+
type: Input
|
|
581
622
|
}], input: [{
|
|
582
623
|
type: Input
|
|
583
624
|
}] } });
|
|
@@ -731,6 +772,7 @@ class NpDropdownsComponent {
|
|
|
731
772
|
searchControl = new FormControl('');
|
|
732
773
|
originalList = [];
|
|
733
774
|
filteredList = [];
|
|
775
|
+
selectedItem = null;
|
|
734
776
|
ngOnInit() {
|
|
735
777
|
this.originalList = [...this.list];
|
|
736
778
|
this.filteredList = [...this.list];
|
|
@@ -744,12 +786,13 @@ class NpDropdownsComponent {
|
|
|
744
786
|
change(value) { }
|
|
745
787
|
onSelectItem(item) {
|
|
746
788
|
this.visible = false;
|
|
747
|
-
if (this.npType !== 'icon') {
|
|
748
|
-
|
|
749
|
-
}
|
|
750
|
-
|
|
751
|
-
|
|
789
|
+
// if (this.npType !== 'icon') {
|
|
790
|
+
// this.value = item?.value;
|
|
791
|
+
// }
|
|
792
|
+
this.selectedItem = item;
|
|
793
|
+
this.value = item?.label;
|
|
752
794
|
this.valueChange.emit(item);
|
|
795
|
+
this.searchControl.setValue('');
|
|
753
796
|
}
|
|
754
797
|
onRightIconClick() {
|
|
755
798
|
this.searchControl.setValue('');
|
|
@@ -772,7 +815,7 @@ class NpDropdownsComponent {
|
|
|
772
815
|
}
|
|
773
816
|
}
|
|
774
817
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDropdownsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
775
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", className: "className", value: "value", useSearch: "useSearch", alwaysOpen: "alwaysOpen", placement: "placement", list: "list" }, outputs: { valueChange: "valueChange", visible: "visible" }, ngImport: i0, template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ className }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n {{ value }}\n @if (npType === 'icon') {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n type=\"string\"\n placeholder=\"Search\"\n iconLeft=\"fa-regular fa-magnifying-glass\"\n iconRight=\"fa-solid fa-xmark-large\"\n [input]=\"searchControl\"\n (iconRightClick)=\"onRightIconClick()\"\n ></np-input-field>\n </div>\n @for (item of filteredList; track item) {\n
|
|
818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpDropdownsComponent, isStandalone: true, selector: "np-dropdowns", inputs: { npType: "npType", npSize: "npSize", className: "className", value: "value", useSearch: "useSearch", alwaysOpen: "alwaysOpen", placement: "placement", list: "list" }, outputs: { valueChange: "valueChange", visible: "visible" }, ngImport: i0, template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ className }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n <i *ngIf=\"selectedItem?.classIcon\" class=\"{{ selectedItem?.classIcon }}\"></i>\n {{ selectedItem?.label || value }}\n @if (npType === 'icon') {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n type=\"string\"\n placeholder=\"Search\"\n iconLeft=\"fa-regular fa-magnifying-glass\"\n iconRight=\"fa-solid fa-xmark-large\"\n [input]=\"searchControl\"\n (iconRightClick)=\"onRightIconClick()\"\n ></np-input-field>\n </div>\n @for (item of filteredList; track item) {\n <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: item }\"\n ></ng-container>\n }\n </ul>\n\n <ng-template #contentMenu let-item=\"item\">\n @if (item?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!item?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </li>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"contentSubMenuTemplate; context: { item: item }\"\n ></ng-container>\n }\n </ng-template>\n\n <ng-template #contentSubMenuTemplate let-item=\"item\">\n <li nz-submenu [nzTitle]=\"submenuTitle\">\n <ng-template #submenuTitle>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: item }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild of item?.childrens; track itemChild) { @if\n (itemChild?.type === 'divider') {\n <li nz-menu-divider></li>\n } @else if (!itemChild?.childrens) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild)\">\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </li>\n } @else {\n\n <!-- Start Fix temp when not use recursive template -->\n <li nz-submenu [nzTitle]=\"submenuTitle2\">\n <ng-template #submenuTitle2>\n <ng-container\n *ngTemplateOutlet=\"contentTemplate; context: { item: itemChild }\"\n ></ng-container>\n </ng-template>\n <ul>\n @for (itemChild2 of itemChild?.childrens; track itemChild2) {\n <li nz-menu-item (click)=\"onSelectItem(itemChild2)\">\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: itemChild2 }\n \"\n ></ng-container>\n </li>\n }\n </ul>\n </li>\n <!-- End Fix temp when not use recursive template -->\n\n <!-- <ng-container\n *ngTemplateOutlet=\"contentMenu; context: { item: itemChild }\"\n ></ng-container> -->\n } }\n </ul>\n </li>\n </ng-template>\n\n <ng-template #contentTemplate let-item=\"item\">\n <i class=\"{{ item?.classIcon }} mr-[4px]\"></i>\n {{ item?.label }}\n </ng-template>\n</nz-dropdown-menu>\n", styles: ["::ng-deep .ant-dropdown-menu{box-shadow:0 12px 16px -4px #10182814;border:1px solid #eaecf0;border-radius:8px;min-width:200px}::ng-deep .nz-dropdown-menu{pointer-events:auto!important}::ng-deep .fa-xmark-large{cursor:pointer}.menu .item{cursor:pointer}.menu .item:hover{background-color:#f5f5f5}.menu .item-selected{background-color:#f9fafb}.np-dropdown .icon{transition:transform .3s ease-in-out}.np-dropdown .icon-up{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type:
|
|
776
819
|
// NzPopoverModule,
|
|
777
820
|
NzDropDownModule }, { kind: "directive", type: i2$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i2$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i2$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "directive", type: i2$1.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i3$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i3$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "ngmodule", type:
|
|
778
821
|
// NpDropdownContentMenuComponent
|
|
@@ -790,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
790
833
|
// NpDropdownContentMenuComponent
|
|
791
834
|
NzSelectModule,
|
|
792
835
|
NpInputFieldComponent,
|
|
793
|
-
], template: "<np-button\n class=\"inline-block w-auto np-dropdown {{ className }}\"\n [npType]=\"npType\"\n [npSize]=\"npSize\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"alwaysOpen\"\n [nzPlacement]=\"placement\"\n>\n <div class=\"flex gap-1 items-center\">\n {{ value }}\n @if (npType === 'icon') {\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n } @else {\n <i class=\"fa-light icon fa-chevron-down\" [class.icon-up]=\"visible\"></i>\n }\n </div>\n</np-button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu>\n <div class=\"px-[8px] py-[2px] mb-1\" *ngIf=\"useSearch\">\n <np-input-field\n size=\"sm\"\n type=\"string\"\n placeholder=\"Search\"\n iconLeft=\"fa-regular fa-magnifying-glass\"\n iconRight=\"fa-solid fa-xmark-large\"\n [input]=\"searchControl\"\n (iconRightClick)=\"onRightIconClick()\"\n ></np-input-field>\n </div>\n @for (item of filteredList; track item) {\n
|
|
836
|
+
], 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"] }]
|
|
794
837
|
}], propDecorators: { npType: [{
|
|
795
838
|
type: Input
|
|
796
839
|
}], npSize: [{
|
|
@@ -1116,11 +1159,11 @@ class NpActionBarComponent {
|
|
|
1116
1159
|
return visibleIcons * (iconWidth + gap);
|
|
1117
1160
|
}
|
|
1118
1161
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n <div #resizeContainer class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n <button\n *ngIf=\"canPrevious\"\n (click)=\"scrollLeft()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isPreviousDisable,\n 'cursor-pointer': !isPreviousDisable,\n\n }\"\n >\n <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n </button>\n\n <div\n #scrollWrapper\n class=\"flex w-full no-scrollbar scroll-smooth\"\n [ngClass]=\"{\n 'mx-3': compressedActions.length === 0 && !canPrevious,\n 'ms-3': !canPrevious && compressedActions.length > 0,\n 'overflow-x-auto': isOverflowing,\n }\"\n [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n >\n <ng-container *ngFor=\"let action of unCompressedActions2\">\n <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n <button\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n </button>\n </np-tooltip>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"canNext\"\n (click)=\"scrollRight()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isNextDisable,\n 'cursor-pointer': !isNextDisable,\n }\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n\n <np-tooltip\n *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n text=\"More actions\"\n class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n [ngClass]=\"{\n 'bg-gray-100': isMoreOpen,\n 'bg-transparent': !isMoreOpen,\n }\"\n >\n <button\n #triggerBtn\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"showMoreActions()\"\n >\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n </np-tooltip>\n </div>\n</div>\n\n<div\n *ngIf=\"isMoreOpen\"\n class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n [ngStyle]=\"dropdownStyles\"\n>\n <ng-container *ngFor=\"let action of compressedActions\">\n <button\n class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n {{ action.label }}\n </button>\n </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.
|
|
1162
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpActionBarComponent, isStandalone: true, selector: "np-action-bar", inputs: { actions: "actions", data: "data", notCompressMin: "notCompressMin", isNotResponsive: "isNotResponsive" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowScroll()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, read: ElementRef }, { propertyName: "resizeContainer", first: true, predicate: ["resizeContainer"], descendants: true }, { propertyName: "scrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex w-full justify-center items-center\">\n <div #resizeContainer class=\"np-action-bar flex items-center rounded-full border border-gray-300 bg-white px-1 py-1\">\n <button\n *ngIf=\"canPrevious\"\n (click)=\"scrollLeft()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-previous\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isPreviousDisable,\n 'cursor-pointer': !isPreviousDisable,\n\n }\"\n >\n <i class=\"fa-solid fa-chevron-left px-3 py-1\"></i>\n </button>\n\n <div\n #scrollWrapper\n class=\"flex w-full no-scrollbar scroll-smooth\"\n [ngClass]=\"{\n 'mx-3': compressedActions.length === 0 && !canPrevious,\n 'ms-3': !canPrevious && compressedActions.length > 0,\n 'overflow-x-auto': isOverflowing,\n }\"\n [ngStyle]=\"{ 'max-width.px': scrollMaxWidth }\"\n >\n <ng-container *ngFor=\"let action of unCompressedActions2\">\n <np-tooltip [text]=\"action.label || ''\" class=\"h-[20px]\">\n <button\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n </button>\n </np-tooltip>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"canNext\"\n (click)=\"scrollRight()\"\n class=\"rounded-full flex items-center justify-center bg-gray-100 w-[26px] h-[20px] btn-next\"\n [ngClass]=\"{\n 'opacity-40 cursor-not-allowed': isNextDisable,\n 'cursor-pointer': !isNextDisable,\n }\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n\n <np-tooltip\n *ngIf=\"compressedActions.length > 0 && !isOverflowing\"\n text=\"More actions\"\n class=\"px-3 ms-1 rounded-2xl h-[20px]\"\n [ngClass]=\"{\n 'bg-gray-100': isMoreOpen,\n 'bg-transparent': !isMoreOpen,\n }\"\n >\n <button\n #triggerBtn\n class=\"action-btn cursor-pointer bg-transparent\"\n (click)=\"showMoreActions()\"\n >\n <i class=\"fa-solid fa-ellipsis\"></i>\n </button>\n </np-tooltip>\n </div>\n</div>\n\n<div\n *ngIf=\"isMoreOpen\"\n class=\"fixed z-999 min-w-[150px] bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden\"\n [ngStyle]=\"dropdownStyles\"\n>\n <ng-container *ngFor=\"let action of compressedActions\">\n <button\n class=\"flex w-full items-center gap-2 px-3 py-2 hover:bg-gray-100 transition-all duration-150 text-left\"\n (click)=\"trigger(action)\"\n >\n <i class=\"{{ action.classIcon }}\"></i>\n {{ action.label }}\n </button>\n </ng-container>\n</div>\n", styles: [".np-action-bar .action-btn{width:13px;height:20px}.np-action-bar .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;gap:12px}.btn-previous{margin-right:5px}.btn-next{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTooltipComponent, selector: "np-tooltip", inputs: ["type", "text", "descriptions", "position", "tooltipVisible", "ngContent"] }] });
|
|
1120
1163
|
}
|
|
1121
1164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpActionBarComponent, decorators: [{
|
|
1122
1165
|
type: Component,
|
|
1123
|
-
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}.
|
|
1166
|
+
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"] }]
|
|
1124
1167
|
}], propDecorators: { actions: [{
|
|
1125
1168
|
type: Input
|
|
1126
1169
|
}], data: [{
|
|
@@ -1182,7 +1225,7 @@ class NpTreeComponent {
|
|
|
1182
1225
|
...item,
|
|
1183
1226
|
level,
|
|
1184
1227
|
parentId,
|
|
1185
|
-
isExpanded:
|
|
1228
|
+
isExpanded: item.isExpanded === true && !!item.childrens?.length,
|
|
1186
1229
|
isLastByLevel,
|
|
1187
1230
|
hasParentByLevel,
|
|
1188
1231
|
};
|
|
@@ -1194,7 +1237,10 @@ class NpTreeComponent {
|
|
|
1194
1237
|
return acc;
|
|
1195
1238
|
}, []);
|
|
1196
1239
|
}
|
|
1197
|
-
onExpand(item) {
|
|
1240
|
+
onExpand(event, item) {
|
|
1241
|
+
if (item.path) {
|
|
1242
|
+
event.stopPropagation();
|
|
1243
|
+
}
|
|
1198
1244
|
item.isExpanded = !item.isExpanded;
|
|
1199
1245
|
this.visibleNodes = this.getVisibleNodes();
|
|
1200
1246
|
}
|
|
@@ -1300,7 +1346,7 @@ class NpTreeComponent {
|
|
|
1300
1346
|
};
|
|
1301
1347
|
}
|
|
1302
1348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTreeComponent, isStandalone: true, selector: "np-tree", inputs: { type: "type", expandPosition: "expandPosition", notCompressMin: "notCompressMin", isCompactActions: "isCompactActions", autoHideActions: "autoHideActions", className: "className", list: "list", input: "input", itemActiveId: "itemActiveId", useLine: "useLine" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ng-template\n #wrapWithLevel\n let-content\n let-level=\"level\"\n let-max=\"max\"\n let-isLastByLevel=\"isLastByLevel\"\n let-hasParentByLevel=\"hasParentByLevel\"\n let-isLine=\"isLine\"\n>\n <div\n [ngClass]=\"[\n 'tree-line',\n 'level-' + level,\n isLine ? '' : 'no-line',\n isLastByLevel?.[level] ? 'is-last' : '',\n hasParentByLevel?.[level] ? 'has-parent' : '',\n expandPosition === 'right' ? 'expand-right' : '',\n ]\"\n >\n @if (level < max) {\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: content,\n level: level + 1,\n max: max,\n isLastByLevel: isLastByLevel,\n hasParentByLevel: hasParentByLevel,\n isLine: isLine\n }\n \"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n @for (item of visibleNodes; track item; let isLast = $last) {\n <ng-template #treeNodeContent>\n <div\n class=\"tree-node\"\n [ngClass]=\"[\n itemHasChildren(item) ? 'has-children' : '',\n item.parentId ? 'has-parent' : ''\n ]\"\n >\n <div\n class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n [class.tree-node-selected]=\"item?.id === itemActiveId\"\n [routerLink]=\"item.path ? item.path : null\"\n [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n >\n <div class=\"flex gap-1 items-center\">\n @if (expandPosition === 'left') {\n @if (itemHasChildren(item)) {\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\">\n <i\n class=\"fa-solid fa-caret-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n } @else {\n <div class=\"w-[15px] h-[14px]\"></div>\n }\n }\n\n <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n @if ( type === 'checkbox' ) {\n <np-checkbox\n [input]=\"item.isChecked\"\n [type]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n } @if (type === 'icon') {\n <i\n class=\"fa-light\"\n [ngClass]=\"\n item?.childrens?.length\n ? item?.isExpanded\n ? item?.iconExpanded\n : item?.iconCollapsed\n : item?.iconLeaf\n \"\n ></i>\n }\n\n <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n </div>\n </div>\n\n <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n @if ((item?.actions?.length ?? 0) > 0){\n <np-action-bar\n class=\"w-full flex justify-end\"\n ngClass=\"\n {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n >\n </np-action-bar>\n }\n @if (expandPosition === 'right')\n {\n @if (itemHasChildren(item)){\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\" className=\"flex w-[17px]\">\n <i\n class=\"fa-solid fa-chevron-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n }\n @else {\n <div class=\"w-[17px]\"></div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: treeNodeContent,\n level: 0,\n max: item.level ?? 0,\n isLastByLevel: item.isLastByLevel,\n hasParentByLevel: item.hasParentByLevel,\n isLine: useLine\n }\n \"\n ></ng-container>\n }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NpActionBarComponent, selector: "np-action-bar", inputs: ["actions", "data", "notCompressMin", "isNotResponsive"] }] });
|
|
1349
|
+
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"] }] });
|
|
1304
1350
|
}
|
|
1305
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTreeComponent, decorators: [{
|
|
1306
1352
|
type: Component,
|
|
@@ -1310,7 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1310
1356
|
NpButtonComponent,
|
|
1311
1357
|
RouterModule,
|
|
1312
1358
|
NpActionBarComponent,
|
|
1313
|
-
], template: "<ng-template\n #wrapWithLevel\n let-content\n let-level=\"level\"\n let-max=\"max\"\n let-isLastByLevel=\"isLastByLevel\"\n let-hasParentByLevel=\"hasParentByLevel\"\n let-isLine=\"isLine\"\n>\n <div\n [ngClass]=\"[\n 'tree-line',\n 'level-' + level,\n isLine ? '' : 'no-line',\n isLastByLevel?.[level] ? 'is-last' : '',\n hasParentByLevel?.[level] ? 'has-parent' : '',\n expandPosition === 'right' ? 'expand-right' : '',\n ]\"\n >\n @if (level < max) {\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: content,\n level: level + 1,\n max: max,\n isLastByLevel: isLastByLevel,\n hasParentByLevel: hasParentByLevel,\n isLine: isLine\n }\n \"\n ></ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n </div>\n</ng-template>\n\n<div class=\"np-tree {{className}}\">\n @for (item of visibleNodes; track item; let isLast = $last) {\n <ng-template #treeNodeContent>\n <div\n class=\"tree-node\"\n [ngClass]=\"[\n itemHasChildren(item) ? 'has-children' : '',\n item.parentId ? 'has-parent' : ''\n ]\"\n >\n <div\n class=\"flex py-[7px] w-full min-h-[40px] bt-1 cursor-pointer tree-item group {{item.className}}\"\n [class.tree-node-selected]=\"item?.id === itemActiveId\"\n [routerLink]=\"item.path ? item.path : null\"\n [routerLinkActive]=\"item.path ? 'tree-node-selected' : ''\"\n >\n <div class=\"flex gap-1 items-center\">\n @if (expandPosition === 'left') {\n @if (itemHasChildren(item)) {\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\">\n <i\n class=\"fa-solid fa-caret-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n } @else {\n <div class=\"w-[15px] h-[14px]\"></div>\n }\n }\n\n <div class=\"flex items-center gap-1\" (click)=\"onSelectItem(item)\">\n @if ( type === 'checkbox' ) {\n <np-checkbox\n [input]=\"item.isChecked\"\n [type]=\"item.checkboxType || 'checkbox'\"\n size=\"md\"\n (valueChange)=\"onCheckItem(item)\"\n (click)=\"$event.stopPropagation()\"\n ></np-checkbox>\n } @if (type === 'icon') {\n <i\n class=\"fa-light\"\n [ngClass]=\"\n item?.childrens?.length\n ? item?.isExpanded\n ? item?.iconExpanded\n : item?.iconCollapsed\n : item?.iconLeaf\n \"\n ></i>\n }\n\n <span class=\"text-[16px] whitespace-nowrap\">{{ item?.name }}</span>\n </div>\n </div>\n\n <div class=\"px-2 w-full flex items-center justify-end gap-1\">\n @if ((item?.actions?.length ?? 0) > 0){\n <np-action-bar\n class=\"w-full flex justify-end\"\n ngClass=\"\n {{autoHideActions ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-200' : ''}}\n \"\n [actions]=\"item.actions ?? []\"\n [notCompressMin]=\"this.notCompressMin\"\n [isNotResponsive]=\"isCompactActions\"\n >\n </np-action-bar>\n }\n @if (expandPosition === 'right')\n {\n @if (itemHasChildren(item)){\n <np-button npType=\"icon\" npSize=\"bs\" (click)=\"onExpand(item)\" className=\"flex w-[17px]\">\n <i\n class=\"fa-solid fa-chevron-right\"\n [ngClass]=\"item?.isExpanded ? 'iconExpand' : ''\"\n style=\"color: rgba(102, 112, 133, 1)\"\n ></i>\n </np-button>\n }\n @else {\n <div class=\"w-[17px]\"></div>\n }\n }\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n wrapWithLevel;\n context: {\n $implicit: treeNodeContent,\n level: 0,\n max: item.level ?? 0,\n isLastByLevel: item.isLastByLevel,\n hasParentByLevel: item.hasParentByLevel,\n isLine: useLine\n }\n \"\n ></ng-container>\n }\n</div>\n", styles: [".np-tree .tree-node{transition:height .3s ease-out}.np-tree .iconExpand{transform:rotate(90deg);transition:transform .1s ease-in-out}.np-tree .icon-collapse{transition:transform .3s ease-in-out}.np-tree .tree-node-selected{background-color:#f9fafb}::ng-deep .np-tree np-action-bar div.justify-center{justify-content:end!important}.level-1{padding-left:40px}.level-1.expand-right{padding-left:30px}.tree-line .level-1{position:relative}.tree-line .level-1.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.expand-right.is-last:after{display:none}.tree-line .level-1:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-1:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-1.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-1.is-last:after{display:none}.level-2{padding-left:40px}.level-2.expand-right{padding-left:30px}.tree-line .level-2{position:relative}.tree-line .level-2.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.expand-right.is-last:after{display:none}.tree-line .level-2:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-2:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-2.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-2.is-last:after{display:none}.level-3{padding-left:40px}.level-3.expand-right{padding-left:30px}.tree-line .level-3{position:relative}.tree-line .level-3.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.expand-right.is-last:after{display:none}.tree-line .level-3:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-3:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-3.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-3.is-last:after{display:none}.level-4{padding-left:40px}.level-4.expand-right{padding-left:30px}.tree-line .level-4{position:relative}.tree-line .level-4.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.expand-right.is-last:after{display:none}.tree-line .level-4:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-4:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-4.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-4.is-last:after{display:none}.level-5{padding-left:40px}.level-5.expand-right{padding-left:30px}.tree-line .level-5{position:relative}.tree-line .level-5.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.expand-right.is-last:after{display:none}.tree-line .level-5:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-5:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-5.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-5.is-last:after{display:none}.level-6{padding-left:40px}.level-6.expand-right{padding-left:30px}.tree-line .level-6{position:relative}.tree-line .level-6.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.expand-right.is-last:after{display:none}.tree-line .level-6:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-6:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-6.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-6.is-last:after{display:none}.level-7{padding-left:40px}.level-7.expand-right{padding-left:30px}.tree-line .level-7{position:relative}.tree-line .level-7.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.expand-right.is-last:after{display:none}.tree-line .level-7:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-7:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-7.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-7.is-last:after{display:none}.level-8{padding-left:40px}.level-8.expand-right{padding-left:30px}.tree-line .level-8{position:relative}.tree-line .level-8.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.expand-right.is-last:after{display:none}.tree-line .level-8:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-8:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-8.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-8.is-last:after{display:none}.level-9{padding-left:40px}.level-9.expand-right{padding-left:30px}.tree-line .level-9{position:relative}.tree-line .level-9.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.expand-right.is-last:after{display:none}.tree-line .level-9:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-9:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-9.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-9.is-last:after{display:none}.level-10{padding-left:40px}.level-10.expand-right{padding-left:30px}.tree-line .level-10{position:relative}.tree-line .level-10.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.expand-right.is-last:after{display:none}.tree-line .level-10:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-10:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-10.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-10.is-last:after{display:none}.level-11{padding-left:40px}.level-11.expand-right{padding-left:30px}.tree-line .level-11{position:relative}.tree-line .level-11.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.expand-right.is-last:after{display:none}.tree-line .level-11:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-11:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-11.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-11.is-last:after{display:none}.level-12{padding-left:40px}.level-12.expand-right{padding-left:30px}.tree-line .level-12{position:relative}.tree-line .level-12.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.expand-right.is-last:after{display:none}.tree-line .level-12:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-12:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-12.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-12.is-last:after{display:none}.level-13{padding-left:40px}.level-13.expand-right{padding-left:30px}.tree-line .level-13{position:relative}.tree-line .level-13.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.expand-right.is-last:after{display:none}.tree-line .level-13:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-13:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-13.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-13.is-last:after{display:none}.level-14{padding-left:40px}.level-14.expand-right{padding-left:30px}.tree-line .level-14{position:relative}.tree-line .level-14.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.expand-right.is-last:after{display:none}.tree-line .level-14:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-14:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-14.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-14.is-last:after{display:none}.level-15{padding-left:40px}.level-15.expand-right{padding-left:30px}.tree-line .level-15{position:relative}.tree-line .level-15.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.expand-right.is-last:after{display:none}.tree-line .level-15:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-15:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-15.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-15.is-last:after{display:none}.level-16{padding-left:40px}.level-16.expand-right{padding-left:30px}.tree-line .level-16{position:relative}.tree-line .level-16.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.expand-right.is-last:after{display:none}.tree-line .level-16:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-16:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-16.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-16.is-last:after{display:none}.level-17{padding-left:40px}.level-17.expand-right{padding-left:30px}.tree-line .level-17{position:relative}.tree-line .level-17.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.expand-right.is-last:after{display:none}.tree-line .level-17:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-17:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-17.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-17.is-last:after{display:none}.level-18{padding-left:40px}.level-18.expand-right{padding-left:30px}.tree-line .level-18{position:relative}.tree-line .level-18.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.expand-right.is-last:after{display:none}.tree-line .level-18:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-18:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-18.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-18.is-last:after{display:none}.level-19{padding-left:40px}.level-19.expand-right{padding-left:30px}.tree-line .level-19{position:relative}.tree-line .level-19.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.expand-right.is-last:after{display:none}.tree-line .level-19:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-19:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-19.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-19.is-last:after{display:none}.level-20{padding-left:40px}.level-20.expand-right{padding-left:30px}.tree-line .level-20{position:relative}.tree-line .level-20.expand-right:before{content:\"\";position:absolute;top:0;bottom:0;left:6px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20.expand-right:after{content:\"\";position:absolute;top:20px;left:6px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.expand-right.is-last:before{content:\"\";position:absolute;top:0;left:6px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.expand-right.is-last:after{display:none}.tree-line .level-20:before{content:\"\";position:absolute;top:0;bottom:0;left:28px;width:2px;transform:translate(100%);background-color:#e4e7ec}.tree-line .level-20:after{content:\"\";position:absolute;top:20px;left:28px;width:10px;transform:translate(40%);height:2px;background-color:#e4e7ec}.tree-line .level-20.is-last:before{content:\"\";position:absolute;top:0;left:28px;width:10px;height:22px;background:transparent;transform:translate(20%);border-left:2px solid rgb(228,231,236);border-bottom:2px solid rgb(228,231,236);border-bottom-left-radius:4px;box-sizing:border-box}.tree-line .level-20.is-last:after{display:none}.tree-line:has(>.tree-line.has-parent):after{display:none}.tree-line.is-last:has(>.tree-line.has-parent):before{display:none}.tree-line.no-line:before,.tree-line.no-line:after{display:none!important}\n"] }]
|
|
1359
|
+
], 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"] }]
|
|
1314
1360
|
}], propDecorators: { type: [{
|
|
1315
1361
|
type: Input
|
|
1316
1362
|
}], expandPosition: [{
|
|
@@ -1357,7 +1403,6 @@ class NpPaginationComponent {
|
|
|
1357
1403
|
set pageIndex(value) {
|
|
1358
1404
|
if (value !== this._pageIndex) {
|
|
1359
1405
|
this._pageIndex = value;
|
|
1360
|
-
this.pageIndexChange.emit(this._pageIndex);
|
|
1361
1406
|
}
|
|
1362
1407
|
}
|
|
1363
1408
|
get pageSizeOptions() {
|
|
@@ -1366,7 +1411,6 @@ class NpPaginationComponent {
|
|
|
1366
1411
|
set pageSizeOptions(value) {
|
|
1367
1412
|
if (value !== this._pageSizeValue) {
|
|
1368
1413
|
this._pageSizeValue = value;
|
|
1369
|
-
this.pageSizeChange.emit(value);
|
|
1370
1414
|
this.pageIndex = 1;
|
|
1371
1415
|
this.calculatePageTotal();
|
|
1372
1416
|
}
|
|
@@ -1457,6 +1501,7 @@ class NpPaginationComponent {
|
|
|
1457
1501
|
changePage(newPage) {
|
|
1458
1502
|
if (typeof newPage === 'number' && newPage !== this.pageIndex) {
|
|
1459
1503
|
this.pageIndex = newPage;
|
|
1504
|
+
this.pageIndexChange.emit(this.pageIndex);
|
|
1460
1505
|
}
|
|
1461
1506
|
}
|
|
1462
1507
|
onDocumentClick(event) {
|
|
@@ -1471,11 +1516,11 @@ class NpPaginationComponent {
|
|
|
1471
1516
|
}
|
|
1472
1517
|
}
|
|
1473
1518
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1519
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpPaginationComponent, isStandalone: true, selector: "np-pagination", inputs: { type: "type", totalItems: "totalItems", pageSize: "pageSize", isReverse: "isReverse", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions" }, outputs: { pageSizeChange: "pageSizeChange", pageIndexChange: "pageIndexChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["dropdownTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1475
1520
|
}
|
|
1476
1521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpPaginationComponent, decorators: [{
|
|
1477
1522
|
type: Component,
|
|
1478
|
-
args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n" }]
|
|
1523
|
+
args: [{ selector: 'np-pagination', imports: [CommonModule, NpTypographyComponent, FormsModule], template: "<ng-container [ngSwitch]=\"type\">\n <div *ngSwitchCase=\"'basic'\">\n <div\n class=\"flex items-center justify-between gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center justify-between space-x-2 gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n\n <div class=\"flex gap-[1px] mx-0\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-3 py-2 text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[38px] flex items-center justify-center\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-1000 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'outlined'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center flex-1 space-x-2\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n </button>\n\n <div class=\"flex gap-[1px] mx-3\">\n <ng-container *ngFor=\"let page of getDisplayedPages()\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n class=\"px-[12px] py-[8px] text-gray-700 rounded-md hover:bg-gray-200 w-[40px] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">{{ page }}</np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-2\">...</span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"h-[36px] flex items-center justify-centercursor-pointer flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n [ngStyle]=\"dropdownStyleMap[type]\"\n *ngIf=\"isDropdownOpenMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'text'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <div class=\"flex gap-3\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"=cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'simple'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex justify-between items-center flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Previous</np-typography> -->\n </button>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" style=\"color: rgba(52, 64, 84, 1);\">\n Page {{pageIndex}} of {{pageTotal}}\n </np-typography>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed border border-[#D0D5DD] rounded-[4px] w-[38px] h-[36px] flex items-center justify-center focus:ring-4 focus:ring-[rgba(152,162,179,0.14)]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">Next</np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] bg-transparent cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'full'\">\n <div\n class=\"flex items-center gap-3\"\n [ngClass]=\"isReverse ? 'flex-row-reverse' : 'flex-row'\"\n >\n <div class=\"flex items-center w-full flex-1\">\n <button\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 1\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] rounded-l-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-left\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\" class=\"flex items-center\">\n <i class=\"fa-solid fa-arrow-left me-1\" style=\"color: #475467;\"></i> Previous\n </np-typography> -->\n </button>\n\n <div class=\"flex\">\n <ng-container *ngFor=\"let page of getDisplayedPages(); let last = last\">\n <button\n *ngIf=\"page !== '...'; else dots\"\n (click)=\"changePage(page)\"\n [class.bg-gray-200]=\"page === pageIndex\"\n [ngClass]=\"{\n 'border-y-1 border-s-1': !last,\n 'border-1': last\n }\"\n class=\"px-3 py-2 hover:bg-gray-200 w-[40px] h-[40px] border-[#D0D5DD] cursor-pointer\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(24, 34, 48, 1);\">\n {{ page }}\n </np-typography>\n </button>\n\n <ng-template #dots>\n <span class=\"px-3 py-2 w-[40px] h-[40px] border-y-1 border-s-1 border-[#D0D5DD] cursor-text\">\n ...\n </span>\n </ng-template>\n </ng-container>\n </div>\n\n <button\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex === pageTotal\"\n class=\"px-3 py-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed w-[52px] h-[40px] border-y-1 border-e-1 border-[#D0D5DD] rounded-r-[4px]\"\n >\n <i class=\"fa-solid fa-arrow-right\" style=\"color: #475467;\"></i>\n <!-- <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: #475467;\">\n Next <i class=\"fa-solid fa-arrow-right ms-1\" style=\"color: #475467;\"></i>\n </np-typography> -->\n </button>\n </div>\n\n <div *ngIf=\"pageSize?.length\" class=\"relative inline-block\">\n <div\n #dropdownTrigger\n class=\"px-[12px] py-[8px] border border-gray-300 rounded-sm bg-white cursor-pointer flex gap-3 items-center justify-between\"\n (click)=\"toggleDropdownByType(type)\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\" style=\"color: rgba(52, 64, 84, 1);\">\n {{ pageSizeOptions }} / page\n </np-typography>\n <i class=\"fa-solid fa-chevron-down\"></i>\n </div>\n\n <div\n *ngIf=\"isDropdownOpenMap[type]\"\n [ngStyle]=\"dropdownStyleMap[type]\"\n class=\"fixed z-100 mt-1 w-full bg-white border border-gray-300 rounded-sm shadow-md overflow-auto\"\n >\n <div\n *ngFor=\"let size of pageSize\"\n (click)=\"size !== pageSizeOptions && onSelectPageSize(size)\"\n class=\"px-[12px] py-[8px] hover:bg-gray-100\"\n [ngClass]=\"{\n 'cursor-not-allowed': size === pageSizeOptions,\n 'cursor-pointer': size !== pageSizeOptions\n }\"\n >\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" [ngClass]=\"{ 'text-gray-300': size === pageSizeOptions }\">\n {{ size }} / page\n </np-typography>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n</ng-container>\n" }]
|
|
1479
1524
|
}], propDecorators: { type: [{
|
|
1480
1525
|
type: Input
|
|
1481
1526
|
}], totalItems: [{
|
|
@@ -1526,11 +1571,11 @@ class NpScrollbarComponent {
|
|
|
1526
1571
|
}
|
|
1527
1572
|
}
|
|
1528
1573
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpScrollbarComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpScrollbarComponent, isStandalone: true, selector: "np-scrollbar", inputs: { width: "width", height: "height", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n #container\n class=\"custom-scrollbar overflow-auto\"\n [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["
|
|
1574
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpScrollbarComponent, isStandalone: true, selector: "np-scrollbar", inputs: { width: "width", height: "height", ngContent: "ngContent" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n #container\n class=\"custom-scrollbar overflow-auto\"\n [ngStyle]=\"{ 'max-width': width, 'max-height': height }\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1530
1575
|
}
|
|
1531
1576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpScrollbarComponent, decorators: [{
|
|
1532
1577
|
type: Component,
|
|
1533
|
-
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"
|
|
1578
|
+
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" }]
|
|
1534
1579
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { container: [{
|
|
1535
1580
|
type: ViewChild,
|
|
1536
1581
|
args: ['container', { static: true }]
|
|
@@ -1545,23 +1590,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1545
1590
|
class NpAlertComponent {
|
|
1546
1591
|
el;
|
|
1547
1592
|
renderer;
|
|
1593
|
+
_alertService;
|
|
1548
1594
|
type = 'notification';
|
|
1549
1595
|
state = 'info';
|
|
1550
1596
|
description = '';
|
|
1551
1597
|
title;
|
|
1552
1598
|
message;
|
|
1599
|
+
autoHideDelay = 3000;
|
|
1553
1600
|
autoHide = true;
|
|
1601
|
+
isFromService = false;
|
|
1554
1602
|
isMessageVisible = false;
|
|
1555
1603
|
opacity = 1;
|
|
1556
|
-
|
|
1604
|
+
padding = '16px';
|
|
1605
|
+
constructor(el, renderer, _alertService) {
|
|
1557
1606
|
this.el = el;
|
|
1558
1607
|
this.renderer = renderer;
|
|
1608
|
+
this._alertService = _alertService;
|
|
1559
1609
|
}
|
|
1560
1610
|
ngOnInit() {
|
|
1611
|
+
this._alertService.alert$.subscribe((data) => {
|
|
1612
|
+
this.type = data.type ?? 'notification';
|
|
1613
|
+
this.state = data.state ?? 'info';
|
|
1614
|
+
this.title = data.title;
|
|
1615
|
+
this.description = data.description;
|
|
1616
|
+
this.message = data.message;
|
|
1617
|
+
this.opacity = 1;
|
|
1618
|
+
this.padding = '16px';
|
|
1619
|
+
setTimeout(() => this.startFadeOut(), this.autoHideDelay);
|
|
1620
|
+
});
|
|
1621
|
+
if (this.isFromService) {
|
|
1622
|
+
this.closeAlert();
|
|
1623
|
+
return;
|
|
1624
|
+
}
|
|
1561
1625
|
if (this.autoHide) {
|
|
1562
|
-
setTimeout(() =>
|
|
1563
|
-
this.startFadeOut();
|
|
1564
|
-
}, 3000);
|
|
1626
|
+
setTimeout(() => this.startFadeOut(), this.autoHideDelay);
|
|
1565
1627
|
}
|
|
1566
1628
|
}
|
|
1567
1629
|
startFadeOut() {
|
|
@@ -1582,7 +1644,13 @@ class NpAlertComponent {
|
|
|
1582
1644
|
this.removeSelf();
|
|
1583
1645
|
}
|
|
1584
1646
|
removeSelf() {
|
|
1585
|
-
|
|
1647
|
+
if (this.isFromService) {
|
|
1648
|
+
this.opacity = 0;
|
|
1649
|
+
this.padding = '0px';
|
|
1650
|
+
}
|
|
1651
|
+
else {
|
|
1652
|
+
this.renderer.removeChild(this.el.nativeElement.parentNode, this.el.nativeElement);
|
|
1653
|
+
}
|
|
1586
1654
|
}
|
|
1587
1655
|
showMessege() {
|
|
1588
1656
|
this.isMessageVisible = !this.isMessageVisible;
|
|
@@ -1625,13 +1693,13 @@ class NpAlertComponent {
|
|
|
1625
1693
|
return { icon: '', color: '' };
|
|
1626
1694
|
}
|
|
1627
1695
|
}
|
|
1628
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHide: "autoHide" }, ngImport: i0, template: "<ng-container
|
|
1696
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NpAlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpAlertComponent, isStandalone: true, selector: "np-alert", inputs: { type: "type", state: "state", description: "description", title: "title", message: "message", autoHideDelay: "autoHideDelay", autoHide: "autoHide", isFromService: "isFromService" }, ngImport: i0, template: "<ng-container>\n <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\" [style.padding]=\"padding\">\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
1630
1698
|
}
|
|
1631
1699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, decorators: [{
|
|
1632
1700
|
type: Component,
|
|
1633
|
-
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container
|
|
1634
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
|
|
1701
|
+
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [style.opacity]=\"opacity\" [style.padding]=\"padding\">\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
|
|
1702
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { type: [{
|
|
1635
1703
|
type: Input
|
|
1636
1704
|
}], state: [{
|
|
1637
1705
|
type: Input
|
|
@@ -1641,8 +1709,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1641
1709
|
type: Input
|
|
1642
1710
|
}], message: [{
|
|
1643
1711
|
type: Input
|
|
1712
|
+
}], autoHideDelay: [{
|
|
1713
|
+
type: Input
|
|
1644
1714
|
}], autoHide: [{
|
|
1645
1715
|
type: Input
|
|
1716
|
+
}], isFromService: [{
|
|
1717
|
+
type: Input
|
|
1646
1718
|
}] } });
|
|
1647
1719
|
|
|
1648
1720
|
var ETypeNpBreadcrumb;
|
|
@@ -1666,6 +1738,7 @@ class NpBreadcrumbComponent {
|
|
|
1666
1738
|
iconBreakDown = 'fa-slash-forward';
|
|
1667
1739
|
isBgLast = false;
|
|
1668
1740
|
isGetFromUrl = false;
|
|
1741
|
+
isShowExpand = false;
|
|
1669
1742
|
breadcrumbs = [];
|
|
1670
1743
|
isExpanded = false;
|
|
1671
1744
|
ETypeNpBreadcrumb = ETypeNpBreadcrumb;
|
|
@@ -1684,6 +1757,10 @@ class NpBreadcrumbComponent {
|
|
|
1684
1757
|
}
|
|
1685
1758
|
ngAfterViewInit() {
|
|
1686
1759
|
const dotBreadcrum = document.getElementById(this.idBreadcrum);
|
|
1760
|
+
if (this.isShowExpand) {
|
|
1761
|
+
this.isExpanded = true;
|
|
1762
|
+
return;
|
|
1763
|
+
}
|
|
1687
1764
|
if (dotBreadcrum) {
|
|
1688
1765
|
dotBreadcrum.addEventListener('mouseover', () => {
|
|
1689
1766
|
this.isExpanded = true;
|
|
@@ -1740,7 +1817,7 @@ class NpBreadcrumbComponent {
|
|
|
1740
1817
|
this.isExpanded = !this.isExpanded;
|
|
1741
1818
|
}
|
|
1742
1819
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpBreadcrumbComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
1743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpBreadcrumbComponent, isStandalone: true, selector: "np-breadcrumb", inputs: { npType: "npType", isBorder: "isBorder", iconBreakDown: "iconBreakDown", isBgLast: "isBgLast", isGetFromUrl: "isGetFromUrl", breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n [id]=\"idBreadcrum\"\n>\n <!-- [class.border-breadcrumb]=\"isBorder\" -->\n <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n let last = $last) {\n <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n @if (isExpanded) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } @else { @if (index === 1 && breadcrumbs.length > 2) {\n <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n } @if (first || last) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } } }\n</div>\n\n<ng-template\n #contentTemplate\n let-item=\"item\"\n let-last=\"last\"\n let-isBgLast=\"isBgLast\"\n>\n <!-- [class.item-last]=\"last && isBgLast\" -->\n <div\n class=\"cursor-pointer text-[#475467]\"\n [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n (click)=\"onRedirect(item)\"\n >\n {{ item?.label }}\n </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1820
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpBreadcrumbComponent, isStandalone: true, selector: "np-breadcrumb", inputs: { npType: "npType", isBorder: "isBorder", iconBreakDown: "iconBreakDown", isBgLast: "isBgLast", isGetFromUrl: "isGetFromUrl", isShowExpand: "isShowExpand", breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n class=\"flex items-center gap-3 np-breadcrumb {{ npType }}\"\n [id]=\"idBreadcrum\"\n>\n <!-- [class.border-breadcrumb]=\"isBorder\" -->\n <i class=\"fa-light fa-house cursor-pointer\" (click)=\"onRedirect(null)\"></i>\n @for (item of breadcrumbs; track item; let index = $index; let first = $first;\n let last = $last) {\n <i class=\"fa-light {{ iconBreakDown }} text-[#D0D5DD]\"></i>\n @if (isExpanded) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } @else { @if (index === 1 && breadcrumbs.length > 2) {\n <div class=\"cursor-pointer\" (click)=\"onExpand()\">...</div>\n } @if (first || last) {\n <ng-container\n *ngTemplateOutlet=\"\n contentTemplate;\n context: { item: item, last: last, isBgLast: isBgLast }\n \"\n ></ng-container>\n } } }\n</div>\n\n<ng-template\n #contentTemplate\n let-item=\"item\"\n let-last=\"last\"\n let-isBgLast=\"isBgLast\"\n>\n <!-- [class.item-last]=\"last && isBgLast\" -->\n <div\n class=\"cursor-pointer text-[#475467]\"\n [class.item-last]=\"last && npType === ETypeNpBreadcrumb.HIGHLIGHT\"\n (click)=\"onRedirect(item)\"\n >\n {{ item?.label }}\n </div>\n</ng-template>\n", styles: [".np-breadcrumb{list-style:none;display:flex;margin:0;padding:4px 6px;min-height:36px}.np-breadcrumb .item-last{padding:3px 5px;border-radius:6px;background-color:#f9fafb;color:#344054}.np-breadcrumb.separators,.np-breadcrumb.highlighted{border-top:1px solid #eaecf0;border-bottom:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1744
1821
|
}
|
|
1745
1822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpBreadcrumbComponent, decorators: [{
|
|
1746
1823
|
type: Component,
|
|
@@ -1755,6 +1832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1755
1832
|
type: Input
|
|
1756
1833
|
}], isGetFromUrl: [{
|
|
1757
1834
|
type: Input
|
|
1835
|
+
}], isShowExpand: [{
|
|
1836
|
+
type: Input
|
|
1758
1837
|
}], breadcrumbs: [{
|
|
1759
1838
|
type: Input
|
|
1760
1839
|
}] } });
|
|
@@ -1834,28 +1913,25 @@ class NpTableComponent {
|
|
|
1834
1913
|
constructor(cdr) {
|
|
1835
1914
|
this.cdr = cdr;
|
|
1836
1915
|
}
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
this.syncRowHeights();
|
|
1857
|
-
}, 0);
|
|
1858
|
-
}
|
|
1916
|
+
selectAllSub;
|
|
1917
|
+
selectAllFc = new FormControl(false);
|
|
1918
|
+
isIndeterminateAll = false;
|
|
1919
|
+
currentPage = 1;
|
|
1920
|
+
_pageSize = [];
|
|
1921
|
+
currentPageSize = 10;
|
|
1922
|
+
paginationWidth = '100%';
|
|
1923
|
+
isAtStart = true;
|
|
1924
|
+
isAtEnd = true;
|
|
1925
|
+
_dataSource = [];
|
|
1926
|
+
sortKey = null;
|
|
1927
|
+
sortDirection = null;
|
|
1928
|
+
originalDataSource = [];
|
|
1929
|
+
activeFilterKey = null;
|
|
1930
|
+
searchKeyword = {};
|
|
1931
|
+
searchControls = {};
|
|
1932
|
+
selectedFilters = {};
|
|
1933
|
+
syncColumns = false;
|
|
1934
|
+
syncRows = false;
|
|
1859
1935
|
leftRows;
|
|
1860
1936
|
middleRows;
|
|
1861
1937
|
rightRows;
|
|
@@ -1865,12 +1941,15 @@ class NpTableComponent {
|
|
|
1865
1941
|
tableLeft;
|
|
1866
1942
|
tableMiddle;
|
|
1867
1943
|
tableRight;
|
|
1944
|
+
middleHeaderEls;
|
|
1945
|
+
middleBodyEls;
|
|
1946
|
+
filterIcons;
|
|
1947
|
+
dropdownPositionMap = {};
|
|
1868
1948
|
columns = [];
|
|
1869
1949
|
selectableType = null;
|
|
1870
1950
|
isSortable = false;
|
|
1871
1951
|
isFilterable = false;
|
|
1872
1952
|
isDeleteable = false;
|
|
1873
|
-
pageSize = [];
|
|
1874
1953
|
isUsePagination = true;
|
|
1875
1954
|
panigationType = 'basic';
|
|
1876
1955
|
state = 'normal';
|
|
@@ -1879,26 +1958,26 @@ class NpTableComponent {
|
|
|
1879
1958
|
classNameRight = ''; // className for right fixed table
|
|
1880
1959
|
scrollColumnsRange = null;
|
|
1881
1960
|
scrollWidth = '';
|
|
1961
|
+
scrollHeight = '';
|
|
1882
1962
|
isReverse = false;
|
|
1883
1963
|
showVerticalDivider = false;
|
|
1884
|
-
selectAllSub;
|
|
1885
|
-
selectAllFc = new FormControl(false);
|
|
1886
|
-
isIndeterminateAll = false;
|
|
1887
|
-
currentPage = 1;
|
|
1888
|
-
currentPageSize = this.pageSize[0];
|
|
1889
|
-
paginationWidth = '100%';
|
|
1890
|
-
isAtStart = true;
|
|
1891
|
-
isAtEnd = true;
|
|
1892
|
-
_dataSource = [];
|
|
1893
|
-
sortKey = null;
|
|
1894
|
-
sortDirection = null;
|
|
1895
1964
|
deleteSelectedRows = new EventEmitter();
|
|
1965
|
+
sortChange = new EventEmitter();
|
|
1966
|
+
filterChange = new EventEmitter();
|
|
1967
|
+
rowChecked = new EventEmitter();
|
|
1896
1968
|
set dataSource(value) {
|
|
1897
1969
|
this._dataSource =
|
|
1898
|
-
value?.map((row) =>
|
|
1899
|
-
|
|
1900
|
-
selectFc
|
|
1901
|
-
|
|
1970
|
+
value?.map((row) => {
|
|
1971
|
+
const selectFc = new FormControl(false);
|
|
1972
|
+
selectFc.valueChanges.subscribe((checked) => {
|
|
1973
|
+
this.rowChecked.emit({ row, checked: !!checked });
|
|
1974
|
+
});
|
|
1975
|
+
return {
|
|
1976
|
+
...row,
|
|
1977
|
+
selectFc,
|
|
1978
|
+
};
|
|
1979
|
+
}) || [];
|
|
1980
|
+
this.originalDataSource = [...this._dataSource];
|
|
1902
1981
|
this.currentPage = 1;
|
|
1903
1982
|
this.selectAllFc.setValue(false, { emitEvent: false });
|
|
1904
1983
|
this.isIndeterminateAll = false;
|
|
@@ -1919,6 +1998,32 @@ class NpTableComponent {
|
|
|
1919
1998
|
});
|
|
1920
1999
|
}
|
|
1921
2000
|
}
|
|
2001
|
+
set pageSize(value) {
|
|
2002
|
+
this._pageSize = value;
|
|
2003
|
+
this.currentPageSize = this._pageSize[0];
|
|
2004
|
+
}
|
|
2005
|
+
get pageSize() {
|
|
2006
|
+
return this._pageSize;
|
|
2007
|
+
}
|
|
2008
|
+
ngAfterViewInit() {
|
|
2009
|
+
setTimeout(() => {
|
|
2010
|
+
this.updatePaginationWidth();
|
|
2011
|
+
this.syncRowHeights();
|
|
2012
|
+
this.syncColumnWidths();
|
|
2013
|
+
});
|
|
2014
|
+
if (this.selectableType === 'checkbox') {
|
|
2015
|
+
this.bindSelectAllListener();
|
|
2016
|
+
}
|
|
2017
|
+
this.cdr.detectChanges();
|
|
2018
|
+
}
|
|
2019
|
+
ngOnInit() {
|
|
2020
|
+
const [start, end] = this.scrollColumnsRange || [
|
|
2021
|
+
0,
|
|
2022
|
+
this.columns.length - 1,
|
|
2023
|
+
];
|
|
2024
|
+
this.isAtStart = start === 0;
|
|
2025
|
+
this.isAtEnd = end === this.columns.length - 1;
|
|
2026
|
+
}
|
|
1922
2027
|
get fixedLeftColumns() {
|
|
1923
2028
|
if (!this.scrollColumnsRange)
|
|
1924
2029
|
return [];
|
|
@@ -1969,6 +2074,32 @@ class NpTableComponent {
|
|
|
1969
2074
|
if (this.rightHead)
|
|
1970
2075
|
this.rightHead.nativeElement.style.height = `${maxHead}px`;
|
|
1971
2076
|
}
|
|
2077
|
+
syncColumnWidths() {
|
|
2078
|
+
const headerEls = this.middleHeaderEls.toArray();
|
|
2079
|
+
const bodyEls = this.middleBodyEls.toArray();
|
|
2080
|
+
for (let i = 0; i < headerEls.length; i++) {
|
|
2081
|
+
headerEls[i]?.nativeElement.style.removeProperty('width');
|
|
2082
|
+
bodyEls[i]?.nativeElement.style.removeProperty('width');
|
|
2083
|
+
headerEls[i]?.nativeElement.style.removeProperty('min-width');
|
|
2084
|
+
bodyEls[i]?.nativeElement.style.removeProperty('min-width');
|
|
2085
|
+
}
|
|
2086
|
+
for (let i = 0; i < headerEls.length; i++) {
|
|
2087
|
+
const thEl = headerEls[i]?.nativeElement;
|
|
2088
|
+
const tdEl = bodyEls[i]?.nativeElement;
|
|
2089
|
+
const thWidth = thEl?.offsetWidth || 0;
|
|
2090
|
+
const tdWidth = tdEl?.offsetWidth || 0;
|
|
2091
|
+
const max = Math.max(thWidth, tdWidth);
|
|
2092
|
+
const min = Math.min(thWidth, tdWidth);
|
|
2093
|
+
if (thEl) {
|
|
2094
|
+
thEl.style.width = `${max}px`;
|
|
2095
|
+
thEl.style.minWidth = `${min}px`;
|
|
2096
|
+
}
|
|
2097
|
+
if (tdEl) {
|
|
2098
|
+
tdEl.style.width = `${max}px`;
|
|
2099
|
+
tdEl.style.minWidth = `${min}px`;
|
|
2100
|
+
}
|
|
2101
|
+
}
|
|
2102
|
+
}
|
|
1972
2103
|
updatePaginationWidth() {
|
|
1973
2104
|
const wLeft = this.tableLeft?.nativeElement.offsetWidth || 0;
|
|
1974
2105
|
const wMid = this.tableMiddle?.nativeElement.offsetWidth || 0;
|
|
@@ -1981,19 +2112,27 @@ class NpTableComponent {
|
|
|
1981
2112
|
this.selectAllSub = this.selectAllFc.valueChanges.subscribe((checked) => {
|
|
1982
2113
|
this._dataSource?.forEach((row) => {
|
|
1983
2114
|
row.selectFc.patchValue(checked, { emitEvent: false });
|
|
2115
|
+
this.rowChecked.emit({ row, checked: !!checked });
|
|
1984
2116
|
});
|
|
1985
2117
|
this.isIndeterminateAll = false;
|
|
1986
2118
|
});
|
|
1987
2119
|
}
|
|
1988
|
-
filterIcons;
|
|
1989
|
-
dropdownPositionMap = {};
|
|
1990
2120
|
get filteredData() {
|
|
1991
2121
|
return this._dataSource.filter((row) => {
|
|
1992
|
-
for (const
|
|
1993
|
-
const selectedSet = this.selectedFilters[
|
|
1994
|
-
if (selectedSet
|
|
2122
|
+
for (const colKey in this.selectedFilters) {
|
|
2123
|
+
const selectedSet = this.selectedFilters[colKey];
|
|
2124
|
+
if (!selectedSet || selectedSet.size === 0)
|
|
2125
|
+
continue;
|
|
2126
|
+
const col = this.columns.find((c) => c.key === colKey);
|
|
2127
|
+
const rowValue = row[colKey];
|
|
2128
|
+
const match = Array.from(selectedSet).some((filterValue) => {
|
|
2129
|
+
if (col?.filterFn) {
|
|
2130
|
+
return col.filterFn(rowValue, filterValue);
|
|
2131
|
+
}
|
|
2132
|
+
return rowValue === filterValue;
|
|
2133
|
+
});
|
|
2134
|
+
if (!match)
|
|
1995
2135
|
return false;
|
|
1996
|
-
}
|
|
1997
2136
|
}
|
|
1998
2137
|
return true;
|
|
1999
2138
|
});
|
|
@@ -2019,31 +2158,42 @@ class NpTableComponent {
|
|
|
2019
2158
|
onSortColumn(column) {
|
|
2020
2159
|
if (!column?.key)
|
|
2021
2160
|
return;
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2161
|
+
const modes = column.sortDirection || ['asc', 'desc', ''];
|
|
2162
|
+
const current = this.sortKey === column.key ? this.sortDirection || '' : '';
|
|
2163
|
+
const currentIndex = modes.indexOf(current);
|
|
2164
|
+
const nextIndex = (currentIndex + 1) % modes.length;
|
|
2165
|
+
const nextDirection = modes[nextIndex];
|
|
2166
|
+
this.sortKey = column.key;
|
|
2167
|
+
this.sortDirection = nextDirection === '' ? null : nextDirection;
|
|
2168
|
+
this.sortChange.emit({
|
|
2169
|
+
key: column.key,
|
|
2170
|
+
direction: this.sortDirection,
|
|
2171
|
+
});
|
|
2172
|
+
if (column.isSortAPI) {
|
|
2173
|
+
return;
|
|
2028
2174
|
}
|
|
2029
2175
|
if (!this.sortDirection) {
|
|
2030
|
-
this._dataSource
|
|
2031
|
-
|
|
2032
|
-
else {
|
|
2033
|
-
this._dataSource.sort((a, b) => {
|
|
2034
|
-
const aValue = a[this.sortKey];
|
|
2035
|
-
const bValue = b[this.sortKey];
|
|
2036
|
-
const aNum = parseFloat(aValue);
|
|
2037
|
-
const bNum = parseFloat(bValue);
|
|
2038
|
-
const isNumber = !isNaN(aNum) && !isNaN(bNum);
|
|
2039
|
-
if (isNumber) {
|
|
2040
|
-
return this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
|
|
2041
|
-
}
|
|
2042
|
-
return this.sortDirection === 'asc'
|
|
2043
|
-
? String(aValue).localeCompare(String(bValue))
|
|
2044
|
-
: String(bValue).localeCompare(String(aValue));
|
|
2045
|
-
});
|
|
2176
|
+
this._dataSource = [...this.originalDataSource];
|
|
2177
|
+
return;
|
|
2046
2178
|
}
|
|
2179
|
+
const sortFn = column.sortFn;
|
|
2180
|
+
this._dataSource.sort((a, b) => {
|
|
2181
|
+
if (sortFn) {
|
|
2182
|
+
const result = sortFn(a, b);
|
|
2183
|
+
return this.sortDirection === 'asc' ? result : -result;
|
|
2184
|
+
}
|
|
2185
|
+
const aValue = a[column.key];
|
|
2186
|
+
const bValue = b[column.key];
|
|
2187
|
+
const aNum = parseFloat(aValue);
|
|
2188
|
+
const bNum = parseFloat(bValue);
|
|
2189
|
+
const isNumber = !isNaN(aNum) && !isNaN(bNum);
|
|
2190
|
+
if (isNumber) {
|
|
2191
|
+
return this.sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
|
|
2192
|
+
}
|
|
2193
|
+
return this.sortDirection === 'asc'
|
|
2194
|
+
? String(aValue).localeCompare(String(bValue))
|
|
2195
|
+
: String(bValue).localeCompare(String(aValue));
|
|
2196
|
+
});
|
|
2047
2197
|
this.currentPage = 1;
|
|
2048
2198
|
}
|
|
2049
2199
|
onChangeSelectColumn($event) {
|
|
@@ -2070,10 +2220,6 @@ class NpTableComponent {
|
|
|
2070
2220
|
}
|
|
2071
2221
|
onRefresh() { }
|
|
2072
2222
|
onContactSupport() { }
|
|
2073
|
-
activeFilterKey = null;
|
|
2074
|
-
searchKeyword = {};
|
|
2075
|
-
searchControls = {};
|
|
2076
|
-
selectedFilters = {};
|
|
2077
2223
|
toggleFilter(key) {
|
|
2078
2224
|
this.activeFilterKey = this.activeFilterKey === key ? null : key;
|
|
2079
2225
|
if (!this.searchControls[key]) {
|
|
@@ -2100,35 +2246,25 @@ class NpTableComponent {
|
|
|
2100
2246
|
}
|
|
2101
2247
|
getDistinctFilteredValues(colKey) {
|
|
2102
2248
|
const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
|
|
2103
|
-
const
|
|
2104
|
-
|
|
2105
|
-
for (const key in this.selectedFilters) {
|
|
2106
|
-
if (key === colKey)
|
|
2107
|
-
continue;
|
|
2108
|
-
const selectedSet = this.selectedFilters[key];
|
|
2109
|
-
if (selectedSet && selectedSet.size > 0 && !selectedSet.has(row[key])) {
|
|
2110
|
-
return false;
|
|
2111
|
-
}
|
|
2112
|
-
}
|
|
2113
|
-
return true;
|
|
2114
|
-
});
|
|
2115
|
-
filteredExcludingCurrent.forEach((row) => {
|
|
2249
|
+
const uniqueLabels = new Set();
|
|
2250
|
+
this._dataSource.forEach((row) => {
|
|
2116
2251
|
const value = row[colKey];
|
|
2117
|
-
if (
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
return values.sort((a, b) => {
|
|
2125
|
-
if (allNumbers) {
|
|
2126
|
-
return parseFloat(a) - parseFloat(b);
|
|
2252
|
+
if (Array.isArray(value)) {
|
|
2253
|
+
value.forEach((item) => {
|
|
2254
|
+
const label = (item?.label || '').toString();
|
|
2255
|
+
if (label.toLowerCase().includes(keyword)) {
|
|
2256
|
+
uniqueLabels.add(label);
|
|
2257
|
+
}
|
|
2258
|
+
});
|
|
2127
2259
|
}
|
|
2128
2260
|
else {
|
|
2129
|
-
|
|
2261
|
+
const label = value?.toString() || '';
|
|
2262
|
+
if (label.toLowerCase().includes(keyword)) {
|
|
2263
|
+
uniqueLabels.add(label);
|
|
2264
|
+
}
|
|
2130
2265
|
}
|
|
2131
2266
|
});
|
|
2267
|
+
return Array.from(uniqueLabels).sort((a, b) => a.localeCompare(b));
|
|
2132
2268
|
}
|
|
2133
2269
|
getFilteredColumnValues(colKey) {
|
|
2134
2270
|
const keyword = this.searchKeyword[colKey]?.toLowerCase() || '';
|
|
@@ -2149,12 +2285,27 @@ class NpTableComponent {
|
|
|
2149
2285
|
this.selectedFilters[colKey].delete(value);
|
|
2150
2286
|
}
|
|
2151
2287
|
this.currentPage = 1;
|
|
2288
|
+
const col = this.columns.find((c) => c.key === colKey);
|
|
2289
|
+
if (col?.isFilterAPI) {
|
|
2290
|
+
this.filterChange.emit({
|
|
2291
|
+
key: colKey,
|
|
2292
|
+
filters: Array.from(this.selectedFilters[colKey]),
|
|
2293
|
+
});
|
|
2294
|
+
}
|
|
2152
2295
|
if (this.activeFilterKey && this.activeFilterKey !== colKey) {
|
|
2153
2296
|
const currentControl = this.searchControls[this.activeFilterKey];
|
|
2154
2297
|
const value = currentControl?.value || '';
|
|
2155
2298
|
currentControl?.setValue(value);
|
|
2156
2299
|
}
|
|
2157
2300
|
}
|
|
2301
|
+
onClearFilter(colKey) {
|
|
2302
|
+
this.selectedFilters[colKey] = new Set();
|
|
2303
|
+
this.searchControls[colKey]?.setValue('');
|
|
2304
|
+
this.currentPage = 1;
|
|
2305
|
+
if (this.activeFilterKey === colKey) {
|
|
2306
|
+
this.activeFilterKey = null;
|
|
2307
|
+
}
|
|
2308
|
+
}
|
|
2158
2309
|
onClickOutside(event) {
|
|
2159
2310
|
const clickedInside = this.filterIcons?.some((el) => el.nativeElement.contains(event.target));
|
|
2160
2311
|
const dropdownClicked = Object.keys(this.dropdownPositionMap).some((key) => {
|
|
@@ -2169,10 +2320,13 @@ class NpTableComponent {
|
|
|
2169
2320
|
this.activeFilterKey = null;
|
|
2170
2321
|
}
|
|
2171
2322
|
onResizeWindow() {
|
|
2172
|
-
setTimeout(() =>
|
|
2323
|
+
setTimeout(() => {
|
|
2324
|
+
this.syncRowHeights();
|
|
2325
|
+
this.syncColumnWidths();
|
|
2326
|
+
}, 0);
|
|
2173
2327
|
}
|
|
2174
2328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", pageSize: "pageSize", isUsePagination: "isUsePagination", panigationType: "panigationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource" }, outputs: { deleteSelectedRows: "deleteSelectedRows" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResizeWindow()" } }, viewQueries: [{ propertyName: "leftHead", first: true, predicate: ["leftHead"], descendants: true, read: ElementRef }, { propertyName: "middleHead", first: true, predicate: ["middleHead"], descendants: true, read: ElementRef }, { propertyName: "rightHead", first: true, predicate: ["rightHead"], descendants: true, read: ElementRef }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "leftRows", predicate: ["leftRow"], descendants: true, read: ElementRef }, { propertyName: "middleRows", predicate: ["middleRow"], descendants: true, read: ElementRef }, { propertyName: "rightRows", predicate: ["rightRow"], descendants: true, read: ElementRef }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n\n @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row) {\n <tr>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n @else {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"!col.headerTemplate\">\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"isSortable && !col.template\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"text\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"py-2 flex items-center\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n style =\"min-width: 100px;\"\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n <div>{{ row[col.key] }}</div>\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", isUsePagination: "isUsePagination", panigationType: "panigationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", scrollHeight: "scrollHeight", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource", pageSize: "pageSize" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResizeWindow()" } }, viewQueries: [{ propertyName: "leftHead", first: true, predicate: ["leftHead"], descendants: true, read: ElementRef }, { propertyName: "middleHead", first: true, predicate: ["middleHead"], descendants: true, read: ElementRef }, { propertyName: "rightHead", first: true, predicate: ["rightHead"], descendants: true, read: ElementRef }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "leftRows", predicate: ["leftRow"], descendants: true, read: ElementRef }, { propertyName: "middleRows", predicate: ["middleRow"], descendants: true, read: ElementRef }, { propertyName: "rightRows", predicate: ["rightRow"], descendants: true, read: ElementRef }, { propertyName: "middleHeaderEls", predicate: ["middleHeader"], descendants: true, read: ElementRef }, { propertyName: "middleBodyEls", predicate: ["middleBody"], descendants: true, read: ElementRef }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table w-full rounded-t-xl mx-auto {{ className }} np-table-header\">\n <thead class=\"sticky top-0 bg-white z-99\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n </table>\n <div \n class=\"np-table np-table-all rounded-b-xl\"\n [style.max-height]=\"scrollHeight\"\n style=\"overflow-y: auto;\"\n >\n <table class=\"w-full mx-auto {{ className }} rounded-b-xl np-table\">\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table np-table-all rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table np-table-all scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table np-table-all rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n \n }\n} @else {\n <div class=\"np-table np-table-all rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n #middleBody\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;overflow:hidden;white-space:nowrap}.np-table .select-column{width:40px;max-width:40px}.np-table-header{border-top:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 -2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-body{border-bottom:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-all{border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2176
2330
|
}
|
|
2177
2331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, decorators: [{
|
|
2178
2332
|
type: Component,
|
|
@@ -2186,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2186
2340
|
NpScrollbarComponent,
|
|
2187
2341
|
NpInputFieldComponent,
|
|
2188
2342
|
FormsModule,
|
|
2189
|
-
], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table rounded-xl my-[15px] mx-auto {{ className }}\">\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n\n @else if (_dataSource.length > 0) {\n @for (row of pagedData; track row) {\n <tr>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n @else {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"!col.headerTemplate\">\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"isSortable && !col.template\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"isFilterable && !col.template\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"text\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"py-2 flex items-center\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n style =\"min-width: 100px;\"\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n <div>{{ row[col.key] }}</div>\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;overflow:hidden;box-shadow:0 1px 2px #1018280f;box-shadow:0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}::-webkit-scrollbar{background-color:transparent;width:8px;height:8px}::-webkit-scrollbar-thumb{background-color:#eaecf0;border-radius:8px}\n"] }]
|
|
2343
|
+
], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <table class=\"np-table w-full rounded-t-xl mx-auto {{ className }} np-table-header\">\n <thead class=\"sticky top-0 bg-white z-99\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n </table>\n <div \n class=\"np-table np-table-all rounded-b-xl\"\n [style.max-height]=\"scrollHeight\"\n style=\"overflow-y: auto;\"\n >\n <table class=\"w-full mx-auto {{ className }} rounded-b-xl np-table\">\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table np-table-all rounded-l-xl fixed-left z-10 {{ classNameLeft }}\" #tableLeft>\n <thead>\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr #leftHead>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow\"\n style=\"overflow-x: auto;\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table np-table-all scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr #middleHead>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #middleRow>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table np-table-all rounded-r-xl fixed-right z-10 {{ classNameLeft }}\" #tableRight>\n <thead>\n <tr #rightHead>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr #rightRow>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n \n }\n} @else {\n <div class=\"np-table np-table-all rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div *ngIf=\"getDistinctFilteredValues(col.key).length > 0\">\n <div *ngFor=\"let value of getDistinctFilteredValues(col.key)\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"getDistinctFilteredValues(col.key).length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n #middleBody\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;overflow:hidden;white-space:nowrap}.np-table .select-column{width:40px;max-width:40px}.np-table-header{border-top:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 -2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-body{border-bottom:1px solid #eaecf0;border-left:1px solid #eaecf0;border-right:1px solid #eaecf0;box-shadow:0 2px 4px -2px #00000014,-2px 0 4px -2px #0000000f,2px 0 4px -2px #0000000f}.np-table-all{border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}\n"] }]
|
|
2190
2344
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leftRows: [{
|
|
2191
2345
|
type: ViewChildren,
|
|
2192
2346
|
args: ['leftRow', { read: ElementRef }]
|
|
@@ -2214,6 +2368,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2214
2368
|
}], tableRight: [{
|
|
2215
2369
|
type: ViewChild,
|
|
2216
2370
|
args: ['tableRight', { static: false }]
|
|
2371
|
+
}], middleHeaderEls: [{
|
|
2372
|
+
type: ViewChildren,
|
|
2373
|
+
args: ['middleHeader', { read: ElementRef }]
|
|
2374
|
+
}], middleBodyEls: [{
|
|
2375
|
+
type: ViewChildren,
|
|
2376
|
+
args: ['middleBody', { read: ElementRef }]
|
|
2377
|
+
}], filterIcons: [{
|
|
2378
|
+
type: ViewChildren,
|
|
2379
|
+
args: ['filterIcon']
|
|
2217
2380
|
}], columns: [{
|
|
2218
2381
|
type: Input
|
|
2219
2382
|
}], selectableType: [{
|
|
@@ -2224,8 +2387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2224
2387
|
type: Input
|
|
2225
2388
|
}], isDeleteable: [{
|
|
2226
2389
|
type: Input
|
|
2227
|
-
}], pageSize: [{
|
|
2228
|
-
type: Input
|
|
2229
2390
|
}], isUsePagination: [{
|
|
2230
2391
|
type: Input
|
|
2231
2392
|
}], panigationType: [{
|
|
@@ -2242,17 +2403,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2242
2403
|
type: Input
|
|
2243
2404
|
}], scrollWidth: [{
|
|
2244
2405
|
type: Input
|
|
2406
|
+
}], scrollHeight: [{
|
|
2407
|
+
type: Input
|
|
2245
2408
|
}], isReverse: [{
|
|
2246
2409
|
type: Input
|
|
2247
2410
|
}], showVerticalDivider: [{
|
|
2248
2411
|
type: Input
|
|
2249
2412
|
}], deleteSelectedRows: [{
|
|
2250
2413
|
type: Output
|
|
2414
|
+
}], sortChange: [{
|
|
2415
|
+
type: Output
|
|
2416
|
+
}], filterChange: [{
|
|
2417
|
+
type: Output
|
|
2418
|
+
}], rowChecked: [{
|
|
2419
|
+
type: Output
|
|
2251
2420
|
}], dataSource: [{
|
|
2252
2421
|
type: Input
|
|
2253
|
-
}],
|
|
2254
|
-
type:
|
|
2255
|
-
args: ['filterIcon']
|
|
2422
|
+
}], pageSize: [{
|
|
2423
|
+
type: Input
|
|
2256
2424
|
}], onClickOutside: [{
|
|
2257
2425
|
type: HostListener,
|
|
2258
2426
|
args: ['document:click', ['$event']]
|
|
@@ -2267,13 +2435,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2267
2435
|
class NpTabComponent {
|
|
2268
2436
|
_Router;
|
|
2269
2437
|
_ActivatedRoute;
|
|
2438
|
+
headerWrapperRef;
|
|
2439
|
+
scrollContainerRef;
|
|
2440
|
+
tabItemRefs;
|
|
2270
2441
|
tabs = [];
|
|
2442
|
+
className = '';
|
|
2443
|
+
subClassName = '';
|
|
2271
2444
|
tabActive = '';
|
|
2272
2445
|
isLink = false;
|
|
2273
2446
|
npStyle = 'button';
|
|
2274
2447
|
npDirection = 'horizontal';
|
|
2448
|
+
minWidthItem;
|
|
2275
2449
|
onChange = new EventEmitter();
|
|
2276
2450
|
indexActive = 0;
|
|
2451
|
+
scrollLeftButton = false;
|
|
2452
|
+
scrollRightButton = false;
|
|
2277
2453
|
constructor(_Router, _ActivatedRoute) {
|
|
2278
2454
|
this._Router = _Router;
|
|
2279
2455
|
this._ActivatedRoute = _ActivatedRoute;
|
|
@@ -2305,21 +2481,84 @@ class NpTabComponent {
|
|
|
2305
2481
|
this.tabActive = tab.key;
|
|
2306
2482
|
this.indexActive = index;
|
|
2307
2483
|
this.onChange.emit(tab);
|
|
2308
|
-
if (
|
|
2309
|
-
this._Router.navigate([], {
|
|
2310
|
-
|
|
2311
|
-
queryParams: { tab: index },
|
|
2312
|
-
queryParamsHandling: 'merge',
|
|
2484
|
+
if (this.isLink && tab.path) {
|
|
2485
|
+
this._Router.navigate([tab.path], {
|
|
2486
|
+
queryParams: this._ActivatedRoute.snapshot.queryParams,
|
|
2313
2487
|
});
|
|
2314
2488
|
}
|
|
2489
|
+
// if (tab?.path && this.isLink) {
|
|
2490
|
+
// this._Router.navigate([], {
|
|
2491
|
+
// relativeTo: this._ActivatedRoute,
|
|
2492
|
+
// queryParams: { tab: index },
|
|
2493
|
+
// queryParamsHandling: 'merge',
|
|
2494
|
+
// });
|
|
2495
|
+
// }
|
|
2496
|
+
}
|
|
2497
|
+
updateScrollButtons = () => {
|
|
2498
|
+
const wrapper = this.headerWrapperRef?.nativeElement;
|
|
2499
|
+
if (!wrapper)
|
|
2500
|
+
return;
|
|
2501
|
+
const scrollLeft = wrapper.scrollLeft;
|
|
2502
|
+
const scrollWidth = wrapper.scrollWidth;
|
|
2503
|
+
const clientWidth = wrapper.clientWidth;
|
|
2504
|
+
this.scrollLeftButton = scrollLeft > 0;
|
|
2505
|
+
this.scrollRightButton = scrollLeft + clientWidth < Math.ceil(scrollWidth);
|
|
2506
|
+
};
|
|
2507
|
+
scrollLeft() {
|
|
2508
|
+
const wrapper = this.headerWrapperRef?.nativeElement;
|
|
2509
|
+
if (!wrapper)
|
|
2510
|
+
return;
|
|
2511
|
+
const pageWidth = wrapper.clientWidth;
|
|
2512
|
+
wrapper.scrollBy({ left: -pageWidth, behavior: 'smooth' });
|
|
2513
|
+
}
|
|
2514
|
+
scrollRight() {
|
|
2515
|
+
const wrapper = this.headerWrapperRef?.nativeElement;
|
|
2516
|
+
if (!wrapper)
|
|
2517
|
+
return;
|
|
2518
|
+
const pageWidth = wrapper.clientWidth;
|
|
2519
|
+
wrapper.scrollBy({ left: pageWidth, behavior: 'smooth' });
|
|
2520
|
+
}
|
|
2521
|
+
ngAfterViewInit() {
|
|
2522
|
+
const wrapper = this.headerWrapperRef?.nativeElement;
|
|
2523
|
+
if (wrapper) {
|
|
2524
|
+
wrapper.addEventListener('scroll', this.updateScrollButtons);
|
|
2525
|
+
}
|
|
2526
|
+
window.addEventListener('resize', this.updateScrollButtons);
|
|
2527
|
+
setTimeout(() => {
|
|
2528
|
+
this.updateScrollButtons();
|
|
2529
|
+
}, 0);
|
|
2530
|
+
}
|
|
2531
|
+
ngOnDestroy() {
|
|
2532
|
+
const wrapper = this.headerWrapperRef?.nativeElement;
|
|
2533
|
+
if (wrapper) {
|
|
2534
|
+
wrapper.removeEventListener('scroll', this.updateScrollButtons);
|
|
2535
|
+
}
|
|
2536
|
+
}
|
|
2537
|
+
onResize() {
|
|
2538
|
+
this.updateScrollButtons();
|
|
2315
2539
|
}
|
|
2316
2540
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
2317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection" }, outputs: { onChange: "onChange" },
|
|
2541
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTabComponent, isStandalone: true, selector: "np-tab", inputs: { tabs: "tabs", className: "className", subClassName: "subClassName", tabActive: "tabActive", isLink: "isLink", npStyle: "npStyle", npDirection: "npDirection", minWidthItem: "minWidthItem" }, outputs: { onChange: "onChange" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "w-full" }, viewQueries: [{ propertyName: "headerWrapperRef", first: true, predicate: ["headerWrapper"], descendants: true }, { propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div\n class=\"np-tab h-full relative {{className}}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n <div \n #scrollContainer class=\"flex w-fit w-full\" \n [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n <div #tabItem class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if(first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
2318
2542
|
}
|
|
2319
2543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, decorators: [{
|
|
2320
2544
|
type: Component,
|
|
2321
|
-
args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule],
|
|
2322
|
-
|
|
2545
|
+
args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], host: {
|
|
2546
|
+
class: 'w-full'
|
|
2547
|
+
}, template: "<div\n class=\"np-tab h-full relative {{className}}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n <div \n #scrollContainer class=\"flex w-fit w-full\" \n [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n <div #tabItem class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if(first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}\n"] }]
|
|
2548
|
+
}], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { headerWrapperRef: [{
|
|
2549
|
+
type: ViewChild,
|
|
2550
|
+
args: ['headerWrapper', { static: false }]
|
|
2551
|
+
}], scrollContainerRef: [{
|
|
2552
|
+
type: ViewChild,
|
|
2553
|
+
args: ['scrollContainer', { static: false }]
|
|
2554
|
+
}], tabItemRefs: [{
|
|
2555
|
+
type: ViewChildren,
|
|
2556
|
+
args: ['tabItem']
|
|
2557
|
+
}], tabs: [{
|
|
2558
|
+
type: Input
|
|
2559
|
+
}], className: [{
|
|
2560
|
+
type: Input
|
|
2561
|
+
}], subClassName: [{
|
|
2323
2562
|
type: Input
|
|
2324
2563
|
}], tabActive: [{
|
|
2325
2564
|
type: Input
|
|
@@ -2329,8 +2568,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2329
2568
|
type: Input
|
|
2330
2569
|
}], npDirection: [{
|
|
2331
2570
|
type: Input
|
|
2571
|
+
}], minWidthItem: [{
|
|
2572
|
+
type: Input
|
|
2332
2573
|
}], onChange: [{
|
|
2333
2574
|
type: Output
|
|
2575
|
+
}], onResize: [{
|
|
2576
|
+
type: HostListener,
|
|
2577
|
+
args: ['window:resize']
|
|
2334
2578
|
}] } });
|
|
2335
2579
|
|
|
2336
2580
|
class NpResizeComponent {
|
|
@@ -2546,6 +2790,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2546
2790
|
type: Output
|
|
2547
2791
|
}] } });
|
|
2548
2792
|
|
|
2793
|
+
class NpConfirmTemplateComponent {
|
|
2794
|
+
// @Input() modalButton: string | TemplateRef<any> = '';
|
|
2795
|
+
modalTitle = '';
|
|
2796
|
+
modalDescriptions = '';
|
|
2797
|
+
modalType = 'notification';
|
|
2798
|
+
modalState = 'default';
|
|
2799
|
+
useIcon = true;
|
|
2800
|
+
useCheckBox = true;
|
|
2801
|
+
cancelText = 'Cancel';
|
|
2802
|
+
okText = 'OK';
|
|
2803
|
+
modalContent;
|
|
2804
|
+
// @Input() modalFooter?: TemplateRef<any>;
|
|
2805
|
+
loadingOK = false;
|
|
2806
|
+
ok = new EventEmitter();
|
|
2807
|
+
cancel = new EventEmitter();
|
|
2808
|
+
checkbox = new EventEmitter();
|
|
2809
|
+
isVisible = false;
|
|
2810
|
+
isOkLoading = false;
|
|
2811
|
+
modalWidth = 544;
|
|
2812
|
+
checkboxControl = new FormControl(false);
|
|
2813
|
+
ngOnInit() {
|
|
2814
|
+
if (this.modalType === 'confirmation') {
|
|
2815
|
+
this.modalWidth = 400;
|
|
2816
|
+
}
|
|
2817
|
+
else if (this.modalType === 'notification') {
|
|
2818
|
+
this.modalWidth = 544;
|
|
2819
|
+
}
|
|
2820
|
+
}
|
|
2821
|
+
isTemplate(value) {
|
|
2822
|
+
return value instanceof TemplateRef;
|
|
2823
|
+
}
|
|
2824
|
+
get iconPath() {
|
|
2825
|
+
switch (this.modalState) {
|
|
2826
|
+
case 'error':
|
|
2827
|
+
return 'assets/images/error.png';
|
|
2828
|
+
case 'success':
|
|
2829
|
+
return 'assets/images/success.png';
|
|
2830
|
+
case 'warning':
|
|
2831
|
+
return 'assets/images/warning.png';
|
|
2832
|
+
case 'default':
|
|
2833
|
+
default:
|
|
2834
|
+
return 'assets/images/default.png';
|
|
2835
|
+
}
|
|
2836
|
+
}
|
|
2837
|
+
showModal() {
|
|
2838
|
+
this.isVisible = true;
|
|
2839
|
+
}
|
|
2840
|
+
handleOk() {
|
|
2841
|
+
this.ok.emit();
|
|
2842
|
+
this.isVisible = false;
|
|
2843
|
+
}
|
|
2844
|
+
handleCancel() {
|
|
2845
|
+
this.isVisible = false;
|
|
2846
|
+
this.cancel.emit();
|
|
2847
|
+
}
|
|
2848
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2849
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpConfirmTemplateComponent, isStandalone: true, selector: "np-confirm-template", inputs: { modalTitle: "modalTitle", modalDescriptions: "modalDescriptions", modalType: "modalType", modalState: "modalState", useIcon: "useIcon", useCheckBox: "useCheckBox", cancelText: "cancelText", okText: "okText", modalContent: "modalContent", loadingOK: "loadingOK" }, outputs: { ok: "ok", cancel: "cancel", checkbox: "checkbox" }, ngImport: i0, template: "<div>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container *ngIf=\"modalContent\" [ngTemplateOutlet]=\"modalContent\"></ng-container>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n</div>\n\n<ng-template #titleTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? contentConfirmation : contentNotification\"></ng-container>\n</ng-template>\n\n<ng-template #footerTemplate>\n <ng-container *ngTemplateOutlet=\"modalType === 'confirmation' ? footerConfirmation : footerNotification\"></ng-container>\n</ng-template>\n\n<!---------------------------------------------------------------->\n\n<ng-template #contentConfirmation>\n <div class=\"flex w-full\">\n <div class=\"flex flex-col grow gap-1\">\n <img\n *ngIf=\"useIcon\"\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"w-[48px] h-[48px]\"\n />\n <div class=\"flex flex-col gap-[4px]\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerConfirmation>\n <div class=\"flex justify-between {{modalType}}\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n</ng-template>\n\n<ng-template #contentNotification>\n <div class=\"flex w-full\">\n <div class=\"flex me-3\" *ngIf=\"useIcon\">\n <img\n [src]=\"iconPath\"\n [alt]=\"modalState + ' icon'\"\n class=\"min-w-[48px] max-w-[48px] h-[48px]\"\n />\n </div>\n <div class=\"flex flex-col grow\">\n <div class=\"flex\">\n <div class=\"flex grow\">\n <np-typography npType=\"text\" npSize=\"lg\" npWeight=\"semibold\">\n {{modalTitle}}\n </np-typography>\n </div>\n <div class=\"flex pt-3\">\n <i class=\"fa-solid fa-xmark cursor-pointer fa-xl\" (click)=\"handleCancel()\"></i>\n </div>\n </div>\n <div class=\"flex grow\">\n <ng-container *ngIf=\"isTemplate(modalDescriptions); else textDesc\">\n <ng-container *ngTemplateOutlet=\"modalDescriptions\"></ng-container>\n </ng-container>\n <ng-template #textDesc>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1);\">\n {{modalDescriptions}}\n </np-typography>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerNotification>\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex w-full\" *ngIf=\"useCheckBox\">\n <np-checkbox\n type=\"checkbox\"\n size=\"sm\"\n label=\"Don\u2019t show again\"\n [input]=\"checkboxControl\"\n ></np-checkbox>\n </div>\n <div class=\"flex gap-3 w-full justify-end\">\n <np-button npSize=\"lg\" npType=\"secondary\" (click)=\"handleCancel()\">\n {{cancelText}}\n </np-button>\n <np-button\n npSize=\"lg\"\n [npType]=\"\n modalState === 'error'\n ? 'destructive'\n : modalState === 'warning'\n ? 'warning'\n : 'primary'\n \"\n [isLoading]=\"loadingOK\"\n (click)=\"handleOk()\"\n >\n {{okText}}\n </np-button>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NzModalModule }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: BasicModule }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }] });
|
|
2850
|
+
}
|
|
2851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpConfirmTemplateComponent, decorators: [{
|
|
2852
|
+
type: Component,
|
|
2853
|
+
args: [{ selector: 'np-confirm-template', imports: [
|
|
2854
|
+
NzModalModule,
|
|
2855
|
+
NpButtonComponent,
|
|
2856
|
+
CommonModule,
|
|
2857
|
+
NpTypographyComponent,
|
|
2858
|
+
BasicModule,
|
|
2859
|
+
NpCheckboxComponent,
|
|
2860
|
+
], 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" }]
|
|
2861
|
+
}], propDecorators: { modalTitle: [{
|
|
2862
|
+
type: Input
|
|
2863
|
+
}], modalDescriptions: [{
|
|
2864
|
+
type: Input
|
|
2865
|
+
}], modalType: [{
|
|
2866
|
+
type: Input
|
|
2867
|
+
}], modalState: [{
|
|
2868
|
+
type: Input
|
|
2869
|
+
}], useIcon: [{
|
|
2870
|
+
type: Input
|
|
2871
|
+
}], useCheckBox: [{
|
|
2872
|
+
type: Input
|
|
2873
|
+
}], cancelText: [{
|
|
2874
|
+
type: Input
|
|
2875
|
+
}], okText: [{
|
|
2876
|
+
type: Input
|
|
2877
|
+
}], modalContent: [{
|
|
2878
|
+
type: Input
|
|
2879
|
+
}], loadingOK: [{
|
|
2880
|
+
type: Input
|
|
2881
|
+
}], ok: [{
|
|
2882
|
+
type: Output
|
|
2883
|
+
}], cancel: [{
|
|
2884
|
+
type: Output
|
|
2885
|
+
}], checkbox: [{
|
|
2886
|
+
type: Output
|
|
2887
|
+
}] } });
|
|
2888
|
+
|
|
2889
|
+
class NpDialogComponent {
|
|
2890
|
+
modalRef;
|
|
2891
|
+
constructor(modalRef) {
|
|
2892
|
+
this.modalRef = modalRef;
|
|
2893
|
+
}
|
|
2894
|
+
close(result) {
|
|
2895
|
+
this.modalRef.close(result);
|
|
2896
|
+
}
|
|
2897
|
+
submit(result) {
|
|
2898
|
+
this.modalRef.close(result);
|
|
2899
|
+
}
|
|
2900
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, deps: [{ token: i1.NzModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2901
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpDialogComponent, isStandalone: true, selector: "np-dialog", ngImport: i0, template: " <!-- <np-modal\n modalButton=\"Success message\"\n modalTitle=\"Modal Title\"\n modalDescriptions=\"Add your status modal description here.It will look better if you split it into two lines.\"\n modalType=\"notification\"\n modalState=\"success\"\n >\n </np-modal> -->\n", styles: [""] });
|
|
2902
|
+
}
|
|
2903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpDialogComponent, decorators: [{
|
|
2904
|
+
type: Component,
|
|
2905
|
+
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" }]
|
|
2906
|
+
}], ctorParameters: () => [{ type: i1.NzModalRef }] });
|
|
2907
|
+
|
|
2549
2908
|
class DefaultModel {
|
|
2550
2909
|
/**
|
|
2551
2910
|
* all keys are in lowercase
|
|
@@ -2680,5 +3039,5 @@ class DefaultModel {
|
|
|
2680
3039
|
* Generated bundle index. Do not edit.
|
|
2681
3040
|
*/
|
|
2682
3041
|
|
|
2683
|
-
export { DefaultModel, ETypeNpBreadcrumb, E_NP_BREADCRUMB, FORM_ERROR_MAP, NeopComponentModule, NpActionBarComponent, NpAlertComponent, NpBreadcrumbComponent, NpButtonComponent, NpCheckboxComponent, NpDialogService, NpDropdownsComponent, NpInputFieldComponent, NpInputMode, NpInputTexteraComponent, NpLoadingIndicatorComponent, NpModalComponent, NpMode, NpPaginationComponent, NpProgressBarComponent, NpResizeComponent, NpScrollbarComponent, NpSelectComponent, NpSliderComponent, NpTabComponent, NpTableComponent, NpToggleComponent, NpTooltipComponent, NpTreeComponent, NpTypographyComponent, TestService, ThemeService };
|
|
3042
|
+
export { DefaultModel, ETypeNpBreadcrumb, E_NP_BREADCRUMB, FORM_ERROR_MAP, NeopComponentModule, NpActionBarComponent, NpAlertComponent, NpAlertService, NpBreadcrumbComponent, NpButtonComponent, NpCheckboxComponent, NpConfirmTemplateComponent, NpDialogComponent, NpDialogService, NpDropdownsComponent, NpInputFieldComponent, NpInputMode, NpInputTexteraComponent, NpLoadingIndicatorComponent, NpModalComponent, NpMode, NpPaginationComponent, NpProgressBarComponent, NpResizeComponent, NpScrollbarComponent, NpSelectComponent, NpSliderComponent, NpTabComponent, NpTableComponent, NpToggleComponent, NpTooltipComponent, NpTreeComponent, NpTypographyComponent, TestService, ThemeService };
|
|
2684
3043
|
//# sourceMappingURL=neoprototype-neop-ui-lib.mjs.map
|