@decaf-ts/for-angular 0.1.26 → 0.1.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7375,7 +7375,7 @@ async function getNgxInlineModal(inlineContent, props = {}, injector) {
|
|
|
7375
7375
|
* @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
|
|
7376
7376
|
* @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
|
|
7377
7377
|
*/
|
|
7378
|
-
async function getNgxSelectOptionsModal(title, options, injector) {
|
|
7378
|
+
async function getNgxSelectOptionsModal(title, options, uid, injector) {
|
|
7379
7379
|
const props = {
|
|
7380
7380
|
tag: 'ngx-decaf-list',
|
|
7381
7381
|
title,
|
|
@@ -7388,7 +7388,7 @@ async function getNgxSelectOptionsModal(title, options, injector) {
|
|
|
7388
7388
|
type: ListComponentsTypes.INFINITE,
|
|
7389
7389
|
isModalChild: true,
|
|
7390
7390
|
},
|
|
7391
|
-
className: `dcf-modal dcf-modal-select-interface`,
|
|
7391
|
+
className: `dcf-modal dcf-modal-select-interface ${uid ? `dcf-modal-${uid.toLowerCase()}` : ''}`,
|
|
7392
7392
|
};
|
|
7393
7393
|
return await getNgxModalComponent(props, {}, injector || undefined);
|
|
7394
7394
|
}
|
|
@@ -7634,7 +7634,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7634
7634
|
}
|
|
7635
7635
|
if (HTML5InputTypes.SELECT === this.type && !this.value) {
|
|
7636
7636
|
if (this.options?.length) {
|
|
7637
|
-
this.
|
|
7637
|
+
const selected = this.options.find((o) => o['selected']);
|
|
7638
|
+
this.setValue(selected ? selected.value : this.options[0].value);
|
|
7638
7639
|
this.changeDetectorRef.detectChanges();
|
|
7639
7640
|
}
|
|
7640
7641
|
}
|
|
@@ -7757,7 +7758,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
|
|
|
7757
7758
|
event.stopImmediatePropagation();
|
|
7758
7759
|
const loading = await this.loadingController.create({});
|
|
7759
7760
|
await loading.present();
|
|
7760
|
-
const modal = await getNgxSelectOptionsModal(this.label, this.options);
|
|
7761
|
+
const modal = await getNgxSelectOptionsModal(this.label, this.options, this.name);
|
|
7761
7762
|
// this.changeDetectorRef.detectChanges();
|
|
7762
7763
|
loading.remove();
|
|
7763
7764
|
const { data, role } = await modal.onWillDismiss();
|
|
@@ -11164,6 +11165,8 @@ class PaginationComponent extends NgxComponentDirective {
|
|
|
11164
11165
|
* @memberOf PaginationComponent
|
|
11165
11166
|
*/
|
|
11166
11167
|
this.clickEvent = new EventEmitter();
|
|
11168
|
+
this.bookMarkPagination = false;
|
|
11169
|
+
this.nextBookmark = '';
|
|
11167
11170
|
addIcons({ chevronBackOutline, chevronForwardOutline });
|
|
11168
11171
|
}
|
|
11169
11172
|
/**
|
|
@@ -11194,6 +11197,9 @@ class PaginationComponent extends NgxComponentDirective {
|
|
|
11194
11197
|
// this.locale = this.getLocale(this.translatable);
|
|
11195
11198
|
this.pages = this.getPages(this.totalPages, this.current);
|
|
11196
11199
|
this.last = this.totalPages;
|
|
11200
|
+
if (this.bookMarkPagination) {
|
|
11201
|
+
this.disablePages = true;
|
|
11202
|
+
}
|
|
11197
11203
|
}
|
|
11198
11204
|
/**
|
|
11199
11205
|
* @description Handles click events on pagination controls.
|
|
@@ -11334,10 +11340,21 @@ class PaginationComponent extends NgxComponentDirective {
|
|
|
11334
11340
|
* @memberOf PaginationComponent
|
|
11335
11341
|
*/
|
|
11336
11342
|
next() {
|
|
11337
|
-
|
|
11338
|
-
|
|
11339
|
-
this.
|
|
11340
|
-
|
|
11343
|
+
if (!this.bookMarkPagination) {
|
|
11344
|
+
const page = this.current + 1;
|
|
11345
|
+
if (page <= Object.keys(this.pages)?.length || 0) {
|
|
11346
|
+
this.current = page;
|
|
11347
|
+
this.handleClick('next');
|
|
11348
|
+
}
|
|
11349
|
+
}
|
|
11350
|
+
else {
|
|
11351
|
+
if (this.nextBookmark) {
|
|
11352
|
+
const page = this.current + 1;
|
|
11353
|
+
if (page <= Object.keys(this.pages)?.length || 0) {
|
|
11354
|
+
this.current = page;
|
|
11355
|
+
this.handleClick('next');
|
|
11356
|
+
}
|
|
11357
|
+
}
|
|
11341
11358
|
}
|
|
11342
11359
|
}
|
|
11343
11360
|
/**
|
|
@@ -11397,11 +11414,11 @@ class PaginationComponent extends NgxComponentDirective {
|
|
|
11397
11414
|
this.handleClick(page > this.current ? 'next' : 'previous', page);
|
|
11398
11415
|
}
|
|
11399
11416
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { table: "table", totalPages: "totalPages", current: "current", truncatePages: "truncatePages", disablePages: "disablePages" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div\n [id]=\"uid\"\n class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n #component\n>\n @if (pages?.length > 1) {\n <div class=\"dcf-width-1-1\">\n <div\n
|
|
11417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { table: "table", totalPages: "totalPages", current: "current", truncatePages: "truncatePages", disablePages: "disablePages", bookMarkPagination: "bookMarkPagination", nextBookmark: "nextBookmark" }, outputs: { clickEvent: "clickEvent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div\n [id]=\"uid\"\n class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n #component\n>\n @if (pages?.length > 1 || bookMarkPagination) {\n <div class=\"dcf-width-1-1\">\n @if (!bookMarkPagination) {\n <div\n class=\"dcf-pagination-resume\"\n [innerHTML]=\"\n locale + '.resume' | translate: { '0': current, '1': last }\n \"\n ></div>\n }\n\n <div\n #paginationComponent\n class=\"dcf-pagination dcf-flex-center\"\n [class.dcf-bookmark-pagination]=\"bookMarkPagination\"\n >\n <div\n aria-label=\"previous\"\n tabindex=\"0\"\n [class]=\"disablePages ? 'dcf-nav dcf-nav-prev' : ''\"\n (click)=\"previous()\"\n (keydown.enter)=\"previous()\"\n [class.dcf-disabled]=\"current === 1\"\n >\n <ion-icon\n name=\"chevron-back-outline\"\n aria-hidden=\"true\"\n ></ion-icon>\n\n @if (disablePages) {\n {{ locale + '.previous' | translate }}\n }\n </div>\n\n @if (!disablePages) {\n @for (page of pages; track page) {\n <div\n tabindex=\"0\"\n [class]=\"page['class']\"\n (click)=\"navigate(page['index'])\"\n (keydown.enter)=\"navigate(page['index'])\"\n [class.dcf-active]=\"current === page['index']\"\n >\n <span class=\"page-item\">{{ page['text'] }}</span>\n </div>\n }\n }\n @if (pages?.length > 1) {\n <div\n tabindex=\"0\"\n [class]=\"disablePages ? 'dcf-nav dcf-nav-next' : ''\"\n (click)=\"next()\"\n (keydown.enter)=\"next()\"\n [class.dcf-disabled]=\"\n current === last || (bookMarkPagination && !nextBookmark?.length)\n \"\n >\n @if (disablePages) {\n {{ locale + '.next' | translate }}\n }\n <ion-icon\n name=\"chevron-forward-outline\"\n aria-hidden=\"true\"\n ></ion-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination.dcf-bookmark-pagination{justify-content:flex-end;margin:1.5rem 0px}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}.dcf-nav{background:var(--dcf-color-gray-2);padding:.5rem;border-radius:var(--dcf-border-radius-small)!important}.dcf-nav .ti,.dcf-nav ion-icon{position:relative;top:2px}.dcf-nav.dcf-nav-next{padding-left:1rem!important;padding-right:.5rem!important}.dcf-nav.dcf-nav-prev{padding-right:1rem!important;padding-left:.5rem!important}.dcf-nav:hover,.dcf-nav:active{color:var(--dcf-color-primary)!important}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
11401
11418
|
}
|
|
11402
11419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
11403
11420
|
type: Component,
|
|
11404
|
-
args: [{ selector: 'ngx-decaf-pagination', imports: [TranslatePipe, IonIcon], standalone: true, host: { '[attr.id]': 'uid' }, template: "<div\n [id]=\"uid\"\n class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n #component\n>\n @if (pages?.length > 1) {\n <div class=\"dcf-width-1-1\">\n <div\n
|
|
11421
|
+
args: [{ selector: 'ngx-decaf-pagination', imports: [TranslatePipe, IonIcon], standalone: true, host: { '[attr.id]': 'uid' }, template: "<div\n [id]=\"uid\"\n class=\"dcf-paginator-container dcf-flex dcf-flex-center\"\n #component\n>\n @if (pages?.length > 1 || bookMarkPagination) {\n <div class=\"dcf-width-1-1\">\n @if (!bookMarkPagination) {\n <div\n class=\"dcf-pagination-resume\"\n [innerHTML]=\"\n locale + '.resume' | translate: { '0': current, '1': last }\n \"\n ></div>\n }\n\n <div\n #paginationComponent\n class=\"dcf-pagination dcf-flex-center\"\n [class.dcf-bookmark-pagination]=\"bookMarkPagination\"\n >\n <div\n aria-label=\"previous\"\n tabindex=\"0\"\n [class]=\"disablePages ? 'dcf-nav dcf-nav-prev' : ''\"\n (click)=\"previous()\"\n (keydown.enter)=\"previous()\"\n [class.dcf-disabled]=\"current === 1\"\n >\n <ion-icon\n name=\"chevron-back-outline\"\n aria-hidden=\"true\"\n ></ion-icon>\n\n @if (disablePages) {\n {{ locale + '.previous' | translate }}\n }\n </div>\n\n @if (!disablePages) {\n @for (page of pages; track page) {\n <div\n tabindex=\"0\"\n [class]=\"page['class']\"\n (click)=\"navigate(page['index'])\"\n (keydown.enter)=\"navigate(page['index'])\"\n [class.dcf-active]=\"current === page['index']\"\n >\n <span class=\"page-item\">{{ page['text'] }}</span>\n </div>\n }\n }\n @if (pages?.length > 1) {\n <div\n tabindex=\"0\"\n [class]=\"disablePages ? 'dcf-nav dcf-nav-next' : ''\"\n (click)=\"next()\"\n (keydown.enter)=\"next()\"\n [class.dcf-disabled]=\"\n current === last || (bookMarkPagination && !nextBookmark?.length)\n \"\n >\n @if (disablePages) {\n {{ locale + '.next' | translate }}\n }\n <ion-icon\n name=\"chevron-forward-outline\"\n aria-hidden=\"true\"\n ></ion-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".dcf-palette-dark .dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-dark)!important}.dcf-palette-dark .dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination.dcf-bookmark-pagination{justify-content:flex-end;margin:1.5rem 0px}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}.dcf-pagination-resume{margin:1rem 0px;text-align:center}.dcf-nav{background:var(--dcf-color-gray-2);padding:.5rem;border-radius:var(--dcf-border-radius-small)!important}.dcf-nav .ti,.dcf-nav ion-icon{position:relative;top:2px}.dcf-nav.dcf-nav-next{padding-left:1rem!important;padding-right:.5rem!important}.dcf-nav.dcf-nav-prev{padding-right:1rem!important;padding-left:.5rem!important}.dcf-nav:hover,.dcf-nav:active{color:var(--dcf-color-primary)!important}\n"] }]
|
|
11405
11422
|
}], ctorParameters: () => [], propDecorators: { table: [{
|
|
11406
11423
|
type: Input
|
|
11407
11424
|
}], totalPages: [{
|
|
@@ -11415,6 +11432,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
11415
11432
|
type: Input
|
|
11416
11433
|
}], clickEvent: [{
|
|
11417
11434
|
type: Output
|
|
11435
|
+
}], bookMarkPagination: [{
|
|
11436
|
+
type: Input
|
|
11437
|
+
}], nextBookmark: [{
|
|
11438
|
+
type: Input
|
|
11418
11439
|
}] } });
|
|
11419
11440
|
|
|
11420
11441
|
/**
|
|
@@ -11730,6 +11751,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
11730
11751
|
* @memberOf ListComponent
|
|
11731
11752
|
*/
|
|
11732
11753
|
this.lastPage = 1;
|
|
11754
|
+
this.bookMarkPagination = false;
|
|
11733
11755
|
/**
|
|
11734
11756
|
* @description Event emitter for item click interactions.
|
|
11735
11757
|
* @summary Emits an event when a list item is clicked. The event includes the data
|
|
@@ -12335,7 +12357,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12335
12357
|
if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
|
|
12336
12358
|
try {
|
|
12337
12359
|
if (!this.searchValue?.length && !this.searchValue) {
|
|
12338
|
-
this.
|
|
12360
|
+
if (this.type !== ListComponentsTypes.INFINITE) {
|
|
12361
|
+
this.data = [];
|
|
12362
|
+
}
|
|
12339
12363
|
// const rawQuery = this.parseQuery(self.model as Repository<Model>, start, limit);
|
|
12340
12364
|
// request = this.parseResult(await (this.model as any)?.paginate(start, limit));
|
|
12341
12365
|
if (!this.paginator) {
|
|
@@ -12345,8 +12369,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12345
12369
|
}
|
|
12346
12370
|
else {
|
|
12347
12371
|
this.changeDetectorRef.detectChanges();
|
|
12348
|
-
request = await this.parseResult(typeof this.searchValue ===
|
|
12349
|
-
? await repo.find(this.searchValue, this.sortDirection)
|
|
12372
|
+
request = await this.parseResult(typeof this.searchValue === Primitives.STRING
|
|
12373
|
+
? await repo.find(String(this.searchValue), this.sortDirection)
|
|
12350
12374
|
: await repo
|
|
12351
12375
|
.select()
|
|
12352
12376
|
.where(this.parseConditions(this.searchValue))
|
|
@@ -12504,18 +12528,23 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12504
12528
|
*/
|
|
12505
12529
|
getMoreData(length) {
|
|
12506
12530
|
if (this.type === ListComponentsTypes.INFINITE) {
|
|
12507
|
-
if (
|
|
12508
|
-
|
|
12509
|
-
}
|
|
12510
|
-
if (length >= this.limit) {
|
|
12511
|
-
this.loadMoreData = false;
|
|
12531
|
+
if (length === undefined) {
|
|
12532
|
+
this.loadMoreData = `${this.paginator?.['_bookmark']}`?.length ? true : false;
|
|
12512
12533
|
}
|
|
12513
12534
|
else {
|
|
12514
|
-
|
|
12515
|
-
|
|
12516
|
-
|
|
12517
|
-
if (this.
|
|
12535
|
+
if (this.paginator) {
|
|
12536
|
+
length = this.paginator['_recordCount'] || length * this.limit;
|
|
12537
|
+
}
|
|
12538
|
+
if (length >= this.limit) {
|
|
12518
12539
|
this.loadMoreData = false;
|
|
12540
|
+
}
|
|
12541
|
+
else {
|
|
12542
|
+
this.pages = Math.floor(length / this.limit);
|
|
12543
|
+
if (this.pages * this.limit < length)
|
|
12544
|
+
this.pages += 1;
|
|
12545
|
+
if (this.pages === 1)
|
|
12546
|
+
this.loadMoreData = false;
|
|
12547
|
+
}
|
|
12519
12548
|
}
|
|
12520
12549
|
}
|
|
12521
12550
|
else {
|
|
@@ -12527,8 +12556,13 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12527
12556
|
}
|
|
12528
12557
|
else {
|
|
12529
12558
|
this.pages = this.paginator?.total || this.paginator['_totalPages'];
|
|
12530
|
-
if (this.pages ===
|
|
12531
|
-
this.
|
|
12559
|
+
if (this.pages === undefined) {
|
|
12560
|
+
this.bookMarkPagination = this.paginator?.['_bookmark'] !== undefined ? true : false;
|
|
12561
|
+
}
|
|
12562
|
+
else {
|
|
12563
|
+
if (this.pages === 1) {
|
|
12564
|
+
this.loadMoreData = false;
|
|
12565
|
+
}
|
|
12532
12566
|
}
|
|
12533
12567
|
}
|
|
12534
12568
|
}
|
|
@@ -12558,7 +12592,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12558
12592
|
value = item?.[value] ? item[value] : '';
|
|
12559
12593
|
// value = item?.[value] ? item[value] : value !== key ? value : "";
|
|
12560
12594
|
if (isValidDate(value))
|
|
12561
|
-
value = `${formatDate(value)}`;
|
|
12595
|
+
value = `${formatDate(dateFromString(value))}`;
|
|
12562
12596
|
accum[key] = value;
|
|
12563
12597
|
}
|
|
12564
12598
|
else {
|
|
@@ -12566,7 +12600,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12566
12600
|
for (const _value of arrayValue)
|
|
12567
12601
|
val = !val ? item[_value] : (typeof val === Primitives.STRING ? JSON.parse(val) : val)[_value];
|
|
12568
12602
|
if (isValidDate(new Date(val)))
|
|
12569
|
-
val = `${formatDate(val)}`;
|
|
12603
|
+
val = `${formatDate(dateFromString(val))}`;
|
|
12570
12604
|
accum[key] = val === null || val === undefined ? value : val;
|
|
12571
12605
|
}
|
|
12572
12606
|
}
|
|
@@ -12620,7 +12654,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
|
|
|
12620
12654
|
.join(', ');
|
|
12621
12655
|
}
|
|
12622
12656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", disablePaginationPages: "disablePaginationPages", truncatePaginationPages: "truncatePaginationPages", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n <ion-refresher\n slot=\"fixed\"\n [pullFactor]=\"1\"\n [pullMin]=\"100\"\n [pullMax]=\"200\"\n (ionRefresh)=\"handleRefresh($event)\"\n >\n <ion-refresher-content />\n </ion-refresher>\n}\n\n@if (showSearchbar) {\n <div [hidden]=\"!data?.length && !searching\">\n <div\n [class]=\"\n 'dcf-grid dcf-grid-actions ' + enableFilter\n ? 'dcf-grid-small'\n : 'dcf-grid-collapse'\n \"\n >\n <div class=\"dcf-width-expand@m dcf-width-1-1\">\n @if (model && enableFilter) {\n @if (data?.length || searching) {\n <ngx-decaf-filter\n [model]=\"model\"\n [multiple]=\"multipleFilter\"\n [indexes]=\"indexes ?? []\"\n [sortDirection]=\"sortDirection\"\n [disableSort]=\"disableSort\"\n (filterEvent)=\"handleFilter($event)\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n } @else {\n <ngx-decaf-searchbar\n [placeholder]=\"searchbarPlaceholder\"\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n </div>\n @if (createButton) {\n <div\n class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n >\n <div>\n <ion-button\n expand=\"block\"\n (click)=\"changeOperation(OperationKeys.CREATE)\"\n >\n Create\n </ion-button>\n </div>\n </div>\n }\n </div>\n </div>\n}\n\n@if (initialized && data?.length) {\n <div\n class=\"dcf-list-component\"\n #component\n >\n <ion-list\n [id]=\"uid\"\n [inset]=\"inset\"\n [lines]=\"lines\"\n >\n @if (item?.tag) {\n @for (child of items; track trackItemFn($index, child)) {\n <ngx-decaf-component-renderer\n [tag]=\"item.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]=\"{\n item: child,\n mapper: mapper,\n route: isModalChild ? route : undefined,\n model: child,\n isModalChild: child.isModalChild,\n emitEvent: child.emitEvent,\n }\"\n ></ngx-decaf-component-renderer>\n }\n } @else {\n <ng-content></ng-content>\n }\n </ion-list>\n </div>\n
|
|
12657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", multipleFilter: "multipleFilter", disableSort: "disableSort", disablePaginationPages: "disablePaginationPages", truncatePaginationPages: "truncatePaginationPages", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n <ion-refresher\n slot=\"fixed\"\n [pullFactor]=\"1\"\n [pullMin]=\"100\"\n [pullMax]=\"200\"\n (ionRefresh)=\"handleRefresh($event)\"\n >\n <ion-refresher-content />\n </ion-refresher>\n}\n\n@if (showSearchbar) {\n <div [hidden]=\"!data?.length && !searching\">\n <div\n [class]=\"\n 'dcf-grid dcf-grid-actions ' + enableFilter\n ? 'dcf-grid-small'\n : 'dcf-grid-collapse'\n \"\n >\n <div class=\"dcf-width-expand@m dcf-width-1-1\">\n @if (model && enableFilter) {\n @if (data?.length || searching) {\n <ngx-decaf-filter\n [model]=\"model\"\n [multiple]=\"multipleFilter\"\n [indexes]=\"indexes ?? []\"\n [sortDirection]=\"sortDirection\"\n [disableSort]=\"disableSort\"\n (filterEvent)=\"handleFilter($event)\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n } @else {\n <ngx-decaf-searchbar\n [placeholder]=\"searchbarPlaceholder\"\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n </div>\n @if (createButton) {\n <div\n class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n >\n <div>\n <ion-button\n expand=\"block\"\n (click)=\"changeOperation(OperationKeys.CREATE)\"\n >\n Create\n </ion-button>\n </div>\n </div>\n }\n </div>\n </div>\n}\n\n@if (initialized && data?.length) {\n <div\n class=\"dcf-list-component\"\n #component\n >\n <ion-list\n [id]=\"uid\"\n [inset]=\"inset\"\n [lines]=\"lines\"\n >\n @if (item?.tag) {\n @for (child of items; track trackItemFn($index, child)) {\n <ngx-decaf-component-renderer\n [tag]=\"item.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]=\"{\n item: child,\n mapper: mapper,\n route: isModalChild ? route : undefined,\n model: child,\n isModalChild: child.isModalChild,\n emitEvent: child.emitEvent,\n }\"\n ></ngx-decaf-component-renderer>\n }\n } @else {\n <ng-content></ng-content>\n }\n </ion-list>\n </div>\n @if (loadMoreData) {\n @if (\n (pages > 0 || bookMarkPagination) &&\n type === 'paginated' &&\n !searchValue?.length\n ) {\n <ngx-decaf-pagination\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [totalPages]=\"pages\"\n [bookMarkPagination]=\"bookMarkPagination\"\n [nextBookmark]=\"paginator?._bookmark\"\n [table]=\"component\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n } @else {\n <ion-infinite-scroll\n [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n [position]=\"scrollPosition\"\n [threshold]=\"scrollThreshold\"\n (ionInfinite)=\"handleRefresh($event)\"\n >\n <ion-infinite-scroll-content\n [loadingSpinner]=\"loadingSpinner\"\n [loadingText]=\"loadingText\"\n />\n </ion-infinite-scroll>\n }\n }\n} @else {\n @if (refreshing) {\n @for (skl of skeletonData; track $index) {\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text\n class=\"date\"\n style=\"width: 20%\"\n >\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-text>\n </ion-label>\n </ion-item>\n }\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n [subtitle]=\"\n empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\n \"\n />\n } @else {\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"locale + '.search.title' | translate\"\n [subtitle]=\"\n locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["table", "totalPages", "current", "truncatePages", "disablePages", "bookMarkPagination", "nextBookmark"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
12624
12658
|
};
|
|
12625
12659
|
ListComponent = __decorate([
|
|
12626
12660
|
Dynamic(),
|
|
@@ -12648,7 +12682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
12648
12682
|
EmptyStateComponent,
|
|
12649
12683
|
FilterComponent,
|
|
12650
12684
|
ComponentRendererComponent,
|
|
12651
|
-
], host: { '[attr.id]': 'uid' }, template: "@if (showRefresher) {\n <ion-refresher\n slot=\"fixed\"\n [pullFactor]=\"1\"\n [pullMin]=\"100\"\n [pullMax]=\"200\"\n (ionRefresh)=\"handleRefresh($event)\"\n >\n <ion-refresher-content />\n </ion-refresher>\n}\n\n@if (showSearchbar) {\n <div [hidden]=\"!data?.length && !searching\">\n <div\n [class]=\"\n 'dcf-grid dcf-grid-actions ' + enableFilter\n ? 'dcf-grid-small'\n : 'dcf-grid-collapse'\n \"\n >\n <div class=\"dcf-width-expand@m dcf-width-1-1\">\n @if (model && enableFilter) {\n @if (data?.length || searching) {\n <ngx-decaf-filter\n [model]=\"model\"\n [multiple]=\"multipleFilter\"\n [indexes]=\"indexes ?? []\"\n [sortDirection]=\"sortDirection\"\n [disableSort]=\"disableSort\"\n (filterEvent)=\"handleFilter($event)\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n } @else {\n <ngx-decaf-searchbar\n [placeholder]=\"searchbarPlaceholder\"\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n </div>\n @if (createButton) {\n <div\n class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n >\n <div>\n <ion-button\n expand=\"block\"\n (click)=\"changeOperation(OperationKeys.CREATE)\"\n >\n Create\n </ion-button>\n </div>\n </div>\n }\n </div>\n </div>\n}\n\n@if (initialized && data?.length) {\n <div\n class=\"dcf-list-component\"\n #component\n >\n <ion-list\n [id]=\"uid\"\n [inset]=\"inset\"\n [lines]=\"lines\"\n >\n @if (item?.tag) {\n @for (child of items; track trackItemFn($index, child)) {\n <ngx-decaf-component-renderer\n [tag]=\"item.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]=\"{\n item: child,\n mapper: mapper,\n route: isModalChild ? route : undefined,\n model: child,\n isModalChild: child.isModalChild,\n emitEvent: child.emitEvent,\n }\"\n ></ngx-decaf-component-renderer>\n }\n } @else {\n <ng-content></ng-content>\n }\n </ion-list>\n </div>\n
|
|
12685
|
+
], host: { '[attr.id]': 'uid' }, template: "@if (showRefresher) {\n <ion-refresher\n slot=\"fixed\"\n [pullFactor]=\"1\"\n [pullMin]=\"100\"\n [pullMax]=\"200\"\n (ionRefresh)=\"handleRefresh($event)\"\n >\n <ion-refresher-content />\n </ion-refresher>\n}\n\n@if (showSearchbar) {\n <div [hidden]=\"!data?.length && !searching\">\n <div\n [class]=\"\n 'dcf-grid dcf-grid-actions ' + enableFilter\n ? 'dcf-grid-small'\n : 'dcf-grid-collapse'\n \"\n >\n <div class=\"dcf-width-expand@m dcf-width-1-1\">\n @if (model && enableFilter) {\n @if (data?.length || searching) {\n <ngx-decaf-filter\n [model]=\"model\"\n [multiple]=\"multipleFilter\"\n [indexes]=\"indexes ?? []\"\n [sortDirection]=\"sortDirection\"\n [disableSort]=\"disableSort\"\n (filterEvent)=\"handleFilter($event)\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n } @else {\n <ngx-decaf-searchbar\n [placeholder]=\"searchbarPlaceholder\"\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n }\n </div>\n @if (createButton) {\n <div\n class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\"\n >\n <div>\n <ion-button\n expand=\"block\"\n (click)=\"changeOperation(OperationKeys.CREATE)\"\n >\n Create\n </ion-button>\n </div>\n </div>\n }\n </div>\n </div>\n}\n\n@if (initialized && data?.length) {\n <div\n class=\"dcf-list-component\"\n #component\n >\n <ion-list\n [id]=\"uid\"\n [inset]=\"inset\"\n [lines]=\"lines\"\n >\n @if (item?.tag) {\n @for (child of items; track trackItemFn($index, child)) {\n <ngx-decaf-component-renderer\n [tag]=\"item.tag\"\n (listenEvent)=\"handleEvent($event)\"\n [globals]=\"{\n item: child,\n mapper: mapper,\n route: isModalChild ? route : undefined,\n model: child,\n isModalChild: child.isModalChild,\n emitEvent: child.emitEvent,\n }\"\n ></ngx-decaf-component-renderer>\n }\n } @else {\n <ng-content></ng-content>\n }\n </ion-list>\n </div>\n @if (loadMoreData) {\n @if (\n (pages > 0 || bookMarkPagination) &&\n type === 'paginated' &&\n !searchValue?.length\n ) {\n <ngx-decaf-pagination\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [totalPages]=\"pages\"\n [bookMarkPagination]=\"bookMarkPagination\"\n [nextBookmark]=\"paginator?._bookmark\"\n [table]=\"component\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n } @else {\n <ion-infinite-scroll\n [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n [position]=\"scrollPosition\"\n [threshold]=\"scrollThreshold\"\n (ionInfinite)=\"handleRefresh($event)\"\n >\n <ion-infinite-scroll-content\n [loadingSpinner]=\"loadingSpinner\"\n [loadingText]=\"loadingText\"\n />\n </ion-infinite-scroll>\n }\n }\n} @else {\n @if (refreshing) {\n @for (skl of skeletonData; track $index) {\n <ion-item>\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n <ion-text\n class=\"date\"\n style=\"width: 20%\"\n >\n <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n </ion-text>\n </ion-label>\n </ion-item>\n }\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n [subtitle]=\"\n empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\n \"\n />\n } @else {\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"locale + '.search.title' | translate\"\n [subtitle]=\"\n locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n}\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
|
|
12652
12686
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
12653
12687
|
type: Input
|
|
12654
12688
|
}], showSearchbar: [{
|
|
@@ -14931,7 +14965,7 @@ let TableComponent = class TableComponent extends ListComponent {
|
|
|
14931
14965
|
event.preventDefault();
|
|
14932
14966
|
event.stopImmediatePropagation();
|
|
14933
14967
|
const title = await this.translate(`${this.locale}.filter_by`);
|
|
14934
|
-
const modal = await getNgxSelectOptionsModal(title, this.filterOptions, this.injector);
|
|
14968
|
+
const modal = await getNgxSelectOptionsModal(title, this.filterOptions, this.filterBy || 'tableComponentFilter', this.injector);
|
|
14935
14969
|
this.changeDetectorRef.detectChanges();
|
|
14936
14970
|
const { data, role } = await modal.onWillDismiss();
|
|
14937
14971
|
if (role === ActionRoles.confirm && data !== this.filterValue) {
|
|
@@ -14963,7 +14997,7 @@ let TableComponent = class TableComponent extends ListComponent {
|
|
|
14963
14997
|
}
|
|
14964
14998
|
}
|
|
14965
14999
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
14966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { maxContentLength: "maxContentLength", preserve: "preserve", filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if (filterOptions?.length) {\n <div\n class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n >\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? ''\"\n [labelPlacement]=\"'floating'\"\n [label]=\"locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\"locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">\n {{ locale + '.filter.all' | translate }}\n </ion-select-option>\n @for (option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">\n {{ option.text }}\n </ion-select-option>\n }\n <ion-button\n fill=\"clear\"\n (click)=\"handleFilterSelectClear($event)\"\n slot=\"end\"\n size=\"small\"\n [disabled]=\"!filterValue\"\n >\n <ngx-decaf-icon\n fill=\"clear\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n<div\n class=\"dcf-table-container\"\n [class.dcf-empty]=\"!data?.length\"\n #component\n>\n @if (initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for (header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track trackItemFn($index, item)) {\n <tr>\n @for (col of item | keyvalue; track $index) {\n @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n <td\n (click)=\"\n handleAction(\n $event,\n col?.value.handler ? col.value.handler.handle : undefined,\n item.uid.value,\n OperationKeys.READ\n )\n \"\n [innerHTML]=\"col.value.value\"\n [ngx-decaf-tooltip]=\"\n maxContentLength > 0 && !preserve.includes(col.value.prop)\n ? {\n text: col.value.value,\n truncate: true,\n limit: maxContentLength,\n }\n : {}\n \"\n ></td>\n } @else {\n @if (allowOperations && col.key !== 'handler') {\n <td class=\"dcf-col-actions\">\n <div class=\"\">\n @if (operations?.includes(OperationKeys.UPDATE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.UPDATE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-edit\"\n />\n }\n @if (operations?.includes(OperationKeys.DELETE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.DELETE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\n }\n </div>\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"'component.list.empty.title' | translate\"\n [subtitle]=\"'component.list.empty.subtitle' | translate\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [refreshing]=\"refreshing\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n />\n } @else {\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"'component.list.search.title' | translate\"\n [subtitle]=\"\n 'component.list.search.subtitle'\n | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n\n<div class=\"dcf-table-pagination\">\n @if (pages > 0 && !searchValue) {\n <ngx-decaf-pagination\n [table]=\"component\"\n [totalPages]=\"pages\"\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["table", "totalPages", "current", "truncatePages", "disablePages"], outputs: ["clickEvent"] }, { kind: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
15000
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { maxContentLength: "maxContentLength", preserve: "preserve", filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if (filterOptions?.length) {\n <div\n class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n >\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? ''\"\n [labelPlacement]=\"'floating'\"\n [label]=\"locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\"locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">\n {{ locale + '.filter.all' | translate }}\n </ion-select-option>\n @for (option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">\n {{ option.text }}\n </ion-select-option>\n }\n <ion-button\n fill=\"clear\"\n (click)=\"handleFilterSelectClear($event)\"\n slot=\"end\"\n size=\"small\"\n [disabled]=\"!filterValue\"\n >\n <ngx-decaf-icon\n fill=\"clear\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n<div\n class=\"dcf-table-container\"\n [class.dcf-empty]=\"!data?.length\"\n #component\n>\n @if (initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for (header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track trackItemFn($index, item)) {\n <tr>\n @for (col of item | keyvalue; track $index) {\n @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n <td\n (click)=\"\n handleAction(\n $event,\n col?.value.handler ? col.value.handler.handle : undefined,\n item.uid.value,\n OperationKeys.READ\n )\n \"\n [innerHTML]=\"col.value.value\"\n [ngx-decaf-tooltip]=\"\n maxContentLength > 0 && !preserve.includes(col.value.prop)\n ? {\n text: col.value.value,\n truncate: true,\n limit: maxContentLength,\n }\n : {}\n \"\n ></td>\n } @else {\n @if (allowOperations && col.key !== 'handler') {\n <td class=\"dcf-col-actions\">\n <div class=\"\">\n @if (operations?.includes(OperationKeys.UPDATE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.UPDATE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-edit\"\n />\n }\n @if (operations?.includes(OperationKeys.DELETE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.DELETE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\n }\n </div>\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"'component.list.empty.title' | translate\"\n [subtitle]=\"'component.list.empty.subtitle' | translate\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [refreshing]=\"refreshing\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n />\n } @else {\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"'component.list.search.title' | translate\"\n [subtitle]=\"\n 'component.list.search.subtitle'\n | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n\n<div class=\"dcf-table-pagination\">\n @if ((pages > 0 || bookMarkPagination) && !searchValue) {\n <ngx-decaf-pagination\n [table]=\"component\"\n [bookMarkPagination]=\"bookMarkPagination\"\n [nextBookmark]=\"paginator?._bookmark\"\n [totalPages]=\"pages\"\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["table", "totalPages", "current", "truncatePages", "disablePages", "bookMarkPagination", "nextBookmark"], outputs: ["clickEvent"] }, { kind: "directive", type: DecafTooltipDirective, selector: "[ngx-decaf-tooltip]", inputs: ["ngx-decaf-tooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
14967
15001
|
};
|
|
14968
15002
|
TableComponent = __decorate([
|
|
14969
15003
|
Dynamic()
|
|
@@ -14980,7 +15014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
14980
15014
|
IconComponent,
|
|
14981
15015
|
PaginationComponent,
|
|
14982
15016
|
DecafTooltipDirective,
|
|
14983
|
-
], template: "@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if (filterOptions?.length) {\n <div\n class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n >\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? ''\"\n [labelPlacement]=\"'floating'\"\n [label]=\"locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\"locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">\n {{ locale + '.filter.all' | translate }}\n </ion-select-option>\n @for (option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">\n {{ option.text }}\n </ion-select-option>\n }\n <ion-button\n fill=\"clear\"\n (click)=\"handleFilterSelectClear($event)\"\n slot=\"end\"\n size=\"small\"\n [disabled]=\"!filterValue\"\n >\n <ngx-decaf-icon\n fill=\"clear\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n<div\n class=\"dcf-table-container\"\n [class.dcf-empty]=\"!data?.length\"\n #component\n>\n @if (initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for (header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track trackItemFn($index, item)) {\n <tr>\n @for (col of item | keyvalue; track $index) {\n @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n <td\n (click)=\"\n handleAction(\n $event,\n col?.value.handler ? col.value.handler.handle : undefined,\n item.uid.value,\n OperationKeys.READ\n )\n \"\n [innerHTML]=\"col.value.value\"\n [ngx-decaf-tooltip]=\"\n maxContentLength > 0 && !preserve.includes(col.value.prop)\n ? {\n text: col.value.value,\n truncate: true,\n limit: maxContentLength,\n }\n : {}\n \"\n ></td>\n } @else {\n @if (allowOperations && col.key !== 'handler') {\n <td class=\"dcf-col-actions\">\n <div class=\"\">\n @if (operations?.includes(OperationKeys.UPDATE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.UPDATE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-edit\"\n />\n }\n @if (operations?.includes(OperationKeys.DELETE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.DELETE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\n }\n </div>\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"'component.list.empty.title' | translate\"\n [subtitle]=\"'component.list.empty.subtitle' | translate\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [refreshing]=\"refreshing\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n />\n } @else {\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"'component.list.search.title' | translate\"\n [subtitle]=\"\n 'component.list.search.subtitle'\n | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n\n<div class=\"dcf-table-pagination\">\n @if (pages > 0 && !searchValue) {\n <ngx-decaf-pagination\n [table]=\"component\"\n [totalPages]=\"pages\"\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
|
|
15017
|
+
], template: "@if (showSearchbar && (data?.length || searching)) {\n <div class=\"dcf-grid-actions\">\n <div class=\"dcf-grid dcf-grid-small\">\n <div class=\"dcf-width-expand@s\">\n <ngx-decaf-searchbar\n [emitEventToWindow]=\"false\"\n [debounce]=\"500\"\n (searchEvent)=\"handleSearch($event)\"\n />\n </div>\n @if (filterOptions?.length) {\n <div\n class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n >\n <ion-select\n [id]=\"name\"\n toggleIcon=\"chevron-down-outline\"\n expandedIcon=\"chevron-up-outline\"\n [mode]=\"'md'\"\n fill=\"outline\"\n [value]=\"filterValue ?? ''\"\n [labelPlacement]=\"'floating'\"\n [label]=\"locale + '.filter.label' | translate\"\n (click)=\"openFilterSelectOptions($event)\"\n [placeholder]=\"locale + '.filter.label' | translate\"\n interface=\"popover\"\n >\n <ion-select-option value=\"\">\n {{ locale + '.filter.all' | translate }}\n </ion-select-option>\n @for (option of filterOptions; track $index) {\n <ion-select-option value=\"{{ option.value }}\">\n {{ option.text }}\n </ion-select-option>\n }\n <ion-button\n fill=\"clear\"\n (click)=\"handleFilterSelectClear($event)\"\n slot=\"end\"\n size=\"small\"\n [disabled]=\"!filterValue\"\n >\n <ngx-decaf-icon\n fill=\"clear\"\n slot=\"icon-only\"\n [name]=\"'ti-input-x'\"\n />\n </ion-button>\n </ion-select>\n </div>\n }\n </div>\n </div>\n}\n<div\n class=\"dcf-table-container\"\n [class.dcf-empty]=\"!data?.length\"\n #component\n>\n @if (initialized && data?.length) {\n <table class=\"dcf-table\">\n <thead>\n <tr>\n @for (header of headers; track $index) {\n <th>{{ locale + '.' + header + '.label' | translate }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track trackItemFn($index, item)) {\n <tr>\n @for (col of item | keyvalue; track $index) {\n @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n <td\n (click)=\"\n handleAction(\n $event,\n col?.value.handler ? col.value.handler.handle : undefined,\n item.uid.value,\n OperationKeys.READ\n )\n \"\n [innerHTML]=\"col.value.value\"\n [ngx-decaf-tooltip]=\"\n maxContentLength > 0 && !preserve.includes(col.value.prop)\n ? {\n text: col.value.value,\n truncate: true,\n limit: maxContentLength,\n }\n : {}\n \"\n ></td>\n } @else {\n @if (allowOperations && col.key !== 'handler') {\n <td class=\"dcf-col-actions\">\n <div class=\"\">\n @if (operations?.includes(OperationKeys.UPDATE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.UPDATE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"primary\"\n name=\"ti-edit\"\n />\n }\n @if (operations?.includes(OperationKeys.DELETE)) {\n <ngx-decaf-icon\n [button]=\"true\"\n (click)=\"\n handleRedirect(\n $event,\n item.uid.value,\n OperationKeys.DELETE,\n true\n )\n \"\n fill=\"clear\"\n slot=\"icon-only\"\n color=\"danger\"\n name=\"ti-trash\"\n />\n }\n </div>\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n } @else {\n @if (!searching) {\n <ngx-decaf-empty-state\n [title]=\"'component.list.empty.title' | translate\"\n [subtitle]=\"'component.list.empty.subtitle' | translate\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [refreshing]=\"refreshing\"\n [modelId]=\"modelId\"\n [buttonLink]=\"empty?.link ?? undefined\"\n [borders]=\"borders\"\n [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n className=\"dcf-empty-data\"\n />\n } @else {\n <ngx-decaf-empty-state\n icon=\"search-outline\"\n [model]=\"empty?.showButton ? model : undefined\"\n [route]=\"route\"\n [modelId]=\"modelId\"\n [borders]=\"borders\"\n [operations]=\"operations\"\n [body]=\"'small'\"\n [translatable]=\"true\"\n [title]=\"'component.list.search.title' | translate\"\n [subtitle]=\"\n 'component.list.search.subtitle'\n | translate: { '0': parseSearchValue() }\n \"\n [searchValue]=\"searchValue\"\n />\n }\n }\n</div>\n\n<div class=\"dcf-table-pagination\">\n @if ((pages > 0 || bookMarkPagination) && !searchValue) {\n <ngx-decaf-pagination\n [table]=\"component\"\n [bookMarkPagination]=\"bookMarkPagination\"\n [nextBookmark]=\"paginator?._bookmark\"\n [totalPages]=\"pages\"\n [disablePages]=\"disablePaginationPages\"\n [truncatePages]=\"truncatePaginationPages\"\n [current]=\"page\"\n (clickEvent)=\"handlePaginate($event)\"\n />\n }\n</div>\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
|
|
14984
15018
|
}], propDecorators: { maxContentLength: [{
|
|
14985
15019
|
type: Input
|
|
14986
15020
|
}], preserve: [{
|