@neoprototype/neop-ui-lib 1.0.33 → 1.0.35
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.
|
@@ -479,7 +479,7 @@ class NpInputFieldComponent {
|
|
|
479
479
|
this.iconRightClick.emit();
|
|
480
480
|
}
|
|
481
481
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputFieldComponent, deps: [{ token: i1$1.DecimalPipe }, { token: FORM_ERROR_MAP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
482
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputFieldComponent, isStandalone: true, selector: "np-input-field", inputs: { size: "size", label: "label", placeholder: "placeholder", iconLeft: "iconLeft", iconRight: "iconRight", hint: "hint", errorMap: "errorMap", disabled: "disabled", limitValue: "limitValue", functionHandler: "functionHandler", submitted: "submitted", digitsInfo: "digitsInfo", locale: "locale", formatDate: "formatDate", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick", blur: "blur" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [
|
|
482
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NpInputFieldComponent, isStandalone: true, selector: "np-input-field", inputs: { size: "size", label: "label", placeholder: "placeholder", iconLeft: "iconLeft", iconRight: "iconRight", hint: "hint", errorMap: "errorMap", disabled: "disabled", limitValue: "limitValue", functionHandler: "functionHandler", submitted: "submitted", digitsInfo: "digitsInfo", locale: "locale", formatDate: "formatDate", input: "input", type: "type" }, outputs: { valueChange: "valueChange", iconLeftClick: "iconLeftClick", iconRightClick: "iconRightClick", blur: "blur" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\n (keypress)=\"handleKeyPress($event)\"\n />\n </nz-input-group>\n </ng-template>\n\n <ng-template #prefixTemplateUser>\n <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n </ng-template>\n\n <ng-template #suffixTemplateInfo>\n <i\n class=\"{{ iconRight }} icon-input\"\n *ngIf=\"type !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"type == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\">\n </span>\n </ng-template>\n\n <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }] });
|
|
483
483
|
}
|
|
484
484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpInputFieldComponent, decorators: [{
|
|
485
485
|
type: Component,
|
|
@@ -491,7 +491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
491
491
|
NzIconModule,
|
|
492
492
|
NpTypographyComponent,
|
|
493
493
|
NzDatePickerModule,
|
|
494
|
-
], providers: [DecimalPipe], template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [
|
|
494
|
+
], providers: [DecimalPipe], template: "<div class=\"input-wrapper flex column w-full\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"medium\" *ngIf=\"label\" class=\"input-label\">{{ label }}</np-typography>\n\n <ng-container *ngIf=\"type === 'date'; else normalInput\">\n <div [ngClass]=\"size\">\n <nz-date-picker\n [formControl]=\"_input\"\n [nzDisabled]=\"disabled\"\n [nzFormat]=\"formatDate\"\n class=\"w-full\"\n ></nz-date-picker>\n </div>\n </ng-container>\n <ng-template #normalInput>\n <nz-input-group\n [class]=\"[size,'input-group', computedStatus === 'error' ? 'error' : '']\"\n [nzSuffix]=\"suffixTemplateInfo\"\n [nzPrefix]=\"prefixTemplateUser\"\n >\n <input\n #inputRef\n nz-input\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [value]=\"_input.value\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onBlur($event)\"\n (keypress)=\"handleKeyPress($event)\"\n />\n </nz-input-group>\n </ng-template>\n\n <ng-template #prefixTemplateUser>\n <i class=\"{{ iconLeft }} icon-input\" (click)=\"handleIconLeftClick()\"></i>\n </ng-template>\n\n <ng-template #suffixTemplateInfo>\n <i\n class=\"{{ iconRight }} icon-input\"\n *ngIf=\"type !== 'password'\"\n (click)=\"handleIconRightClick()\"\n ></i>\n <span\n *ngIf=\"type == 'password'\"\n nz-icon\n class=\"ant-input-password-icon\"\n [nzType]=\"passwordVisible ? 'eye' : 'eye-invisible'\"\n (click)=\"togglePassword()\">\n </span>\n </ng-template>\n\n <div class=\"flex justify-between\" *ngIf=\"computedStatus === 'error' || hint || limitValue && type !== 'date'\">\n <div class=\"flex flex-col w-full mb-3\">\n <np-typography *ngIf=\"computedStatus === 'error'\" class=\"input-error text-red-500\">{{ errorMessageFromInput }}</np-typography>\n <np-typography *ngIf=\"hint\" class=\"input-hint\">{{ hint }}</np-typography>\n </div>\n <np-typography *ngIf=\"limitValue && type !== 'date'\" class=\"limit-value\">\n {{ (_input.value?.toString()?.length) || 0 }}/{{ limitValue }}\n </np-typography>\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:4px}.input-label{color:#344054}.bs{height:36px}.sm{height:40px!important}.md{height:44px}.ant-input-affix-wrapper{border-color:#d0d5dd!important;border-radius:4px}.ant-input-affix-wrapper:hover,.ant-input-affix-wrapper:focus,.ant-input-affix-wrapper:focus-visible,.ant-input-affix-wrapper:focus-within{box-shadow:0 0 0 4px #f0f2f4}.ant-input-affix-wrapper.error{border:1px solid rgb(253,162,155)!important}.ant-input-affix-wrapper.error:hover,.ant-input-affix-wrapper.error:focus,.ant-input-affix-wrapper.error:focus-visible,.ant-input-affix-wrapper.error:focus-within{box-shadow:0 0 0 4px #f044383d}.ant-input-affix-wrapper-disabled{border:1px solid rgb(208,213,221)!important;pointer-events:none}.ant-input-affix-wrapper-disabled:hover,.ant-input-affix-wrapper-disabled:focus,.ant-input-affix-wrapper-disabled:focus-visible,.ant-input-affix-wrapper-disabled:focus-within{box-shadow:none}.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon,.ant-input-affix-wrapper-disabled .ant-input-password-icon.anticon:hover{color:#d0d5dd}.input-hint,.limit-value{color:#475467}.icon-input{color:#667085}::ng-deep span.ant-input-prefix{margin-right:6px!important}::ng-deep .sm .ant-picker{height:40px!important}::ng-deep .md .ant-picker{height:44px!important}::ng-deep .ant-picker{border-color:#d0d5dd!important;border-radius:4px}::ng-deep .ant-picker:hover,::ng-deep .ant-picker:focus,::ng-deep .ant-picker:focus-visible,::ng-deep .ant-picker:focus-within{box-shadow:0 0 0 4px #f0f2f4}::ng-deep .error{border:1px solid rgb(253,162,155)!important}::ng-deep .error:hover,::ng-deep .error:focus,::ng-deep .error:focus-visible,::ng-deep .error:focus-within{box-shadow:0 0 0 4px #f044383d!important}\n"] }]
|
|
495
495
|
}], ctorParameters: () => [{ type: i1$1.DecimalPipe }, { type: undefined, decorators: [{
|
|
496
496
|
type: Optional
|
|
497
497
|
}, {
|
|
@@ -1697,11 +1697,11 @@ class NpAlertComponent {
|
|
|
1697
1697
|
}
|
|
1698
1698
|
}
|
|
1699
1699
|
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 });
|
|
1700
|
-
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\" [
|
|
1700
|
+
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 \n class=\"np-alert flex gap-3 items-start\" \n [ngClass]=\"type\" \n [ngStyle]=\"{\n 'opacity': opacity,\n 'padding': padding,\n 'display': opacity == 0 ? 'none' : 'flex'\n }\"\n >\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }] });
|
|
1701
1701
|
}
|
|
1702
1702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpAlertComponent, decorators: [{
|
|
1703
1703
|
type: Component,
|
|
1704
|
-
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div class=\"np-alert flex gap-3 items-start\" [ngClass]=\"type\" [
|
|
1704
|
+
args: [{ selector: 'np-alert', imports: [CommonModule, NpTypographyComponent], template: "<ng-container>\n <div \n class=\"np-alert flex gap-3 items-start\" \n [ngClass]=\"type\" \n [ngStyle]=\"{\n 'opacity': opacity,\n 'padding': padding,\n 'display': opacity == 0 ? 'none' : 'flex'\n }\"\n >\n <div class=\"icon-wrapper rounded-[10px]\" [ngClass]=\"state\" *ngIf=\"type == 'toast'\">\n <i [ngClass]=\"getIcon()\" class=\"p-[8px]\"></i>\n </div>\n <div class=\"icon-wrapper rounded-[10px]\" *ngIf=\"getIconNotification().icon && type == 'notification'\">\n <i class=\"glow fa-regular\"\n [ngClass]=\"getIconNotification().icon\"\n [ngStyle]=\"{ 'color': getIconNotification().color }\">\n </i>\n </div>\n\n <div class=\"flex flex-col flex-1\">\n <div class=\"flex justify-between\" *ngIf=\"title\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">{{ title }}</np-typography>\n <button (click)=\"closeAlert()\" class=\"close-btn cursor-pointer opacity-50\">\n <i class=\"fa fa-times\"></i>\n </button>\n </div>\n\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\">{{ description }}</np-typography>\n <np-typography *ngIf=\"isMessageVisible\" npType=\"text\" npSize=\"sm\" npWeight=\"regular\">\n {{ message }}\n </np-typography>\n\n <div class=\"flex gap-3 mt-2\" *ngIf=\"type !== 'notification'\">\n <button (click)=\"closeAlert()\" class=\"dismiss cursor-pointer\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Dismiss</np-typography>\n </button>\n <button *ngIf=\"message\" class=\"learn-more cursor-pointer\" (click)=\"showMessege()\">\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"semibold\">Learn More</np-typography>\n </button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".np-alert{min-width:300px;max-width:390px;border-radius:6px;background-color:#fff;border:1px solid rgb(208,213,221);box-shadow:0 1px 2px #1018280d;z-index:999!important}.toast .success{--fa-primary-color: #ffffff;--fa-secondary-color: #38c793;--fa-secondary-opacity: 1;background-color:#effaf6}.toast .info{--fa-primary-color: #ffffff;--fa-secondary-color: #344054;--fa-secondary-opacity: 1;background-color:#f2f4f7}.toast .warning{--fa-primary-color: #ffffff;--fa-secondary-color: #f17b2c;--fa-secondary-opacity: 1;background-color:#fef3eb}.toast .error{--fa-primary-color: #ffffff;--fa-secondary-color: #df1c41;--fa-secondary-opacity: 1;border-color:#fdedf0!important;background-color:#fdedf0}.glow{animation:glowEffect 1.5s infinite alternate}@keyframes glowEffect{0%{text-shadow:0 0 10px currentColor}to{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor,0 0 40px currentColor}}\n"] }]
|
|
1705
1705
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NpAlertService }], propDecorators: { type: [{
|
|
1706
1706
|
type: Input
|
|
1707
1707
|
}], state: [{
|
|
@@ -1941,6 +1941,12 @@ class NpTableComponent {
|
|
|
1941
1941
|
bodyTable;
|
|
1942
1942
|
tableContainer;
|
|
1943
1943
|
tableMiddle;
|
|
1944
|
+
tableLeft;
|
|
1945
|
+
tableRight;
|
|
1946
|
+
isSyncingLeftScroll = false;
|
|
1947
|
+
isSyncingMiddleScroll = false;
|
|
1948
|
+
isSyncingRightScroll = false;
|
|
1949
|
+
scrollListeners = [];
|
|
1944
1950
|
_columns = [];
|
|
1945
1951
|
set columns(value) {
|
|
1946
1952
|
this._columns = value;
|
|
@@ -1957,7 +1963,7 @@ class NpTableComponent {
|
|
|
1957
1963
|
isFilterable = false;
|
|
1958
1964
|
isDeleteable = false;
|
|
1959
1965
|
isUsePagination = true;
|
|
1960
|
-
|
|
1966
|
+
paginationType = 'basic';
|
|
1961
1967
|
state = 'normal';
|
|
1962
1968
|
className = '';
|
|
1963
1969
|
classNameLeft = ''; // className for left fixed table
|
|
@@ -2013,6 +2019,7 @@ class NpTableComponent {
|
|
|
2013
2019
|
}
|
|
2014
2020
|
});
|
|
2015
2021
|
}
|
|
2022
|
+
this.syncRowHeight();
|
|
2016
2023
|
}
|
|
2017
2024
|
set pageSize(value) {
|
|
2018
2025
|
this._pageSize = value;
|
|
@@ -2027,6 +2034,8 @@ class NpTableComponent {
|
|
|
2027
2034
|
}
|
|
2028
2035
|
this.updatePaginationWidth();
|
|
2029
2036
|
this.cdr.detectChanges();
|
|
2037
|
+
this.syncRowHeight();
|
|
2038
|
+
this.setupScrollSync();
|
|
2030
2039
|
}
|
|
2031
2040
|
ngOnInit() {
|
|
2032
2041
|
const [start, end] = this.scrollColumnsRange || [
|
|
@@ -2153,6 +2162,8 @@ class NpTableComponent {
|
|
|
2153
2162
|
}
|
|
2154
2163
|
ngOnDestroy() {
|
|
2155
2164
|
this.selectAllSub?.unsubscribe();
|
|
2165
|
+
this.scrollListeners.forEach(remove => remove());
|
|
2166
|
+
this.scrollListeners = [];
|
|
2156
2167
|
}
|
|
2157
2168
|
get selectedCount() {
|
|
2158
2169
|
return this._dataSource.filter((row) => row.selectFc?.value).length;
|
|
@@ -2260,6 +2271,60 @@ class NpTableComponent {
|
|
|
2260
2271
|
this.activeFilterKey = null;
|
|
2261
2272
|
}
|
|
2262
2273
|
}
|
|
2274
|
+
setupScrollSync() {
|
|
2275
|
+
setTimeout(() => {
|
|
2276
|
+
if (this.scrollColumnsRange && this.scrollHeight) {
|
|
2277
|
+
const left = this.tableLeft?.nativeElement;
|
|
2278
|
+
const middle = this.tableMiddle?.nativeElement;
|
|
2279
|
+
const right = this.tableRight?.nativeElement;
|
|
2280
|
+
if (left) {
|
|
2281
|
+
const listener = () => {
|
|
2282
|
+
if (!this.isSyncingLeftScroll) {
|
|
2283
|
+
this.isSyncingMiddleScroll = true;
|
|
2284
|
+
this.isSyncingRightScroll = true;
|
|
2285
|
+
if (middle)
|
|
2286
|
+
middle.scrollTop = left.scrollTop;
|
|
2287
|
+
if (right)
|
|
2288
|
+
right.scrollTop = left.scrollTop;
|
|
2289
|
+
}
|
|
2290
|
+
this.isSyncingLeftScroll = false;
|
|
2291
|
+
};
|
|
2292
|
+
left.addEventListener('scroll', listener);
|
|
2293
|
+
this.scrollListeners.push(() => left.removeEventListener('scroll', listener));
|
|
2294
|
+
}
|
|
2295
|
+
if (middle) {
|
|
2296
|
+
const listener = () => {
|
|
2297
|
+
if (!this.isSyncingMiddleScroll) {
|
|
2298
|
+
this.isSyncingLeftScroll = true;
|
|
2299
|
+
this.isSyncingRightScroll = true;
|
|
2300
|
+
if (left)
|
|
2301
|
+
left.scrollTop = middle.scrollTop;
|
|
2302
|
+
if (right)
|
|
2303
|
+
right.scrollTop = middle.scrollTop;
|
|
2304
|
+
}
|
|
2305
|
+
this.isSyncingMiddleScroll = false;
|
|
2306
|
+
};
|
|
2307
|
+
middle.addEventListener('scroll', listener);
|
|
2308
|
+
this.scrollListeners.push(() => middle.removeEventListener('scroll', listener));
|
|
2309
|
+
}
|
|
2310
|
+
if (right) {
|
|
2311
|
+
const listener = () => {
|
|
2312
|
+
if (!this.isSyncingRightScroll) {
|
|
2313
|
+
this.isSyncingLeftScroll = true;
|
|
2314
|
+
this.isSyncingMiddleScroll = true;
|
|
2315
|
+
if (left)
|
|
2316
|
+
left.scrollTop = right.scrollTop;
|
|
2317
|
+
if (middle)
|
|
2318
|
+
middle.scrollTop = right.scrollTop;
|
|
2319
|
+
}
|
|
2320
|
+
this.isSyncingRightScroll = false;
|
|
2321
|
+
};
|
|
2322
|
+
right.addEventListener('scroll', listener);
|
|
2323
|
+
this.scrollListeners.push(() => right.removeEventListener('scroll', listener));
|
|
2324
|
+
}
|
|
2325
|
+
}
|
|
2326
|
+
}, 0);
|
|
2327
|
+
}
|
|
2263
2328
|
updatePaginationWidth() {
|
|
2264
2329
|
let totalWidth = 0;
|
|
2265
2330
|
if (!this.isAtStart) {
|
|
@@ -2283,6 +2348,42 @@ class NpTableComponent {
|
|
|
2283
2348
|
this.cdr.detectChanges();
|
|
2284
2349
|
}
|
|
2285
2350
|
}
|
|
2351
|
+
syncRowHeight() {
|
|
2352
|
+
if (!this.tableContainer)
|
|
2353
|
+
return;
|
|
2354
|
+
const leftHeaders = this.tableContainer.nativeElement.querySelectorAll('.fixed-left thead tr');
|
|
2355
|
+
const middleHeaders = this.tableContainer.nativeElement.querySelectorAll('.scrollable thead tr');
|
|
2356
|
+
const rightHeaders = this.tableContainer.nativeElement.querySelectorAll('.fixed-right thead tr');
|
|
2357
|
+
const leftRows = this.tableContainer.nativeElement.querySelectorAll('.fixed-left tbody tr');
|
|
2358
|
+
const middleRows = this.tableContainer.nativeElement.querySelectorAll('.scrollable tbody tr');
|
|
2359
|
+
const rightRows = this.tableContainer.nativeElement.querySelectorAll('.fixed-right tbody tr');
|
|
2360
|
+
const headerRowCount = Math.max(leftHeaders.length, middleHeaders.length, rightHeaders.length);
|
|
2361
|
+
const bodyRowCount = Math.max(leftRows.length, middleRows.length, rightRows.length);
|
|
2362
|
+
for (let i = 0; i < headerRowCount; i++) {
|
|
2363
|
+
const leftHeader = leftHeaders[i];
|
|
2364
|
+
const middleHeader = middleHeaders[i];
|
|
2365
|
+
const rightHeader = rightHeaders[i];
|
|
2366
|
+
const maxHeight = Math.max(leftHeader?.offsetHeight || 0, middleHeader?.offsetHeight || 0, rightHeader?.offsetHeight || 0);
|
|
2367
|
+
if (leftHeader)
|
|
2368
|
+
leftHeader.style.height = `${maxHeight}px`;
|
|
2369
|
+
if (middleHeader)
|
|
2370
|
+
middleHeader.style.height = `${maxHeight}px`;
|
|
2371
|
+
if (rightHeader)
|
|
2372
|
+
rightHeader.style.height = `${maxHeight}px`;
|
|
2373
|
+
}
|
|
2374
|
+
for (let i = 0; i < bodyRowCount; i++) {
|
|
2375
|
+
const leftRow = leftRows[i];
|
|
2376
|
+
const middleRow = middleRows[i];
|
|
2377
|
+
const rightRow = rightRows[i];
|
|
2378
|
+
const maxHeight = Math.max(leftRow?.offsetHeight || 0, middleRow?.offsetHeight || 0, rightRow?.offsetHeight || 0);
|
|
2379
|
+
if (leftRow)
|
|
2380
|
+
leftRow.style.height = `${maxHeight}px`;
|
|
2381
|
+
if (middleRow)
|
|
2382
|
+
middleRow.style.height = `${maxHeight}px`;
|
|
2383
|
+
if (rightRow)
|
|
2384
|
+
rightRow.style.height = `${maxHeight}px`;
|
|
2385
|
+
}
|
|
2386
|
+
}
|
|
2286
2387
|
onClickOutside(event) {
|
|
2287
2388
|
const clickedInside = this.filterIcons?.some((el) => el.nativeElement.contains(event.target));
|
|
2288
2389
|
const dropdownClicked = Object.keys(this.dropdownPositionMap).some((key) => {
|
|
@@ -2298,9 +2399,10 @@ class NpTableComponent {
|
|
|
2298
2399
|
}
|
|
2299
2400
|
onResize() {
|
|
2300
2401
|
this.updatePaginationWidth();
|
|
2402
|
+
this.syncRowHeight();
|
|
2301
2403
|
}
|
|
2302
2404
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2303
|
-
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": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99 table-header\">\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 <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 #tableContainer class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\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 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 <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n \n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n 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>\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 rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <br> Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;white-space:nowrap;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table 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", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2405
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: NpTableComponent, isStandalone: true, selector: "np-table", inputs: { columns: "columns", selectableType: "selectableType", isSortable: "isSortable", isFilterable: "isFilterable", isDeleteable: "isDeleteable", isUsePagination: "isUsePagination", paginationType: "paginationType", state: "state", className: "className", classNameLeft: "classNameLeft", classNameRight: "classNameRight", scrollColumnsRange: "scrollColumnsRange", scrollWidth: "scrollWidth", scrollHeight: "scrollHeight", isReverse: "isReverse", showVerticalDivider: "showVerticalDivider", dataSource: "dataSource", pageSize: "pageSize" }, outputs: { deleteSelectedRows: "deleteSelectedRows", sortChange: "sortChange", filterChange: "filterChange", rowChecked: "rowChecked" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onScrollCloseFilter()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "bodyTable", first: true, predicate: ["bodyTable"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableMiddle", first: true, predicate: ["tableMiddle"], descendants: true }, { propertyName: "tableLeft", first: true, predicate: ["tableLeft"], descendants: true }, { propertyName: "tableRight", first: true, predicate: ["tableRight"], descendants: true }, { propertyName: "filterIcons", predicate: ["filterIcon"], descendants: true }], ngImport: i0, template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99\" \n [ngClass]=\"{\n 'np-table-shadow': scrollHeight.length > 0 && scrollHeight !== '0px',\n }\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div #tableContainer class=\"flex w-full\">\n <table \n *ngIf=\"!isAtStart\" \n class=\"np-table fixed-left z-10 {{ classNameLeft }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n >\n <thead>\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n <div class=\"flex flex-col\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div \n #tableContainer \n class=\"flex w-full relative\" \n [style.max-height]=\"scrollHeight\"\n >\n <!-- Fixed Left Table -->\n <div \n #tableLeft \n *ngIf=\"!isAtStart\" \n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\"\n style=\"border-right: none;\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\n <thead class=\"sticky-header\">\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Scrollable Middle Table -->\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"scrollWidth\"\n [style.max-height]=\"scrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none'\n }\"\n >\n <table class=\"scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead class=\"sticky-header\">\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Fixed Right Table -->\n <div \n #tableRight \n *ngIf=\"!isAtEnd\" \n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\">\n <table class=\"rounded-r-xl fixed-right z-10 {{ classNameRight }}\">\n <thead class=\"sticky-header\">\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <br> Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NpCheckboxComponent, selector: "np-checkbox", inputs: ["input", "type", "size", "npType", "isDisabled", "groupName", "label", "description", "isIndeterminate"], outputs: ["valueChange"] }, { kind: "component", type: NpPaginationComponent, selector: "np-pagination", inputs: ["type", "totalItems", "pageSize", "isReverse", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: NpTypographyComponent, selector: "np-typography", inputs: ["npType", "npSize", "npWeight", "ngContent"] }, { kind: "component", type: NpLoadingIndicatorComponent, selector: "np-loading-indicator", inputs: ["npType", "npSize"] }, { kind: "component", type: NpButtonComponent, selector: "np-button", inputs: ["npType", "npSize", "className", "isLoading", "disabled", "ngContent"] }, { kind: "component", type: NpScrollbarComponent, selector: "np-scrollbar", inputs: ["width", "height", "ngContent"] }, { kind: "component", type: NpInputFieldComponent, selector: "np-input-field", inputs: ["size", "label", "placeholder", "iconLeft", "iconRight", "hint", "errorMap", "disabled", "limitValue", "functionHandler", "submitted", "digitsInfo", "locale", "formatDate", "input", "type"], outputs: ["valueChange", "iconLeftClick", "iconRightClick", "blur"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2304
2406
|
}
|
|
2305
2407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTableComponent, decorators: [{
|
|
2306
2408
|
type: Component,
|
|
@@ -2314,7 +2416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2314
2416
|
NpScrollbarComponent,
|
|
2315
2417
|
NpInputFieldComponent,
|
|
2316
2418
|
FormsModule,
|
|
2317
|
-
], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99 table-header\">\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 <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 #tableContainer class=\"flex w-full\">\n <table *ngIf=\"!isAtStart\" class=\"np-table rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\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 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 <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n \n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n 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>\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 rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <br> Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;white-space:nowrap;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table 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"] }]
|
|
2419
|
+
], template: "@if (state !== 'error') {\n @if (scrollColumnsRange == null) {\n <div\n class=\"np-table w-full relative overflow-y-auto\"\n [ngClass]=\"scrollHeight ? 'rounded-l-xl rounded-r-sm' : 'rounded-xl'\"\n [style.height]=\"scrollHeight\"\n style=\"overflow-x: hidden;\"\n >\n <table class=\"w-full mx-auto {{ className }}\">\n <thead class=\"sticky top-0 bg-white z-99\" \n [ngClass]=\"{\n 'np-table-shadow': scrollHeight.length > 0 && scrollHeight !== '0px',\n }\">\n <tr *ngIf=\"selectedCount > 0 && isDeleteable\" style=\"background-color: rgba(234, 236, 240, 1)\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"px-4 py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n </td>\n </tr>\n\n <tr>\n <th\n class=\"select-column\"\n *ngIf=\"selectableType !== null && state !== 'loading'\"\n >\n <np-checkbox\n *ngIf=\"selectableType === 'checkbox'\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of columns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading'\"\n #middleHeader\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @if (state === 'loading') {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px] w-full\">\n <np-loading-indicator npSize=\"md\" npType=\"outlined\"></np-loading-indicator>\n </td>\n </tr>\n }\n @else if (_dataSource.length > 0) {\n <tr *ngFor=\"let row of pagedData; track row\">\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of columns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n <tr *ngIf=\"isUsePagination\">\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" style=\"padding: 12px 0px !important\">\n <div class=\"w-full px-3\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n [isReverse]=\"isReverse\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </td>\n </tr>\n }\n @else {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectableType !== null ? 1 : 0)\" class=\"h-[400px]\">\n <div class=\"flex flex-col gap-4 h-full items-center justify-center\">\n <i class=\"fa-regular fa-file-circle-xmark fa-2xl\" style=\"color: rgba(208, 213, 221, 1)\"></i>\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n style=\"color: rgba(208, 213, 221, 1)\"\n >\n No data\n </np-typography>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (scrollColumnsRange != null && scrollHeight === \"\") {\n <div class=\"flex flex-col w-full\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div #tableContainer class=\"flex w-full\">\n <table \n *ngIf=\"!isAtStart\" \n class=\"np-table fixed-left z-10 {{ classNameLeft }}\"\n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n >\n <thead>\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n\n <div\n class=\"scrollable-wrapper mb-[-12px] grow overflow-x-auto\"\n [style.max-width]=\"scrollWidth\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n >\n <table class=\"np-table scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <table *ngIf=\"!isAtEnd\" class=\"np-table rounded-r-xl fixed-right z-10 {{ classNameLeft }}\">\n <thead>\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n *ngFor=\"let col of fixedRightColumns, track col\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n @if(scrollColumnsRange != null && scrollHeight != \"\"){\n <div class=\"flex flex-col\">\n <div \n *ngIf=\"selectedCount > 0 && isDeleteable\" \n class=\"px-4 py-2 flex justify-between rounded-t-xl items-center np-table\" \n style=\"background-color: rgba(234, 236, 240, 1)\"\n >\n <div class=\"text-sm font-medium text-gray-700\">\n {{ selectedCount }} selected\n </div>\n <np-button npType=\"secondary\" npSize=\"sm\" (click)=\"onDeleteSelected()\">Delete</np-button>\n </div>\n <div \n #tableContainer \n class=\"flex w-full relative\" \n [style.max-height]=\"scrollHeight\"\n >\n <!-- Fixed Left Table -->\n <div \n #tableLeft \n *ngIf=\"!isAtStart\" \n [ngClass]=\"{\n 'rounded-l-xl': selectedCount <= 0 || !isDeleteable\n }\"\n class=\"no-display-scrollbar np-table overflow-y-auto overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\"\n style=\"border-right: none;\"\n >\n <table class=\"rounded-l-xl fixed-left z-10 {{ classNameLeft }}\">\n <thead class=\"sticky-header\">\n <tr>\n <th class=\"select-column\" *ngIf=\"selectableType !== null && state !== 'loading' && _dataSource.length > 0\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"selectAllFc\"\n [isIndeterminate]=\"isIndeterminateAll\"\n ></np-checkbox>\n </th>\n <ng-container *ngFor=\"let col of fixedLeftColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr #leftRow>\n <td class=\"select-column\" *ngIf=\"selectableType !== null\">\n <np-checkbox\n [type]=\"selectableType\"\n size=\"sm\"\n [input]=\"row.selectFc\"\n (valueChange)=\"onChangeSelectColumn($event)\"\n ></np-checkbox>\n </td>\n @for (col of fixedLeftColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Scrollable Middle Table -->\n <div\n class=\"scrollable-wrapper no-display-scrollbar np-table grow overflow-auto sticky-header\"\n [style.max-width]=\"scrollWidth\"\n [style.max-height]=\"scrollHeight\"\n #tableMiddle\n [ngClass]=\"{\n 'rounded-l-xl border-l-midtable': isAtStart,\n 'rounded-r-xl border-r-midtable': isAtEnd\n }\"\n [ngStyle]=\"{\n 'border-right': isAtEnd ? '' : 'none'\n }\"\n >\n <table class=\"scrollable min-w-fit w-full\" style=\"border-left: none; border-right: none;\">\n <thead class=\"sticky-header\">\n <tr>\n <ng-container *ngFor=\"let col of scrollableColumns\">\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200 {{col?.className}}\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of scrollableColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Fixed Right Table -->\n <div \n #tableRight \n *ngIf=\"!isAtEnd\" \n class=\"overflow-y-auto np-table rounded-r-xl overflow-x-hidden relative mb-[12px]\" \n [style.max-height]=\"scrollHeight\">\n <table class=\"rounded-r-xl fixed-right z-10 {{ classNameRight }}\">\n <thead class=\"sticky-header\">\n <tr>\n @for (col of fixedRightColumns; track col) {\n <th\n [class.border-r]=\"showVerticalDivider && state !== 'loading' && _dataSource.length > 0\"\n class=\"border-gray-200\"\n >\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { col: col }\"></ng-container>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of pagedData; track row) {\n <tr>\n @for (col of fixedRightColumns; track col) {\n <ng-container *ngTemplateOutlet=\"renderCell; context: { row: row, col: col }\"></ng-container>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n\n <div class=\"mt-3 w-full\" *ngIf=\"isUsePagination\" [style.width]=\"paginationWidth\">\n <np-pagination\n [type]=\"paginationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <br> Please refresh the page or get in touch for support.\n </np-typography>\n </div>\n <div class=\"flex gap-3\">\n <np-button\n npType=\"secondary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onContactSupport()\"\n >Contact support\n </np-button>\n\n <np-button\n npType=\"primary\"\n npSize=\"sm\"\n npShape=\"rounded\"\n (click)=\"onRefresh()\"\n >Refresh\n </np-button>\n </div>\n </div>\n </div>\n </div>\n}\n\n<ng-template #headerTemplate let-col=\"col\" let-i=\"index\">\n <div #filterIcon class=\"flex items-center w-full\">\n <div class=\"w-full\">\n <ng-container *ngIf=\"col.headerTemplate; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"col.headerTemplate; context: { col: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <p style=\"margin: 0;\">{{ col.label }}</p>\n </ng-template>\n </div>\n\n <ng-container>\n <div class=\"flex gap-2 ms-2\">\n <div *ngIf=\"(isSortable && !col.template) || (col.template && col.sortFn)\" (click)=\"onSortColumn(col)\" class=\"cursor-pointer\">\n <i *ngIf=\"sortKey === col.key && sortDirection === 'asc'\" class=\"fa-duotone fa-solid fa-sort\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey === col.key && sortDirection === 'desc'\" class=\"fa-duotone fa-solid fa-sort fa-rotate-180\"\n style=\"--fa-primary-color: #475467; --fa-secondary-color: #475467; --fa-secondary-opacity: 0.5;\"></i>\n <i *ngIf=\"sortKey !== col.key || !sortDirection\" class=\"fa-solid fa-sort\" style=\"color: #d0d5d3\"></i>\n </div>\n\n <div class=\"cursor-pointer relative\" (click)=\"toggleFilter(col.key)\" *ngIf=\"(isFilterable && !col.template) || (col.template && col.filterFn)\">\n <ng-container *ngIf=\"shouldShowFilterCheck(col.key); else filterIconTemplate\">\n <span class=\"relative inline-block\">\n <i class=\"fa-solid fa-filter\" style=\"color: #d0d5dd\"></i>\n <span class=\"absolute top-[1px] right-[-2px] block w-[6px] h-[6px] bg-black rounded-full\"></span>\n </span>\n </ng-container>\n <ng-template #filterIconTemplate>\n <i class=\"fa-solid fa-filter\"\n [ngStyle]=\"{ color: activeFilterKey === col.key ? '#000' : '#d0d5dd' }\"></i>\n </ng-template>\n\n <div\n #filterDropdown\n [hidden]=\"activeFilterKey !== col.key\"\n (click)=\"$event.stopPropagation()\"\n [ngStyle]=\"dropdownPositionMap[col.key] || {}\"\n class=\"min-w-[240px] filter fixed px-2 pt-2 rounded-[8px] z-[9999]\"\n >\n <np-input-field\n size=\"md\"\n type=\"string\"\n placeholder=\"Search...\"\n iconLeft=\"fa-thin fa-magnifying-glass\"\n [input]=\"searchControls[col.key]\"\n ></np-input-field>\n <div class=\"flex pt-2 cursor-pointer text-gray-500\" (click)=\"onClearFilter(col.key)\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"medium\"\n >\n <i class=\"fa-solid fa-xmark\"></i> Clear filter\n </np-typography>\n </div>\n <np-scrollbar height=\"200px\">\n <div>\n <div *ngFor=\"let value of col.filterListAfterSearch\" class=\"w-full flex items-center\">\n <np-checkbox\n class=\"w-full cursor-pointer py-2\"\n type=\"checkbox\"\n size=\"sm\"\n [input]=\"isChecked(col.key, value)\"\n (valueChange)=\"onToggleFilter(col.key, value, $event)\"\n [label]=\"value\"\n ></np-checkbox>\n </div>\n </div>\n <div *ngIf=\"col.filterListAfterSearch.length === 0\" class=\"text-center py-[50px]\">\n <np-typography\n npType=\"text\"\n npSize=\"sm\"\n npWeight=\"regular\"\n style=\"color: rgba(208, 213, 221, 1);\"\n >\n No matches.\n </np-typography>\n </div>\n </np-scrollbar>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #renderCell let-row=\"row\" let-col=\"col\">\n <td\n [class.border-r]=\"showVerticalDivider\"\n class=\"border-gray-200\"\n >\n <ng-container *ngIf=\"col.template; else default\">\n <ng-container *ngTemplateOutlet=\"col.template; context: { row: row, col: col }\"></ng-container>\n </ng-container>\n <ng-template #default>\n <div class=\"flex items-center\">\n {{ row[col.key] }}\n </div>\n </ng-template>\n </td>\n</ng-template>\n", styles: [".np-table{border-collapse:separate;border-spacing:0;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table .select-column{width:40px;max-width:40px}.np-table-shadow{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-table thead{background-color:#f9fafb}.np-table th,.np-table td{padding:12px;text-align:left;border-bottom:1px solid #eaecf0}.np-table th{font-size:12px;font-weight:500}.np-table td{font-size:14px;font-weight:400}.np-table tbody tr:last-child td{border-bottom:none}.filter{border:1px solid rgb(234,236,240);background-color:#fff}.border-l-midtable{border-left:1px solid #eaecf0}.border-r-midtable{border-right:1px solid #eaecf0}.sticky-header{position:sticky;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.no-display-scrollbar::-webkit-scrollbar{width:0px;height:8px}\n"] }]
|
|
2318
2420
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { filterIcons: [{
|
|
2319
2421
|
type: ViewChildren,
|
|
2320
2422
|
args: ['filterIcon']
|
|
@@ -2330,6 +2432,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2330
2432
|
}], tableMiddle: [{
|
|
2331
2433
|
type: ViewChild,
|
|
2332
2434
|
args: ['tableMiddle']
|
|
2435
|
+
}], tableLeft: [{
|
|
2436
|
+
type: ViewChild,
|
|
2437
|
+
args: ['tableLeft']
|
|
2438
|
+
}], tableRight: [{
|
|
2439
|
+
type: ViewChild,
|
|
2440
|
+
args: ['tableRight']
|
|
2333
2441
|
}], columns: [{
|
|
2334
2442
|
type: Input
|
|
2335
2443
|
}], selectableType: [{
|
|
@@ -2342,7 +2450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2342
2450
|
type: Input
|
|
2343
2451
|
}], isUsePagination: [{
|
|
2344
2452
|
type: Input
|
|
2345
|
-
}],
|
|
2453
|
+
}], paginationType: [{
|
|
2346
2454
|
type: Input
|
|
2347
2455
|
}], state: [{
|
|
2348
2456
|
type: Input
|
|
@@ -2491,13 +2599,13 @@ class NpTabComponent {
|
|
|
2491
2599
|
this.updateScrollButtons();
|
|
2492
2600
|
}
|
|
2493
2601
|
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 });
|
|
2494
|
-
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 }] });
|
|
2602
|
+
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)}.small{padding:4px}.small .tab-item{padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }] });
|
|
2495
2603
|
}
|
|
2496
2604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NpTabComponent, decorators: [{
|
|
2497
2605
|
type: Component,
|
|
2498
2606
|
args: [{ selector: 'np-tab', imports: [CommonModule, RouterModule], host: {
|
|
2499
2607
|
class: 'w-full'
|
|
2500
|
-
}, 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"] }]
|
|
2608
|
+
}, template: "<div\n class=\"np-tab h-full relative {{className}}\"\n [ngClass]=\"{\n 'np-vertical': npDirection === 'vertical',\n 'np-horizontal': npDirection === 'horizontal',\n }\"\n>\n <div\n #headerWrapper\n class=\"flex justify-between np-tab-header overflow-x-auto scroll-smooth {{subClassName}}\"\n [ngClass]=\"[\n npDirection === 'vertical' ? 'flex-col w-full' : '',\n npDirection === 'horizontal' ? 'border-gray-200' : '',\n\n npStyle === 'underline'\n ? 'np-tab-underline bg-white' +\n (npDirection === 'horizontal' ? ' border-b' : '')\n : '',\n\n npStyle === 'button'\n ? 'np-tab-button border bg-gray-50 rounded-[5px] p-2'\n : ''\n ]\"\n >\n <div \n #scrollContainer class=\"flex w-fit w-full\" \n [ngClass]=\"{'flex-col': npDirection === 'vertical'}\">\n <ng-container *ngFor=\"let tab of tabs; let index = index; let first = first\">\n <div #tabItem class=\"flex-1\"\n [ngClass]=\"{\n 'min-w-[140px]': npStyle === 'button' && npDirection === 'vertical',\n }\"\n [ngStyle]=\"minWidthItem ? { minWidth: minWidthItem } : {}\"\n >\n <div\n class=\"text-[16px] font-[600] justify-center px-2 tab-item\"\n (click)=\"onChangeTab(tab, index)\"\n [ngClass]=\"{\n 'flex': npDirection === 'horizontal',\n 'is-active': tab.key === tabActive,\n 'py-3': npStyle === 'underline',\n 'py-2': npStyle === 'button',\n }\"\n >\n <span class=\"tab-label\">{{ tab?.label }}</span>\n\n @if(first) {\n @if(npStyle === 'underline') {\n <div\n class=\"tab-underline\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n @if(npStyle === 'button') {\n <div\n class=\"tab-button\"\n [ngStyle]=\"\n npDirection === 'vertical'\n ? { top: indexActive * 100 + '%' }\n : { left: indexActive * 100 + '%' }\n \"\n ></div>\n }\n }\n </div>\n </div>\n </ng-container>\n </div>\n\n <div *ngIf=\"npDirection === 'horizontal' && scrollLeftButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 left-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 left-0 h-full absolute z-1000 flex py-[4px] ps-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollLeft()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-left\"></i>\n </div>\n </div>\n </div>\n <div *ngIf=\"npDirection === 'horizontal' && scrollRightButton\">\n <div\n *ngIf=\"npStyle === 'underline'\"\n (click)=\"scrollRight()\"\n class=\"btn-scroll-undefined cursor-pointer top-0 right-0 h-full absolute z-1000 w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n <div\n *ngIf=\"npStyle === 'button'\"\n class=\"top-0 right-0 h-full absolute z-1000 flex py-[4px] pe-[4px] bg-transparent\"\n >\n <div\n (click)=\"scrollRight()\"\n class=\"btn-scroll-button cursor-pointer bg-white rounded-sm w-[33px] flex items-center justify-center\">\n <i class=\"fa-regular fa-chevron-right\"></i>\n </div>\n </div>\n </div>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [".np-horizontal .np-tab-header .tab-item,.np-vertical .np-tab-header .tab-item{background-color:transparent;color:#667085;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,border-radius .3s ease,border .3s ease,box-shadow .3s ease}.np-horizontal .np-tab-header .tab-item .tab-label,.np-vertical .np-tab-header .tab-item .tab-label{z-index:100;position:relative}.np-horizontal .np-tab-header .tab-item .tab-underline,.np-vertical .np-tab-header .tab-item .tab-underline{position:absolute;background-color:#475467;z-index:99;transition:all .3s ease-in-out}.np-horizontal .np-tab-header .tab-item .tab-button,.np-vertical .np-tab-header .tab-item .tab-button{position:absolute;width:100%;height:100%;background-color:#fff;color:#344054;box-shadow:0 1px 3px #1018281a;border-radius:3px;transition:left .3s ease-in-out}.np-horizontal .np-tab-button .tab-item.is-active,.np-vertical .np-tab-button .tab-item.is-active{background-color:#fff;border-radius:4px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.np-horizontal .np-tab-button .tab-item.is-active .tab-label,.np-vertical .np-tab-button .tab-item.is-active .tab-label{color:#344054}.np-horizontal .np-tab-underline .is-active,.np-vertical .np-tab-underline .is-active{background-color:#f9fafb}.np-horizontal .np-tab-underline .is-active .tab-label,.np-vertical .np-tab-underline .is-active .tab-label{color:#344054}.np-horizontal .tab-underline{width:100%;bottom:0;height:2px;left:0}.np-horizontal .tab-button{bottom:0;left:0}.np-vertical .tab-underline{height:100%;width:2px;top:0;left:0}.np-vertical .tab-button{top:0;left:0}.np-vertical .np-tab-button{border-color:#eaecf0}.btn-scroll-undefined{background-color:#f2f4f7}.btn-scroll-button{box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.btn-scroll{background:linear-gradient(to right,white 80%,transparent)}.small{padding:4px}.small .tab-item{padding:5px}\n"] }]
|
|
2501
2609
|
}], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { headerWrapperRef: [{
|
|
2502
2610
|
type: ViewChild,
|
|
2503
2611
|
args: ['headerWrapper', { static: false }]
|