@paperless/angular 1.52.0 → 1.52.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/animations/fade.mjs +1 -1
- package/esm2020/lib/animations/slide.mjs +1 -1
- package/esm2020/lib/base/form.component.mjs +5 -5
- package/esm2020/lib/base/upload.component.mjs +1 -1
- package/esm2020/lib/base/value-accessor.mjs +2 -3
- package/esm2020/lib/directives/index.mjs +1 -1
- package/esm2020/lib/directives/p-datepicker.directive.mjs +3 -2
- package/esm2020/lib/directives/p-page-size-select.directive.mjs +3 -4
- package/esm2020/lib/directives/p-pagination.directive.mjs +3 -4
- package/esm2020/lib/modules/overlay/overlay.module.mjs +1 -1
- package/esm2020/lib/modules/overlay/overlay.ref.mjs +1 -1
- package/esm2020/lib/modules/overlay/services/overlay.service.mjs +1 -1
- package/esm2020/lib/modules/table/base/index.mjs +1 -1
- package/esm2020/lib/modules/table/base/table.component.mjs +7 -10
- package/esm2020/lib/modules/table/components/table/table.component.mjs +105 -32
- package/esm2020/lib/modules/table/components/table-cell/table-cell.component.mjs +46 -144
- package/esm2020/lib/modules/table/components/table-column/table-column.component.mjs +6 -25
- package/esm2020/lib/modules/table/components/table-row-action/table-row-action.component.mjs +1 -1
- package/esm2020/lib/modules/table/directives/p-table-custom-filter.directive.mjs +1 -1
- package/esm2020/lib/modules/table/directives/p-table-filter-modal.directive.mjs +1 -1
- package/esm2020/lib/modules/table/directives/p-table-header.directive.mjs +2 -3
- package/esm2020/lib/modules/table/directives/p-table-ngx.directive.mjs +13 -6
- package/esm2020/lib/modules/table/directives/p-table.directive.mjs +2 -3
- package/esm2020/lib/modules/table/utils.mjs +2 -2
- package/esm2020/lib/modules/toast/components/toast-container/toast-container.component.mjs +4 -4
- package/esm2020/lib/modules/toast/directives/toast.directive.mjs +1 -1
- package/esm2020/lib/modules/toast/services/toast.service.mjs +1 -1
- package/esm2020/lib/modules/toast/toast.module.mjs +1 -1
- package/esm2020/lib/modules/toast/types.mjs +1 -1
- package/esm2020/lib/paperless.module.mjs +1 -1
- package/esm2020/lib/pipes/currency.pipe.mjs +1 -1
- package/esm2020/lib/pipes/safe.pipe.mjs +1 -1
- package/esm2020/lib/stencil.module.mjs +1 -1
- package/fesm2015/paperless-angular.mjs +188 -221
- package/fesm2015/paperless-angular.mjs.map +1 -1
- package/fesm2020/paperless-angular.mjs +187 -231
- package/fesm2020/paperless-angular.mjs.map +1 -1
- package/lib/modules/table/components/table/table.component.d.ts +5 -0
- package/lib/modules/table/components/table-cell/table-cell.component.d.ts +0 -2
- package/lib/modules/table/components/table-column/table-column.component.d.ts +2 -3
- package/package.json +1 -1
- package/paperless.css +48 -13
|
@@ -2,7 +2,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { Component, EventEmitter, ChangeDetectionStrategy, Input, Output, ViewChild, Directive, HostListener, NgModule, Injector, Injectable, HostBinding, TemplateRef, ContentChild, Host, ContentChildren, Pipe } from '@angular/core';
|
|
4
4
|
import { FormControl, FormGroup, FormArray, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
-
import { BehaviorSubject, fromEvent, Subject, timer, distinctUntilChanged, take, map as map$1 } from 'rxjs';
|
|
5
|
+
import { BehaviorSubject, fromEvent, Subject, timer, distinctUntilChanged, take, filter as filter$1, map as map$1 } from 'rxjs';
|
|
6
6
|
import * as i1$1 from '@angular/common';
|
|
7
7
|
import { CommonModule, DatePipe, CurrencyPipe } from '@angular/common';
|
|
8
8
|
import { __decorate } from 'tslib';
|
|
@@ -13,7 +13,7 @@ import { PlatformModule } from '@angular/cdk/platform';
|
|
|
13
13
|
import { PortalModule, CdkPortal, ComponentPortal } from '@angular/cdk/portal';
|
|
14
14
|
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
|
15
15
|
import { startWith, tap, pairwise, map, filter, debounce } from 'rxjs/operators';
|
|
16
|
-
import {
|
|
16
|
+
import { getTableCellColumnClasses, objectGetByPath, isMobile, tableColumSizesOptions } from '@paperless/core';
|
|
17
17
|
import * as i2 from '@angular/router';
|
|
18
18
|
import { RouterModule } from '@angular/router';
|
|
19
19
|
import { v4 } from 'uuid';
|
|
@@ -65,7 +65,7 @@ class BaseFormComponent {
|
|
|
65
65
|
}
|
|
66
66
|
scrollToFirstError() {
|
|
67
67
|
const invalidInputs = Array.from(document.getElementsByClassName('ng-invalid'))
|
|
68
|
-
.filter(
|
|
68
|
+
.filter(e => e?.nodeName?.toLowerCase() !== 'form')
|
|
69
69
|
.sort((a, b) => a.scrollTop - b.scrollTop);
|
|
70
70
|
const first = invalidInputs[0];
|
|
71
71
|
if (first) {
|
|
@@ -109,13 +109,13 @@ class BaseFormComponent {
|
|
|
109
109
|
return this.firstControlError(control);
|
|
110
110
|
}
|
|
111
111
|
hasControlError(control, showChildErrors = true) {
|
|
112
|
-
return
|
|
112
|
+
return control?.dirty && this.firstControlError(control, showChildErrors);
|
|
113
113
|
}
|
|
114
114
|
firstControlError(control, showChildErrors = true) {
|
|
115
115
|
if (control instanceof FormGroup && showChildErrors) {
|
|
116
116
|
const errors = Object.keys(control.controls)
|
|
117
|
-
.map(
|
|
118
|
-
.filter(
|
|
117
|
+
.map(key => this.firstControlError(control.controls[key]))
|
|
118
|
+
.filter(val => !!val);
|
|
119
119
|
return errors[0];
|
|
120
120
|
}
|
|
121
121
|
if (!control?.errors) {
|
|
@@ -225,8 +225,7 @@ class BaseValueAccessor {
|
|
|
225
225
|
};
|
|
226
226
|
}
|
|
227
227
|
writeValue(value) {
|
|
228
|
-
this.el.nativeElement.value = this.lastValue =
|
|
229
|
-
value == null ? '' : value;
|
|
228
|
+
this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
|
|
230
229
|
}
|
|
231
230
|
handleChangeEvent(value) {
|
|
232
231
|
if (value !== this.lastValue) {
|
|
@@ -292,7 +291,8 @@ class DatepickerDirective extends BaseValueAccessor {
|
|
|
292
291
|
super(el);
|
|
293
292
|
}
|
|
294
293
|
writeValue(value) {
|
|
295
|
-
this.el.nativeElement.value = this.lastValue =
|
|
294
|
+
this.el.nativeElement.value = this.lastValue =
|
|
295
|
+
value === null ? JSON.parse(value) : value;
|
|
296
296
|
}
|
|
297
297
|
}
|
|
298
298
|
DatepickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -325,11 +325,10 @@ class PageSizeSelectDirective extends BaseValueAccessor {
|
|
|
325
325
|
super(el);
|
|
326
326
|
}
|
|
327
327
|
writeValue(value) {
|
|
328
|
-
this.el.nativeElement.page = this.lastValue =
|
|
329
|
-
value == null ? 12 : value;
|
|
328
|
+
this.el.nativeElement.page = this.lastValue = value == null ? 12 : value;
|
|
330
329
|
}
|
|
331
330
|
registerOnChange(fn) {
|
|
332
|
-
super.registerOnChange(
|
|
331
|
+
super.registerOnChange(value => fn(parseInt(value, 10)));
|
|
333
332
|
}
|
|
334
333
|
}
|
|
335
334
|
PageSizeSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageSizeSelectDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -363,11 +362,10 @@ class PaginationDirective extends BaseValueAccessor {
|
|
|
363
362
|
super(el);
|
|
364
363
|
}
|
|
365
364
|
writeValue(value) {
|
|
366
|
-
this.el.nativeElement.page = this.lastValue =
|
|
367
|
-
value == null ? 1 : value;
|
|
365
|
+
this.el.nativeElement.page = this.lastValue = value == null ? 1 : value;
|
|
368
366
|
}
|
|
369
367
|
registerOnChange(fn) {
|
|
370
|
-
super.registerOnChange(
|
|
368
|
+
super.registerOnChange(value => fn(parseInt(value, 10)));
|
|
371
369
|
}
|
|
372
370
|
}
|
|
373
371
|
PaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PaginationDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -2141,7 +2139,7 @@ const createFormFilters = (values, quickFilters, quickFilterKey) => {
|
|
|
2141
2139
|
continue;
|
|
2142
2140
|
}
|
|
2143
2141
|
if (quickFilterKey && key === quickFilterKey) {
|
|
2144
|
-
quickFilter = quickFilters.find(
|
|
2142
|
+
quickFilter = quickFilters.find(f => f.value === value);
|
|
2145
2143
|
continue;
|
|
2146
2144
|
}
|
|
2147
2145
|
filters.push({
|
|
@@ -2266,13 +2264,13 @@ let BaseTableComponent = class BaseTableComponent extends BaseFormComponent {
|
|
|
2266
2264
|
selectedRows: this.parsedDefaultTableValues.selectedRows,
|
|
2267
2265
|
});
|
|
2268
2266
|
this.tableOptions.valueChanges
|
|
2269
|
-
.pipe(untilDestroyed(this), startWith(this.tableOptions.value), tap((value) => this.tableOptionsChange.next(value)), pairwise(), map(([previous, next]) => this._getChanges(previous, next)), filter(
|
|
2267
|
+
.pipe(untilDestroyed(this), startWith(this.tableOptions.value), tap((value) => this.tableOptionsChange.next(value)), pairwise(), map(([previous, next]) => this._getChanges(previous, next)), filter(changes => !!changes), debounce(changes => {
|
|
2270
2268
|
if (changes?.query && Object.keys(changes)?.length === 1) {
|
|
2271
2269
|
return timer(300);
|
|
2272
2270
|
}
|
|
2273
2271
|
return timer(0);
|
|
2274
2272
|
}))
|
|
2275
|
-
.subscribe(
|
|
2273
|
+
.subscribe(changes => {
|
|
2276
2274
|
if (changes?.page) {
|
|
2277
2275
|
this._refresh();
|
|
2278
2276
|
return;
|
|
@@ -2297,16 +2295,14 @@ let BaseTableComponent = class BaseTableComponent extends BaseFormComponent {
|
|
|
2297
2295
|
}
|
|
2298
2296
|
checkFilterForm() {
|
|
2299
2297
|
for (const key of Object.keys(this.filterForm.controls)) {
|
|
2300
|
-
const filter = this.filters.find(
|
|
2301
|
-
(key === this.filterFormQuickFilterKey
|
|
2302
|
-
? this.quickFilter
|
|
2303
|
-
: null);
|
|
2298
|
+
const filter = this.filters.find(f => f.key === key) ||
|
|
2299
|
+
(key === this.filterFormQuickFilterKey ? this.quickFilter : null);
|
|
2304
2300
|
this.filterForm.get(key)?.setValue(filter?.value ?? null);
|
|
2305
2301
|
}
|
|
2306
2302
|
}
|
|
2307
2303
|
resetFormFilters(resetQuickFilter = false) {
|
|
2308
2304
|
const values = this.filterForm.value;
|
|
2309
|
-
const defaultQuickFilter = this.quickFilters.find(
|
|
2305
|
+
const defaultQuickFilter = this.quickFilters.find(f => f.default);
|
|
2310
2306
|
for (const key of Object.keys(values)) {
|
|
2311
2307
|
if (key === this.filterFormQuickFilterKey) {
|
|
2312
2308
|
if (resetQuickFilter) {
|
|
@@ -2353,8 +2349,7 @@ let BaseTableComponent = class BaseTableComponent extends BaseFormComponent {
|
|
|
2353
2349
|
}
|
|
2354
2350
|
_watchProperty(observable, identifier = 'id') {
|
|
2355
2351
|
return observable.pipe(untilDestroyed(this), startWith(null), pairwise(), filter(([prev, cur]) => prev !== cur && !!cur), tap(([previous, current]) => {
|
|
2356
|
-
if (previous &&
|
|
2357
|
-
previous[identifier] !== current?.[identifier]) {
|
|
2352
|
+
if (previous && previous[identifier] !== current?.[identifier]) {
|
|
2358
2353
|
this.resetTable(false, true);
|
|
2359
2354
|
}
|
|
2360
2355
|
}), map(([_, current]) => current));
|
|
@@ -2375,89 +2370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2375
2370
|
}] } });
|
|
2376
2371
|
|
|
2377
2372
|
/* eslint-disable max-len */
|
|
2378
|
-
|
|
2379
|
-
constructor() {
|
|
2380
|
-
/**
|
|
2381
|
-
* The variant of the column
|
|
2382
|
-
*/
|
|
2383
|
-
this.variant = 'default';
|
|
2384
|
-
/**
|
|
2385
|
-
* The index of the column
|
|
2386
|
-
*/
|
|
2387
|
-
this.index = 0;
|
|
2388
|
-
/**
|
|
2389
|
-
* The index of the row
|
|
2390
|
-
*/
|
|
2391
|
-
this.rowIndex = 0;
|
|
2392
|
-
/**
|
|
2393
|
-
* Wether the table has actions
|
|
2394
|
-
*/
|
|
2395
|
-
this.tableHasActions = false;
|
|
2396
|
-
}
|
|
2397
|
-
get class() {
|
|
2398
|
-
return this.getColumnClasses();
|
|
2399
|
-
}
|
|
2400
|
-
get data() {
|
|
2401
|
-
if (this.variant === 'header') {
|
|
2402
|
-
return {
|
|
2403
|
-
value: this.value,
|
|
2404
|
-
};
|
|
2405
|
-
}
|
|
2406
|
-
return {
|
|
2407
|
-
value: this.value ?? objectGetByPath(this.item, this.definition.path),
|
|
2408
|
-
item: this.item,
|
|
2409
|
-
index: this.index,
|
|
2410
|
-
rowIndex: this.rowIndex,
|
|
2411
|
-
};
|
|
2412
|
-
}
|
|
2413
|
-
// render() {
|
|
2414
|
-
// return (
|
|
2415
|
-
// <Host
|
|
2416
|
-
// class={{
|
|
2417
|
-
// 'p-table-column': true,
|
|
2418
|
-
// [`variant-${this.variant}`]: true,
|
|
2419
|
-
// ...this._getColumnClasses(),
|
|
2420
|
-
// }}
|
|
2421
|
-
// >
|
|
2422
|
-
// {this.checkbox}
|
|
2423
|
-
// {this.variant === 'loading' ? (
|
|
2424
|
-
// <p-loader
|
|
2425
|
-
// variant="ghost"
|
|
2426
|
-
// class="rounded flex-1 w-full h-6"
|
|
2427
|
-
// />
|
|
2428
|
-
// ) : (
|
|
2429
|
-
// <div class="flex">
|
|
2430
|
-
// {this.variant === 'header' ? (
|
|
2431
|
-
// this.data.value
|
|
2432
|
-
// ) : this.definition.useSlot ? (
|
|
2433
|
-
// <slot />
|
|
2434
|
-
// ) : (
|
|
2435
|
-
// this.template(this.data as TableDefinitionData)
|
|
2436
|
-
// )}
|
|
2437
|
-
// </div>
|
|
2438
|
-
// )}
|
|
2439
|
-
// </Host>
|
|
2440
|
-
// );
|
|
2441
|
-
// }
|
|
2442
|
-
getColumnClasses() {
|
|
2443
|
-
const sizes = this.definition ? this._getSizes(this.definition) : {};
|
|
2444
|
-
return {
|
|
2445
|
-
'justify-start': !this.definition?.align || this.definition?.align === 'start',
|
|
2446
|
-
'justify-center': this.definition?.align === 'center',
|
|
2447
|
-
'justify-end': this.definition?.align === 'end',
|
|
2448
|
-
'font-semibold': this.variant !== 'header' && this.definition?.type === 'th',
|
|
2449
|
-
'text-storm-dark': this.variant !== 'header' && this.definition?.type === 'th',
|
|
2450
|
-
'pr-4': this.definition?.isLast === false,
|
|
2451
|
-
'group-hover:hidden': this.definition.isLast &&
|
|
2452
|
-
this.tableHasActions &&
|
|
2453
|
-
this.variant !== 'actions',
|
|
2454
|
-
'group-hover:flex': this.variant === 'actions' && this.tableHasActions,
|
|
2455
|
-
hidden: this.variant === 'actions' && this.tableHasActions,
|
|
2456
|
-
flex: this.variant !== 'actions',
|
|
2457
|
-
...sizes,
|
|
2458
|
-
};
|
|
2459
|
-
}
|
|
2460
|
-
/*
|
|
2373
|
+
/*
|
|
2461
2374
|
With this, we shall hack the system in ways no one would ever have thought.
|
|
2462
2375
|
|
|
2463
2376
|
w-1/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12 w-10/12 w-11/12 w-12/12
|
|
@@ -2468,13 +2381,13 @@ class TableCell {
|
|
|
2468
2381
|
desktop:w-1/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12 desktop:w-10/12 desktop:w-11/12 desktop:w-12/12
|
|
2469
2382
|
desktop-lg:w-1/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-12/12
|
|
2470
2383
|
desktop-xl:w-1/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-12/12
|
|
2471
|
-
hidden flex
|
|
2472
|
-
tablet:hidden tablet:flex
|
|
2473
|
-
desktop-xs:hidden desktop-xs:flex
|
|
2474
|
-
desktop-sm:hidden desktop-sm:flex
|
|
2475
|
-
desktop:hidden desktop:flex
|
|
2476
|
-
desktop-lg:hidden desktop-lg:flex
|
|
2477
|
-
desktop-xl:hidden desktop-xl:flex
|
|
2384
|
+
hidden flex group-hover:hidden group-hover:flex
|
|
2385
|
+
tablet:hidden tablet:flex tablet:group-hover:hidden tablet:group-hover:flex
|
|
2386
|
+
desktop-xs:hidden desktop-xs:flex desktop-xs:group-hover:hidden desktop-xs:group-hover:flex
|
|
2387
|
+
desktop-sm:hidden desktop-sm:flex desktop-sm:group-hover:hidden desktop-sm:group-hover:flex
|
|
2388
|
+
desktop:hidden desktop:flex desktop:group-hover:hidden desktop:group-hover:flex
|
|
2389
|
+
desktop-lg:hidden desktop-lg:flex desktop-lg:group-hover:hidden desktop-lg:group-hover:flex
|
|
2390
|
+
desktop-xl:hidden desktop-xl:flex desktop-xl:group-hover:hidden desktop-xl:group-hover:flex
|
|
2478
2391
|
|
|
2479
2392
|
|
|
2480
2393
|
⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀
|
|
@@ -2505,71 +2418,55 @@ class TableCell {
|
|
|
2505
2418
|
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
|
2506
2419
|
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
|
2507
2420
|
*/
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2421
|
+
class TableCell {
|
|
2422
|
+
constructor() {
|
|
2423
|
+
/**
|
|
2424
|
+
* The variant of the column
|
|
2425
|
+
*/
|
|
2426
|
+
this.variant = 'default';
|
|
2427
|
+
/**
|
|
2428
|
+
* The index of the column
|
|
2429
|
+
*/
|
|
2430
|
+
this.index = 0;
|
|
2431
|
+
/**
|
|
2432
|
+
* The index of the row
|
|
2433
|
+
*/
|
|
2434
|
+
this.rowIndex = 0;
|
|
2435
|
+
/**
|
|
2436
|
+
* Wether the table has actions
|
|
2437
|
+
*/
|
|
2438
|
+
this.tableHasActions = false;
|
|
2439
|
+
}
|
|
2440
|
+
get class() {
|
|
2441
|
+
return getTableCellColumnClasses(this.definition, this.variant, this.tableHasActions);
|
|
2442
|
+
}
|
|
2443
|
+
get data() {
|
|
2444
|
+
if (this.variant === 'header') {
|
|
2515
2445
|
return {
|
|
2516
|
-
|
|
2446
|
+
value: this.value,
|
|
2517
2447
|
};
|
|
2518
2448
|
}
|
|
2519
|
-
if (
|
|
2520
|
-
sizes = sizes;
|
|
2521
|
-
const classes = {};
|
|
2522
|
-
let previousSize;
|
|
2523
|
-
for (let size in sizes) {
|
|
2524
|
-
if (!isTableColumnSizesKey(sizes, size)) {
|
|
2525
|
-
continue;
|
|
2526
|
-
}
|
|
2527
|
-
if (size === 'default') {
|
|
2528
|
-
if (sizes.default === 'hidden') {
|
|
2529
|
-
classes['hidden'] = true;
|
|
2530
|
-
previousSize = size;
|
|
2531
|
-
continue;
|
|
2532
|
-
}
|
|
2533
|
-
classes[`w-${sizes.default}/12`] = true;
|
|
2534
|
-
previousSize = size;
|
|
2535
|
-
continue;
|
|
2536
|
-
}
|
|
2537
|
-
const currentValue = sizes[size];
|
|
2538
|
-
const previousValue = previousSize ? sizes[previousSize] : null;
|
|
2539
|
-
if (currentValue !== 'hidden' &&
|
|
2540
|
-
previousValue &&
|
|
2541
|
-
previousValue === 'hidden') {
|
|
2542
|
-
classes[`${size}:flex`] = true;
|
|
2543
|
-
}
|
|
2544
|
-
if (currentValue === 'hidden') {
|
|
2545
|
-
classes[`${size}:hidden`] = true;
|
|
2546
|
-
previousSize = size;
|
|
2547
|
-
continue;
|
|
2548
|
-
}
|
|
2549
|
-
if (currentValue === 12 || currentValue === 'full') {
|
|
2550
|
-
classes[`${size}:w-full`] = true;
|
|
2551
|
-
}
|
|
2552
|
-
classes[`${size}:w-${currentValue}/12`] = true;
|
|
2553
|
-
previousSize = size;
|
|
2554
|
-
}
|
|
2555
|
-
return classes;
|
|
2556
|
-
}
|
|
2557
|
-
if (sizes === 12 || sizes === 'full') {
|
|
2449
|
+
if (this.variant === 'actions') {
|
|
2558
2450
|
return {
|
|
2559
|
-
|
|
2451
|
+
value: this.value,
|
|
2452
|
+
item: this.item,
|
|
2453
|
+
index: this.index,
|
|
2454
|
+
rowIndex: this.rowIndex,
|
|
2560
2455
|
};
|
|
2561
2456
|
}
|
|
2562
|
-
// is a number.
|
|
2563
2457
|
return {
|
|
2564
|
-
|
|
2458
|
+
value: this.value ?? objectGetByPath(this.item, this.definition.path),
|
|
2459
|
+
item: this.item,
|
|
2460
|
+
index: this.index,
|
|
2461
|
+
rowIndex: this.rowIndex,
|
|
2565
2462
|
};
|
|
2566
2463
|
}
|
|
2567
2464
|
}
|
|
2568
2465
|
TableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2569
|
-
TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCell, selector: "p-table-cell-ngx", inputs: { variant: "variant", index: "index", rowIndex: "rowIndex", definition: "definition", item: "item", value: "value", tableHasActions: "tableHasActions", checkbox: "checkbox", template: "template" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container
|
|
2466
|
+
TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCell, selector: "p-table-cell-ngx", inputs: { variant: "variant", index: "index", rowIndex: "rowIndex", definition: "definition", item: "item", value: "value", tableHasActions: "tableHasActions", checkbox: "checkbox", template: "template" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngSwitchCase=\"'header'\"\n\t\tclass=\"flex w-full overflow-hidden\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\tclass=\"flex min-w-0 flex-1\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t{{ data.value }}\n</ng-template>\n", styles: [":host{align-items:center;gap:1rem}\n"], dependencies: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }] });
|
|
2570
2467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCell, decorators: [{
|
|
2571
2468
|
type: Component,
|
|
2572
|
-
args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container
|
|
2469
|
+
args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngSwitchCase=\"'header'\"\n\t\tclass=\"flex w-full overflow-hidden\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\tclass=\"flex min-w-0 flex-1\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t{{ data.value }}\n</ng-template>\n", styles: [":host{align-items:center;gap:1rem}\n"] }]
|
|
2573
2470
|
}], propDecorators: { variant: [{
|
|
2574
2471
|
type: Input
|
|
2575
2472
|
}], index: [{
|
|
@@ -2596,26 +2493,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2596
2493
|
let TableColumn = class TableColumn {
|
|
2597
2494
|
constructor(c, r, z) {
|
|
2598
2495
|
this.z = z;
|
|
2599
|
-
this.isLast = false;
|
|
2600
2496
|
c.detach();
|
|
2601
2497
|
this.el = r.nativeElement;
|
|
2602
2498
|
proxyOutputs(this, this.el, ['tableDefinitionChanged']);
|
|
2603
2499
|
}
|
|
2604
2500
|
};
|
|
2605
2501
|
TableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumn, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2606
|
-
TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot", hasCheckbox: "hasCheckbox"
|
|
2502
|
+
TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot", hasCheckbox: "hasCheckbox" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2607
2503
|
TableColumn = __decorate([
|
|
2608
2504
|
ProxyCmp({
|
|
2609
2505
|
defineCustomElementFn: undefined,
|
|
2610
|
-
inputs: [
|
|
2611
|
-
'align',
|
|
2612
|
-
'name',
|
|
2613
|
-
'path',
|
|
2614
|
-
'sizes',
|
|
2615
|
-
'type',
|
|
2616
|
-
'useSlot',
|
|
2617
|
-
'hasCheckbox',
|
|
2618
|
-
],
|
|
2506
|
+
inputs: ['align', 'name', 'path', 'sizes', 'type', 'useSlot', 'hasCheckbox'],
|
|
2619
2507
|
})
|
|
2620
2508
|
], TableColumn);
|
|
2621
2509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumn, decorators: [{
|
|
@@ -2624,19 +2512,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2624
2512
|
selector: 'p-table-column',
|
|
2625
2513
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2626
2514
|
template: '<ng-content></ng-content>',
|
|
2627
|
-
inputs: [
|
|
2628
|
-
'align',
|
|
2629
|
-
'name',
|
|
2630
|
-
'path',
|
|
2631
|
-
'sizes',
|
|
2632
|
-
'type',
|
|
2633
|
-
'useSlot',
|
|
2634
|
-
'hasCheckbox',
|
|
2635
|
-
],
|
|
2515
|
+
inputs: ['align', 'name', 'path', 'sizes', 'type', 'useSlot', 'hasCheckbox'],
|
|
2636
2516
|
}]
|
|
2637
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: {
|
|
2638
|
-
type: Input
|
|
2639
|
-
}], template: [{
|
|
2517
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { template: [{
|
|
2640
2518
|
type: ContentChild,
|
|
2641
2519
|
args: [TemplateRef, {
|
|
2642
2520
|
read: TemplateRef,
|
|
@@ -2739,8 +2617,7 @@ class TableHeaderDirective extends BaseValueAccessor {
|
|
|
2739
2617
|
}
|
|
2740
2618
|
}
|
|
2741
2619
|
_setActiveQuickFilter(quickFilter) {
|
|
2742
|
-
this.el.nativeElement.activeQuickFilterIdentifier =
|
|
2743
|
-
quickFilter?.identifier;
|
|
2620
|
+
this.el.nativeElement.activeQuickFilterIdentifier = quickFilter?.identifier;
|
|
2744
2621
|
}
|
|
2745
2622
|
}
|
|
2746
2623
|
TableHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -2802,7 +2679,10 @@ class TableNgxDirective extends BaseValueAccessor {
|
|
|
2802
2679
|
if (value?.quickFilter) {
|
|
2803
2680
|
this._setActiveQuickFilter(value.quickFilter);
|
|
2804
2681
|
}
|
|
2805
|
-
this._base.selectedFiltersAmount =
|
|
2682
|
+
this._base.selectedFiltersAmount =
|
|
2683
|
+
!value.filters || value.filters.length === 0
|
|
2684
|
+
? undefined
|
|
2685
|
+
: value.filters.length;
|
|
2806
2686
|
this._checkEmptyStateType();
|
|
2807
2687
|
this._checkResetButtons();
|
|
2808
2688
|
}
|
|
@@ -2829,7 +2709,11 @@ class TableNgxDirective extends BaseValueAccessor {
|
|
|
2829
2709
|
// quickFilter?.identifier;
|
|
2830
2710
|
}
|
|
2831
2711
|
_checkEmptyStateType() {
|
|
2832
|
-
if (this.lastValue.query?.length ||
|
|
2712
|
+
if (this.lastValue.query?.length ||
|
|
2713
|
+
(this.lastValue.quickFilter && !this.lastValue.quickFilter?.default) ||
|
|
2714
|
+
(this._base.selectedFiltersAmount &&
|
|
2715
|
+
this._base.selectedFiltersAmount > 0) ||
|
|
2716
|
+
this.lastValue.filters?.length) {
|
|
2833
2717
|
this._base.emptyStateType = 'filtered';
|
|
2834
2718
|
return;
|
|
2835
2719
|
}
|
|
@@ -2838,15 +2722,15 @@ class TableNgxDirective extends BaseValueAccessor {
|
|
|
2838
2722
|
_checkResetButtons() {
|
|
2839
2723
|
const activeQuickFilter = this.lastValue.quickFilter;
|
|
2840
2724
|
const selectedFiltersAmount = this._base.selectedFiltersAmount;
|
|
2841
|
-
if (activeQuickFilter ||
|
|
2842
|
-
selectedFiltersAmount) {
|
|
2725
|
+
if (activeQuickFilter || selectedFiltersAmount) {
|
|
2843
2726
|
if (selectedFiltersAmount && selectedFiltersAmount > 0) {
|
|
2844
2727
|
this._base.filterModalShowReset = true;
|
|
2845
2728
|
}
|
|
2846
2729
|
else {
|
|
2847
2730
|
this._base.filterModalShowReset = false;
|
|
2848
2731
|
}
|
|
2849
|
-
if (selectedFiltersAmount && selectedFiltersAmount > 0 ||
|
|
2732
|
+
if ((selectedFiltersAmount && selectedFiltersAmount > 0) ||
|
|
2733
|
+
!activeQuickFilter?.default) {
|
|
2850
2734
|
this._base.filterModalShowResetMobile = true;
|
|
2851
2735
|
}
|
|
2852
2736
|
else {
|
|
@@ -2926,8 +2810,7 @@ class TableDirective extends BaseValueAccessor {
|
|
|
2926
2810
|
}
|
|
2927
2811
|
}
|
|
2928
2812
|
_setActiveQuickFilter(quickFilter) {
|
|
2929
|
-
this.el.nativeElement.activeQuickFilterIdentifier =
|
|
2930
|
-
quickFilter?.identifier;
|
|
2813
|
+
this.el.nativeElement.activeQuickFilterIdentifier = quickFilter?.identifier;
|
|
2931
2814
|
}
|
|
2932
2815
|
}
|
|
2933
2816
|
TableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -3229,6 +3112,7 @@ let Table = class Table {
|
|
|
3229
3112
|
this.filterModalSave = new EventEmitter();
|
|
3230
3113
|
this.filterModalReset = new EventEmitter();
|
|
3231
3114
|
this.rowActionsRow$ = new BehaviorSubject([]);
|
|
3115
|
+
this.rowActionsRowDefinition$ = new BehaviorSubject(undefined);
|
|
3232
3116
|
this.rowActionsFloatingAll$ = new BehaviorSubject([]);
|
|
3233
3117
|
this.rowActionsFloating$ = new BehaviorSubject([]);
|
|
3234
3118
|
this.isMobile$ = new BehaviorSubject(isMobile());
|
|
@@ -3256,7 +3140,7 @@ let Table = class Table {
|
|
|
3256
3140
|
});
|
|
3257
3141
|
this.filterModalShow$
|
|
3258
3142
|
.pipe(untilDestroyed(this), distinctUntilChanged())
|
|
3259
|
-
.subscribe(
|
|
3143
|
+
.subscribe(value => this.filterModalShow.next(value));
|
|
3260
3144
|
}
|
|
3261
3145
|
ngOnChanges(changes) {
|
|
3262
3146
|
if (changes['items']) {
|
|
@@ -3274,8 +3158,7 @@ let Table = class Table {
|
|
|
3274
3158
|
calculateRowSelectionData = true;
|
|
3275
3159
|
}
|
|
3276
3160
|
if (changes['rowSelectionLimit']) {
|
|
3277
|
-
this._inputRowSelectionLimit =
|
|
3278
|
-
changes['rowSelectionLimit'].currentValue;
|
|
3161
|
+
this._inputRowSelectionLimit = changes['rowSelectionLimit'].currentValue;
|
|
3279
3162
|
calculateRowSelectionData = true;
|
|
3280
3163
|
}
|
|
3281
3164
|
if (calculateRowSelectionData || changes['selectedRows']) {
|
|
@@ -3343,8 +3226,8 @@ let Table = class Table {
|
|
|
3343
3226
|
this.parsedItems = JSON.parse(items);
|
|
3344
3227
|
}
|
|
3345
3228
|
_generateColumns() {
|
|
3346
|
-
|
|
3347
|
-
definitionsArray
|
|
3229
|
+
let definitionsArray = Array.from(this._columnDefinitions);
|
|
3230
|
+
definitionsArray = this._parseDefinitions(definitionsArray);
|
|
3348
3231
|
this.columns = definitionsArray;
|
|
3349
3232
|
}
|
|
3350
3233
|
_checkboxDisabled(item, rowIndex) {
|
|
@@ -3374,8 +3257,7 @@ let Table = class Table {
|
|
|
3374
3257
|
toAdd.push(row);
|
|
3375
3258
|
this.rowSelected.emit(row);
|
|
3376
3259
|
if (this.rowSelectionLimit !== undefined &&
|
|
3377
|
-
this.selectedRows.length + toAdd.length ===
|
|
3378
|
-
this.rowSelectionLimit) {
|
|
3260
|
+
this.selectedRows.length + toAdd.length === this.rowSelectionLimit) {
|
|
3379
3261
|
break;
|
|
3380
3262
|
}
|
|
3381
3263
|
}
|
|
@@ -3388,8 +3270,7 @@ let Table = class Table {
|
|
|
3388
3270
|
}
|
|
3389
3271
|
for (let i = 0; i < this.selectedRows.length; i++) {
|
|
3390
3272
|
const value = this.selectedRows[i];
|
|
3391
|
-
const row = this.parsedItems.find(
|
|
3392
|
-
this._getSelectionValue(value, i));
|
|
3273
|
+
const row = this.parsedItems.find(d => this._getSelectionValue(d, i) === this._getSelectionValue(value, i));
|
|
3393
3274
|
if (!row) {
|
|
3394
3275
|
continue;
|
|
3395
3276
|
}
|
|
@@ -3438,7 +3319,7 @@ let Table = class Table {
|
|
|
3438
3319
|
return this.selectionKey ? row?.[this.selectionKey] || index : index;
|
|
3439
3320
|
}
|
|
3440
3321
|
_selectionContains(row, index, returnIndex = false) {
|
|
3441
|
-
const returnValue = this.selectedRows.findIndex(
|
|
3322
|
+
const returnValue = this.selectedRows.findIndex(item => this._getSelectionValue(row, index) ===
|
|
3442
3323
|
this._getSelectionValue(item, index));
|
|
3443
3324
|
return !returnIndex ? returnValue >= 0 : returnValue;
|
|
3444
3325
|
}
|
|
@@ -3523,8 +3404,7 @@ let Table = class Table {
|
|
|
3523
3404
|
const item = this.parsedItems[rowIndex];
|
|
3524
3405
|
return this._getActionQueryParams(queryParams(item), rowIndex);
|
|
3525
3406
|
}
|
|
3526
|
-
if (queryParams instanceof Object &&
|
|
3527
|
-
queryParams.constructor === Object) {
|
|
3407
|
+
if (queryParams instanceof Object && queryParams.constructor === Object) {
|
|
3528
3408
|
return new BehaviorSubject(queryParams);
|
|
3529
3409
|
}
|
|
3530
3410
|
return queryParams;
|
|
@@ -3548,14 +3428,13 @@ let Table = class Table {
|
|
|
3548
3428
|
});
|
|
3549
3429
|
return;
|
|
3550
3430
|
}
|
|
3551
|
-
if (rowIndex === undefined) {
|
|
3552
|
-
return;
|
|
3553
|
-
}
|
|
3554
3431
|
if (action.routerLink ||
|
|
3555
3432
|
(Array.isArray(action.routerLink) && action.routerLink.length)) {
|
|
3556
3433
|
return;
|
|
3557
3434
|
}
|
|
3558
|
-
const item =
|
|
3435
|
+
const item = rowIndex !== undefined
|
|
3436
|
+
? this.parsedItems[rowIndex]
|
|
3437
|
+
: this.selectedRows[0];
|
|
3559
3438
|
action.action.emit({
|
|
3560
3439
|
item,
|
|
3561
3440
|
multi: false,
|
|
@@ -3599,15 +3478,14 @@ let Table = class Table {
|
|
|
3599
3478
|
subscription.unsubscribe();
|
|
3600
3479
|
}
|
|
3601
3480
|
}
|
|
3602
|
-
this._rowActionsSubscriptions = actions.map(
|
|
3481
|
+
this._rowActionsSubscriptions = actions.map(action => action._loadingChanged
|
|
3603
3482
|
.pipe(untilDestroyed(this))
|
|
3604
|
-
.subscribe(() =>
|
|
3605
|
-
console.log('Loading changed');
|
|
3606
|
-
this._changeDetection.detectChanges();
|
|
3607
|
-
}));
|
|
3483
|
+
.subscribe(() => this._changeDetection.detectChanges()));
|
|
3608
3484
|
// we hack this to any[] to make it work..
|
|
3609
|
-
const rowActionsRow = actions.filter(
|
|
3610
|
-
const rowActionsFloating = actions.filter(
|
|
3485
|
+
const rowActionsRow = actions.filter(a => a.type === 'both' || a.type === 'single');
|
|
3486
|
+
const rowActionsFloating = actions.filter(a => (this._inputEnableRowSelection &&
|
|
3487
|
+
(a.type === 'both' || a.type === 'multi')) ||
|
|
3488
|
+
(mobile && a.type === 'single' && !a.routerLink));
|
|
3611
3489
|
let rowSelectionLimit = this._inputRowSelectionLimit;
|
|
3612
3490
|
if (mobile && // we're mobile
|
|
3613
3491
|
rowActionsFloating?.length && // we have atleast 1 item in _rowActionsFloating
|
|
@@ -3623,16 +3501,19 @@ let Table = class Table {
|
|
|
3623
3501
|
enableRowSelection = true;
|
|
3624
3502
|
}
|
|
3625
3503
|
this.enableRowSelection = enableRowSelection;
|
|
3504
|
+
this.rowActionsRowDefinition$.next(this._parseRowActionsRowDefinition());
|
|
3626
3505
|
this.rowActionsRow$.next(rowActionsRow);
|
|
3627
3506
|
this.rowActionsFloatingAll$.next(rowActionsFloating);
|
|
3507
|
+
this.floatingMenuShown$
|
|
3508
|
+
.pipe(take(1), filter$1(v => !!v))
|
|
3509
|
+
.subscribe(() => this._showFloatingMenu());
|
|
3628
3510
|
}, 200);
|
|
3629
3511
|
}
|
|
3630
3512
|
_showFloatingMenu() {
|
|
3631
|
-
this.rowActionsFloatingAll$.pipe(take(1)).subscribe(
|
|
3513
|
+
this.rowActionsFloatingAll$.pipe(take(1)).subscribe(actions => {
|
|
3632
3514
|
if (this.rowSelectionLimit === 1 &&
|
|
3633
|
-
actions.findIndex(
|
|
3634
|
-
|
|
3635
|
-
actions = actions.filter((a) => a.type === 'multi' ||
|
|
3515
|
+
actions.findIndex(a => (a.type === 'single' || a.type === 'both') && a.showFunction) >= 0) {
|
|
3516
|
+
actions = actions.filter(a => a.type === 'multi' ||
|
|
3636
3517
|
!a.showFunction ||
|
|
3637
3518
|
a.showFunction(this.selectedRows[0]));
|
|
3638
3519
|
}
|
|
@@ -3640,15 +3521,90 @@ let Table = class Table {
|
|
|
3640
3521
|
this.floatingMenuShown$.next(true);
|
|
3641
3522
|
});
|
|
3642
3523
|
}
|
|
3524
|
+
_parseDefinitions(definitionsArray) {
|
|
3525
|
+
const definitions = definitionsArray.map(definition => {
|
|
3526
|
+
definition = this._parseDefinitionSizes(definition);
|
|
3527
|
+
definition.isLast = {};
|
|
3528
|
+
return definition;
|
|
3529
|
+
});
|
|
3530
|
+
const matchedIsLast = tableColumSizesOptions.reduce((data, size) => {
|
|
3531
|
+
data[size] = false;
|
|
3532
|
+
return data;
|
|
3533
|
+
}, {});
|
|
3534
|
+
for (let i = definitions.length - 1; i >= 0; i--) {
|
|
3535
|
+
const definition = definitions[i];
|
|
3536
|
+
for (const size of tableColumSizesOptions) {
|
|
3537
|
+
if (matchedIsLast[size]) {
|
|
3538
|
+
definition.isLast[size] = false;
|
|
3539
|
+
continue;
|
|
3540
|
+
}
|
|
3541
|
+
if (definition.parsedSizes[size] === 'hidden') {
|
|
3542
|
+
definition.isLast[size] = false;
|
|
3543
|
+
continue;
|
|
3544
|
+
}
|
|
3545
|
+
const isLastAtSizeFound = this._findLastDefinitionBySize(definitions, size);
|
|
3546
|
+
if (isLastAtSizeFound) {
|
|
3547
|
+
definition.isLast[size] = false;
|
|
3548
|
+
continue;
|
|
3549
|
+
}
|
|
3550
|
+
definition.isLast[size] = true;
|
|
3551
|
+
}
|
|
3552
|
+
}
|
|
3553
|
+
return definitions;
|
|
3554
|
+
}
|
|
3555
|
+
_findLastDefinitionBySize(definitions, size) {
|
|
3556
|
+
return definitions
|
|
3557
|
+
.slice()
|
|
3558
|
+
.reverse()
|
|
3559
|
+
.find(d => d.isLast[size] === true);
|
|
3560
|
+
}
|
|
3561
|
+
_parseDefinitionSizes(definition) {
|
|
3562
|
+
const definitionAny = definition;
|
|
3563
|
+
let parsedSizes = { default: 'full' };
|
|
3564
|
+
for (const [index, size] of tableColumSizesOptions.entries()) {
|
|
3565
|
+
if (definitionAny.sizes === 'auto' ||
|
|
3566
|
+
definitionAny.sizes === 'hidden' ||
|
|
3567
|
+
definitionAny.sizes === 'full' ||
|
|
3568
|
+
typeof definitionAny.sizes === 'number') {
|
|
3569
|
+
parsedSizes[size] =
|
|
3570
|
+
definitionAny.sizes === 'auto' ? 'full' : definitionAny.sizes;
|
|
3571
|
+
continue;
|
|
3572
|
+
}
|
|
3573
|
+
parsedSizes[size] =
|
|
3574
|
+
definitionAny.sizes[size] ??
|
|
3575
|
+
parsedSizes[tableColumSizesOptions[index - 1]];
|
|
3576
|
+
}
|
|
3577
|
+
definition.parsedSizes = parsedSizes;
|
|
3578
|
+
return definition;
|
|
3579
|
+
}
|
|
3580
|
+
_parseRowActionsRowDefinition() {
|
|
3581
|
+
const isLast = tableColumSizesOptions.reduce((data, size) => {
|
|
3582
|
+
data[size] = true;
|
|
3583
|
+
return data;
|
|
3584
|
+
}, {});
|
|
3585
|
+
const sizes = { default: 0 };
|
|
3586
|
+
for (const size of tableColumSizesOptions) {
|
|
3587
|
+
const lastColumn = this._findLastDefinitionBySize(this.columns, size);
|
|
3588
|
+
sizes[size] = lastColumn.parsedSizes[size];
|
|
3589
|
+
}
|
|
3590
|
+
return {
|
|
3591
|
+
isLast,
|
|
3592
|
+
sizes,
|
|
3593
|
+
parsedSizes: sizes,
|
|
3594
|
+
align: 'end',
|
|
3595
|
+
type: 'td',
|
|
3596
|
+
path: null,
|
|
3597
|
+
};
|
|
3598
|
+
}
|
|
3643
3599
|
};
|
|
3644
3600
|
Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3645
|
-
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", headerLoading: "headerLoading", footerLoading: "footerLoading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", rowSelectionLimit: "rowSelectionLimit", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", enableFloatingMenu: "enableFloatingMenu", floatingMenuAmountSelectedText: "floatingMenuAmountSelectedText", floatingMenuAmountSelectedTemplate: "floatingMenuAmountSelectedTemplate", enableHeader: "enableHeader", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableAction: "enableAction", actionButtonLoading: "actionButtonLoading", actionButtonIcon: "actionButtonIcon", actionButtonEnabled: "actionButtonEnabled", actionButtonText: "actionButtonText", actionButtonTemplate: "actionButtonTemplate", enableFooter: "enableFooter", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateIllustration: "emptyStateIllustration", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", enableEmptyStateAction: "enableEmptyStateAction", emptyStateFilteredIllustration: "emptyStateFilteredIllustration", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", shadow: "shadow", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText", filterModalResetText: "filterModalResetText", filterModalShowReset: "filterModalShowReset", filterModalShowResetMobile: "filterModalShowResetMobile" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", action: "action", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export", emptyStateActionClick: "emptyStateActionClick", filterModalShow: "filterModalShow", filterModalSave: "filterModalSave", filterModalReset: "filterModalReset" }, host: { listeners: { "window:resize": "onResize($event)", "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "headerCustomFilterTemplate", first: true, predicate: TableCustomFilterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "filterModalTemplate", first: true, predicate: TableFilterModalDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "columnDefinitions", predicate: TableColumn }, { propertyName: "rowActions", predicate: TableRowAction }], usesOnChanges: true, ngImport: i0, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-col flex-1\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngFor=\"let col of columns; let index = index\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"\n\t\t\t\t\t\t\t\t\t_checkboxChange($event.target, rowIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\tvariant=\"actions\"\n\t\t\t\t\t\t\t[definition]=\"columns[columns.length - 1]\"\n\t\t\t\t\t\t\t[item]=\"parsedItems[rowIndex]\"\n\t\t\t\t\t\t\t[index]=\"columns.length - 1\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[template]=\"actionsTemplate\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #actionsTemplate>\n\t\t\t\t\t\t\t<div class=\"flex ml-auto gap-2 items-center\">\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t*ngFor=\"\n\t\t\t\t\t\t\t\t\t\tlet action of rowActionsRow$ | async\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparsedItems[rowIndex]\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[content]=\"action.label\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t\t[icon]=\"action.icon\"\n\t\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action.iconRotate\"\n\t\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"action.disabled\"\n\t\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taction.routerLink,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taction.queryParams,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t(onClick)=\"\n\t\t\t\t\t\t\t\t\t\t\t\t_rowActionClick(\n\t\t\t\t\t\t\t\t\t\t\t\t\taction,\n\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action.type === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction.disabled\n\t\t\t\t\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action.label }}\n\n\t\t\t\t<p-loader\n\t\t\t\t\t*ngIf=\"action.loading; else floatingMenuItemIconTemplate\"\n\t\t\t\t></p-loader>\n\n\t\t\t\t<ng-template #floatingMenuItemIconTemplate>\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\t[variant]=\"action.icon\"\n\t\t\t\t\t\t[rotate]=\"action.iconRotate\"\n\t\t\t\t\t\t[flip]=\"action.iconFlip\"\n\t\t\t\t\t></p-icon>\n\t\t\t\t</ng-template>\n\t\t\t</p-floating-menu-item>\n\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t(click)=\"_selectAllChange(null, false)\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t>\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div slot=\"content\" class=\"flex flex-col gap-6\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"filterModalTemplate\"\n\t\t\t></ng-container>\n\t\t</div>\n\t\t<div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"], dependencies: [{ 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "type", "underline", "variant"] }, { kind: "component", type: PDivider, selector: "p-divider", inputs: ["variant"] }, { kind: "component", type: PFloatingMenuContainer, selector: "p-floating-menu-container", inputs: ["usedInTable"] }, { kind: "component", type: PFloatingMenuItem, selector: "p-floating-menu-item", inputs: ["disabled", "hover"] }, { kind: "component", type: PIcon, selector: "p-icon", inputs: ["flip", "rotate", "size", "variant"] }, { kind: "component", type: PIllustration, selector: "p-illustration", inputs: ["variant"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }, { kind: "component", type: PModal, selector: "p-modal", inputs: ["applyBlur", "backdropClickClose", "header", "padding", "scrollLock", "show", "showClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container", inputs: ["shadow"] }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "loading", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["actionButtonTemplate", "actionIcon", "actionLoading", "actionText", "activeQuickFilterIdentifier", "canUseAction", "enableAction", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "loading", "query", "quickFilters", "selectedFiltersAmount"] }, { kind: "component", type: PTableRow, selector: "p-table-row", inputs: ["enableHover", "variant"] }, { kind: "component", type: PTooltip, selector: "p-tooltip", inputs: ["canManuallyClose", "content", "enableUserInput", "offset", "placement", "show", "strategy", "variant"] }, { kind: "component", type: TableCell, selector: "p-table-cell-ngx", inputs: ["variant", "index", "rowIndex", "definition", "item", "value", "tableHasActions", "checkbox", "template"] }, { kind: "directive", type: TableFooterDirective, selector: "p-table-footer" }, { kind: "directive", type: TableHeaderDirective, selector: "p-table-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3601
|
+
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", headerLoading: "headerLoading", footerLoading: "footerLoading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", rowSelectionLimit: "rowSelectionLimit", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", enableFloatingMenu: "enableFloatingMenu", floatingMenuAmountSelectedText: "floatingMenuAmountSelectedText", floatingMenuAmountSelectedTemplate: "floatingMenuAmountSelectedTemplate", enableHeader: "enableHeader", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableAction: "enableAction", actionButtonLoading: "actionButtonLoading", actionButtonIcon: "actionButtonIcon", actionButtonEnabled: "actionButtonEnabled", actionButtonText: "actionButtonText", actionButtonTemplate: "actionButtonTemplate", enableFooter: "enableFooter", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateIllustration: "emptyStateIllustration", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", enableEmptyStateAction: "enableEmptyStateAction", emptyStateFilteredIllustration: "emptyStateFilteredIllustration", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", shadow: "shadow", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText", filterModalResetText: "filterModalResetText", filterModalShowReset: "filterModalShowReset", filterModalShowResetMobile: "filterModalShowResetMobile" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", action: "action", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export", emptyStateActionClick: "emptyStateActionClick", filterModalShow: "filterModalShow", filterModalSave: "filterModalSave", filterModalReset: "filterModalReset" }, host: { listeners: { "window:resize": "onResize($event)", "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "headerCustomFilterTemplate", first: true, predicate: TableCustomFilterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "filterModalTemplate", first: true, predicate: TableFilterModalDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "columnDefinitions", predicate: TableColumn }, { propertyName: "rowActions", predicate: TableRowAction }], usesOnChanges: true, ngImport: i0, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-1 flex-col\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length && !(isMobile$ | async)\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"_checkboxChange($event.target, rowIndex)\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t!!(rowActionsRowDefinition$ | async) &&\n\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\tvariant=\"actions\"\n\t\t\t\t\t\t\t[definition]=\"rowActionsRowDefinition$ | async\"\n\t\t\t\t\t\t\t[item]=\"parsedItems[rowIndex]\"\n\t\t\t\t\t\t\t[index]=\"columns.length - 1\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[tableHasActions]=\"!!(rowActionsRow$ | async)?.length\"\n\t\t\t\t\t\t\t[template]=\"actionsTemplate\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #actionsTemplate>\n\t\t\t\t\t\t\t<div class=\"ml-auto flex items-center gap-2\">\n\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let action of rowActionsRow$ | async\">\n\t\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(parsedItems[rowIndex])\n\t\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[content]=\"action.label\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t\t[icon]=\"action.icon\"\n\t\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action.iconRotate\"\n\t\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"action.disabled\"\n\t\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(action.routerLink, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(action.queryParams, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t(onClick)=\"_rowActionClick(action, rowIndex)\"\n\t\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action.type === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction.disabled\n\t\t\t\t\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action.label }}\n\n\t\t\t\t<p-loader\n\t\t\t\t\t*ngIf=\"action.loading; else floatingMenuItemIconTemplate\"\n\t\t\t\t></p-loader>\n\n\t\t\t\t<ng-template #floatingMenuItemIconTemplate>\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\t[variant]=\"action.icon\"\n\t\t\t\t\t\t[rotate]=\"action.iconRotate\"\n\t\t\t\t\t\t[flip]=\"action.iconFlip\"\n\t\t\t\t\t></p-icon>\n\t\t\t\t</ng-template>\n\t\t\t</p-floating-menu-item>\n\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t(click)=\"_selectAllChange(null, false)\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t>\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div\n\t\t\tslot=\"content\"\n\t\t\tclass=\"flex flex-col gap-6\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"filterModalTemplate\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass=\"flex w-full justify-between gap-4\"\n\t\t>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"], dependencies: [{ 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "type", "underline", "variant"] }, { kind: "component", type: PDivider, selector: "p-divider", inputs: ["variant"] }, { kind: "component", type: PFloatingMenuContainer, selector: "p-floating-menu-container", inputs: ["usedInTable"] }, { kind: "component", type: PFloatingMenuItem, selector: "p-floating-menu-item", inputs: ["disabled", "hover"] }, { kind: "component", type: PIcon, selector: "p-icon", inputs: ["flip", "rotate", "size", "variant"] }, { kind: "component", type: PIllustration, selector: "p-illustration", inputs: ["variant"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }, { kind: "component", type: PModal, selector: "p-modal", inputs: ["applyBlur", "backdropClickClose", "header", "padding", "scrollLock", "show", "showClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container", inputs: ["shadow"] }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "loading", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["actionButtonTemplate", "actionIcon", "actionLoading", "actionText", "activeQuickFilterIdentifier", "canUseAction", "enableAction", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "loading", "query", "quickFilters", "selectedFiltersAmount"] }, { kind: "component", type: PTableRow, selector: "p-table-row", inputs: ["enableHover", "variant"] }, { kind: "component", type: PTooltip, selector: "p-tooltip", inputs: ["canManuallyClose", "content", "enableUserInput", "offset", "placement", "show", "strategy", "variant"] }, { kind: "component", type: TableCell, selector: "p-table-cell-ngx", inputs: ["variant", "index", "rowIndex", "definition", "item", "value", "tableHasActions", "checkbox", "template"] }, { kind: "directive", type: TableFooterDirective, selector: "p-table-footer" }, { kind: "directive", type: TableHeaderDirective, selector: "p-table-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3646
3602
|
Table = __decorate([
|
|
3647
3603
|
UntilDestroy({ checkProperties: true })
|
|
3648
3604
|
], Table);
|
|
3649
3605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, decorators: [{
|
|
3650
3606
|
type: Component,
|
|
3651
|
-
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-col flex-1\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngFor=\"let col of columns; let index = index\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"\n\t\t\t\t\t\t\t\t\t_checkboxChange($event.target, rowIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\tvariant=\"actions\"\n\t\t\t\t\t\t\t[definition]=\"columns[columns.length - 1]\"\n\t\t\t\t\t\t\t[item]=\"parsedItems[rowIndex]\"\n\t\t\t\t\t\t\t[index]=\"columns.length - 1\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[template]=\"actionsTemplate\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #actionsTemplate>\n\t\t\t\t\t\t\t<div class=\"flex ml-auto gap-2 items-center\">\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t*ngFor=\"\n\t\t\t\t\t\t\t\t\t\tlet action of rowActionsRow$ | async\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparsedItems[rowIndex]\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[content]=\"action.label\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t\t[icon]=\"action.icon\"\n\t\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action.iconRotate\"\n\t\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"action.disabled\"\n\t\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taction.routerLink,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taction.queryParams,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t(onClick)=\"\n\t\t\t\t\t\t\t\t\t\t\t\t_rowActionClick(\n\t\t\t\t\t\t\t\t\t\t\t\t\taction,\n\t\t\t\t\t\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action.type === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction.disabled\n\t\t\t\t\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action.label }}\n\n\t\t\t\t<p-loader\n\t\t\t\t\t*ngIf=\"action.loading; else floatingMenuItemIconTemplate\"\n\t\t\t\t></p-loader>\n\n\t\t\t\t<ng-template #floatingMenuItemIconTemplate>\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\t[variant]=\"action.icon\"\n\t\t\t\t\t\t[rotate]=\"action.iconRotate\"\n\t\t\t\t\t\t[flip]=\"action.iconFlip\"\n\t\t\t\t\t></p-icon>\n\t\t\t\t</ng-template>\n\t\t\t</p-floating-menu-item>\n\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t(click)=\"_selectAllChange(null, false)\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t>\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div slot=\"content\" class=\"flex flex-col gap-6\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"filterModalTemplate\"\n\t\t\t></ng-container>\n\t\t</div>\n\t\t<div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"] }]
|
|
3607
|
+
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-1 flex-col\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container *ngFor=\"let col of columns; let index = index\">\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length && !(isMobile$ | async)\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"_checkboxChange($event.target, rowIndex)\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t!!(rowActionsRowDefinition$ | async) &&\n\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\tvariant=\"actions\"\n\t\t\t\t\t\t\t[definition]=\"rowActionsRowDefinition$ | async\"\n\t\t\t\t\t\t\t[item]=\"parsedItems[rowIndex]\"\n\t\t\t\t\t\t\t[index]=\"columns.length - 1\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[tableHasActions]=\"!!(rowActionsRow$ | async)?.length\"\n\t\t\t\t\t\t\t[template]=\"actionsTemplate\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #actionsTemplate>\n\t\t\t\t\t\t\t<div class=\"ml-auto flex items-center gap-2\">\n\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let action of rowActionsRow$ | async\">\n\t\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(parsedItems[rowIndex])\n\t\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[content]=\"action.label\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t\t[icon]=\"action.icon\"\n\t\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action.iconRotate\"\n\t\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"action.disabled\"\n\t\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(action.routerLink, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(action.queryParams, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t(onClick)=\"_rowActionClick(action, rowIndex)\"\n\t\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action.type === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction.disabled\n\t\t\t\t\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action.label }}\n\n\t\t\t\t<p-loader\n\t\t\t\t\t*ngIf=\"action.loading; else floatingMenuItemIconTemplate\"\n\t\t\t\t></p-loader>\n\n\t\t\t\t<ng-template #floatingMenuItemIconTemplate>\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\t[variant]=\"action.icon\"\n\t\t\t\t\t\t[rotate]=\"action.iconRotate\"\n\t\t\t\t\t\t[flip]=\"action.iconFlip\"\n\t\t\t\t\t></p-icon>\n\t\t\t\t</ng-template>\n\t\t\t</p-floating-menu-item>\n\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t></p-divider>\n\n\t\t\t<p-floating-menu-item\n\t\t\t\t(click)=\"_selectAllChange(null, false)\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t>\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div\n\t\t\tslot=\"content\"\n\t\t\tclass=\"flex flex-col gap-6\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"filterModalTemplate\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass=\"flex w-full justify-between gap-4\"\n\t\t>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"] }]
|
|
3652
3608
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
|
|
3653
3609
|
type: Input
|
|
3654
3610
|
}], loading: [{
|
|
@@ -3945,7 +3901,7 @@ let ToastContainer = class ToastContainer {
|
|
|
3945
3901
|
constructor(r, z, _toastService) {
|
|
3946
3902
|
this.z = z;
|
|
3947
3903
|
this._toastService = _toastService;
|
|
3948
|
-
this.toasts$ = this._toastService.toasts$.pipe(map$1(
|
|
3904
|
+
this.toasts$ = this._toastService.toasts$.pipe(map$1(arr => arr.reverse()));
|
|
3949
3905
|
this.el = r.nativeElement;
|
|
3950
3906
|
}
|
|
3951
3907
|
dismiss(identifier) {
|
|
@@ -3953,7 +3909,7 @@ let ToastContainer = class ToastContainer {
|
|
|
3953
3909
|
}
|
|
3954
3910
|
};
|
|
3955
3911
|
ToastContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToastContainer, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3956
|
-
ToastContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToastContainer, selector: "p-toast-container", inputs: { placement: "placement" }, ngImport: i0, template: "<p-toast\n
|
|
3912
|
+
ToastContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToastContainer, selector: "p-toast-container", inputs: { placement: "placement" }, ngImport: i0, template: "<p-toast\n\t*ngFor=\"let toast of toasts$ | async; let index = index\"\n\t[variant]=\"toast.variant\"\n\t[header]=\"toast.header\"\n\t[content]=\"toast.content\"\n\t[identifier]=\"toast.identifier\"\n\t[delay]=\"toast.options.delay ?? 5000\"\n\t[dismissOnAction]=\"toast.options.dismissOnAction ?? true\"\n\t[enableAction]=\"toast.options.enableAction\"\n\t[actionFunc]=\"toast.options.action\"\n\t[actionData]=\"toast.options.actionData\"\n\t[actionIcon]=\"toast.options.icon?.variant\"\n\t[actionIconFlip]=\"toast.options.icon?.flip\"\n\t[actionIconRotate]=\"toast.options.icon?.rotate\"\n\t(dismiss)=\"dismiss($event)\"\n\t[@pSlideInBottomOutTop]\n></p-toast>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PToast, selector: "p-toast", inputs: ["actionIcon", "actionIconFlip", "actionIconRotate", "content", "enableAction", "header", "variant"] }, { kind: "directive", type: ToastDirective, selector: "p-toast", inputs: ["delay", "identifier", "dismissOnAction", "actionFunc", "actionData"], outputs: ["dismiss"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [SLIDE_IN_TOP_OUT_BOTTOM], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3957
3913
|
ToastContainer = __decorate([
|
|
3958
3914
|
ProxyCmp({
|
|
3959
3915
|
defineCustomElementFn: undefined,
|
|
@@ -3962,7 +3918,7 @@ ToastContainer = __decorate([
|
|
|
3962
3918
|
], ToastContainer);
|
|
3963
3919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToastContainer, decorators: [{
|
|
3964
3920
|
type: Component,
|
|
3965
|
-
args: [{ selector: 'p-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['placement'], animations: [SLIDE_IN_TOP_OUT_BOTTOM], template: "<p-toast\n
|
|
3921
|
+
args: [{ selector: 'p-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['placement'], animations: [SLIDE_IN_TOP_OUT_BOTTOM], template: "<p-toast\n\t*ngFor=\"let toast of toasts$ | async; let index = index\"\n\t[variant]=\"toast.variant\"\n\t[header]=\"toast.header\"\n\t[content]=\"toast.content\"\n\t[identifier]=\"toast.identifier\"\n\t[delay]=\"toast.options.delay ?? 5000\"\n\t[dismissOnAction]=\"toast.options.dismissOnAction ?? true\"\n\t[enableAction]=\"toast.options.enableAction\"\n\t[actionFunc]=\"toast.options.action\"\n\t[actionData]=\"toast.options.actionData\"\n\t[actionIcon]=\"toast.options.icon?.variant\"\n\t[actionIconFlip]=\"toast.options.icon?.flip\"\n\t[actionIconRotate]=\"toast.options.icon?.rotate\"\n\t(dismiss)=\"dismiss($event)\"\n\t[@pSlideInBottomOutTop]\n></p-toast>\n" }]
|
|
3966
3922
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: ToastService }]; } });
|
|
3967
3923
|
|
|
3968
3924
|
const TOAST_COMPONENTS = [ToastContainer];
|