@neoprototype/neop-ui-lib 1.0.32 → 1.0.34
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
|
}, {
|
|
@@ -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;
|
|
@@ -1974,7 +1980,7 @@ class NpTableComponent {
|
|
|
1974
1980
|
set dataSource(value) {
|
|
1975
1981
|
this._dataSource =
|
|
1976
1982
|
value?.map((row) => {
|
|
1977
|
-
const selectFc = new FormControl(false);
|
|
1983
|
+
const selectFc = row?.selectFc ?? new FormControl(false);
|
|
1978
1984
|
selectFc.valueChanges.subscribe((checked) => {
|
|
1979
1985
|
this.rowChecked.emit({ row, checked: !!checked });
|
|
1980
1986
|
});
|
|
@@ -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", 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: "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]=\"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 \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]=\"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 <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]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <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]=\"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 \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]=\"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 <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]=\"panigationType\"\n [totalItems]=\"filteredData.length\"\n [(pageIndex)]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"currentPageSize\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n ></np-pagination>\n </div>\n </div>\n }\n} @else {\n <div class=\"np-table rounded-xl pb-[100px] max-w-[535px]\">\n <div class=\"flex flex-col relative justify-center items-center h-full mt-[-40px]\">\n <img src=\"assets/images/error-table.png\" alt=\"error\"/>\n <div class=\"flex flex-col items-center justify-center gap-2 absolute bottom-0 left-[50%] translate-x-[-50%]\">\n <div class=\"flex flex-col items-center\">\n <np-typography npType=\"text\" npSize=\"md\" npWeight=\"semibold\">\n Something went wrong...\n </np-typography>\n <np-typography npType=\"text\" npSize=\"sm\" npWeight=\"regular\" style=\"color: rgba(71, 84, 103, 1); max-width: 352px; text-align: center;\">\n We had some trouble loading this page. <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: [{
|
|
@@ -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 }]
|