@indice/ng-components 0.2.160 → 0.2.161
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/controls/list-view/list-view.component.mjs +57 -48
- package/esm2020/lib/types.mjs +7 -1
- package/fesm2015/indice-ng-components.mjs +62 -47
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +62 -47
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/controls/list-view/list-view.component.d.ts +17 -16
- package/lib/types.d.ts +5 -0
- package/package.json +1 -1
|
@@ -367,6 +367,12 @@ class MenuOption {
|
|
|
367
367
|
this.icon = icon;
|
|
368
368
|
}
|
|
369
369
|
}
|
|
370
|
+
var PagerPosition;
|
|
371
|
+
(function (PagerPosition) {
|
|
372
|
+
PagerPosition["Top"] = "top";
|
|
373
|
+
PagerPosition["Bottom"] = "bottom";
|
|
374
|
+
PagerPosition["Both"] = "both";
|
|
375
|
+
})(PagerPosition || (PagerPosition = {}));
|
|
370
376
|
var ShellLayoutType;
|
|
371
377
|
(function (ShellLayoutType) {
|
|
372
378
|
ShellLayoutType["Stacked"] = "Stacked";
|
|
@@ -643,51 +649,56 @@ class ListViewComponent {
|
|
|
643
649
|
constructor() {
|
|
644
650
|
// BUSY STATE
|
|
645
651
|
this.busy = false;
|
|
646
|
-
this.expandIcon = Icons.Expand;
|
|
647
|
-
this.collapseIcon = Icons.Collapse;
|
|
648
|
-
// tslint:disable-next-line:no-input-rename
|
|
649
|
-
this.showPager = true;
|
|
650
652
|
// PAGING - pass through for pager component
|
|
651
653
|
this.count = null;
|
|
652
654
|
this.page = 1;
|
|
655
|
+
this.view = ListViewType.Table;
|
|
656
|
+
this.sort = null;
|
|
653
657
|
// tslint:disable-next-line:no-input-rename
|
|
654
658
|
this.pageSize = 20;
|
|
655
659
|
// tslint:disable-next-line:no-input-rename
|
|
656
660
|
this.pageSizeOptions = [];
|
|
661
|
+
// SORTING - pass through for pager component
|
|
662
|
+
// tslint:disable-next-line:no-input-rename
|
|
663
|
+
this.sortOptions = [];
|
|
664
|
+
// tslint:disable-next-line:no-input-rename
|
|
665
|
+
this.sortdir = '-';
|
|
666
|
+
// tslint:disable-next-line:no-input-rename
|
|
667
|
+
this.tilesCount = 4;
|
|
668
|
+
// tslint:disable-next-line:no-input-rename
|
|
669
|
+
this.showPager = true;
|
|
670
|
+
// tslint:disable-next-line:no-input-rename
|
|
671
|
+
this.pagerPosition = PagerPosition.Top;
|
|
672
|
+
// DETAILS SECTION
|
|
673
|
+
// Check if details section and button should be displayed according to the count of the value given
|
|
674
|
+
// tslint:disable-next-line:no-input-rename
|
|
675
|
+
this.detailsSectionPropertyCount = null;
|
|
657
676
|
this.pageChanged = new EventEmitter();
|
|
658
677
|
this.pageSizeChanged = new EventEmitter();
|
|
659
678
|
this.detailsOpened = new EventEmitter();
|
|
660
|
-
this.
|
|
679
|
+
this.sortChanged = new EventEmitter();
|
|
680
|
+
this.sortdirChanged = new EventEmitter();
|
|
661
681
|
this.multipleFullWidth = false;
|
|
682
|
+
this.expandIcon = Icons.Expand;
|
|
683
|
+
this.collapseIcon = Icons.Collapse;
|
|
684
|
+
this.tableViewSupported = false;
|
|
662
685
|
this.fullWidthTHClass = 'list-view-th-full';
|
|
663
686
|
this.fullWidthTDClass = 'list-view-td-full';
|
|
664
687
|
this.tilesViewSupported = false;
|
|
665
688
|
this.detailsSectionSupported = false;
|
|
666
689
|
this.loaderItems = [];
|
|
667
|
-
// DETAILS SECTION
|
|
668
|
-
// Check if details section and button should be displayed according to the count of the value given
|
|
669
|
-
// tslint:disable-next-line:no-input-rename
|
|
670
|
-
this.detailsSectionPropertyCount = null;
|
|
671
|
-
// SORTING - pass through for pager component
|
|
672
|
-
// tslint:disable-next-line:no-input-rename
|
|
673
|
-
this.sortOptions = [];
|
|
674
|
-
this.sort = null;
|
|
675
|
-
// tslint:disable-next-line:no-input-rename
|
|
676
|
-
this.sortdir = '-';
|
|
677
|
-
this.sortChanged = new EventEmitter();
|
|
678
|
-
this.sortdirChanged = new EventEmitter();
|
|
679
|
-
this.view = ListViewType.Table;
|
|
680
|
-
// COLUMNS
|
|
681
690
|
this.columns = [];
|
|
682
691
|
this.tilesDeckClass = 'cards-deck-4';
|
|
683
|
-
// tslint:disable-next-line:no-input-rename
|
|
684
|
-
this.tilesCount = 4;
|
|
685
692
|
this.tileTemplate = null;
|
|
686
693
|
this.detailsTemplate = null;
|
|
687
694
|
for (let i = 0; i < 5; i++) {
|
|
688
695
|
this.loaderItems.push({});
|
|
689
696
|
}
|
|
697
|
+
if (this.pagerPosition) {
|
|
698
|
+
this.pagerPosition = this.pagerPosition;
|
|
699
|
+
}
|
|
690
700
|
}
|
|
701
|
+
// COLUMNS
|
|
691
702
|
set cols(refs) {
|
|
692
703
|
this.columns = refs?.toArray();
|
|
693
704
|
if (this.columns && this.columns.length > 0) {
|
|
@@ -697,6 +708,7 @@ class ListViewComponent {
|
|
|
697
708
|
this.fullWidthTHClass = this.multipleFullWidth ? 'list-view-th-half' : 'list-view-th-full';
|
|
698
709
|
this.fullWidthTDClass = this.multipleFullWidth ? 'list-view-td-half' : 'list-view-td-full';
|
|
699
710
|
}
|
|
711
|
+
// tslint:disable-next-line:no-input-rename
|
|
700
712
|
set tiles(ref) {
|
|
701
713
|
this.tileTemplate = ref;
|
|
702
714
|
if (this.tileTemplate) {
|
|
@@ -753,62 +765,65 @@ class ListViewComponent {
|
|
|
753
765
|
}
|
|
754
766
|
}
|
|
755
767
|
ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
756
|
-
ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items",
|
|
768
|
+
ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, selector: "lib-list-view", inputs: { busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"px-2\">\n\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n\n </div>\n </ng-container>\n\n\n <!-- *ngSwitchCase=\"'gallery'\" -->\n <ng-container *ngSwitchCase=\"'gallery'\">\n <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n\n <!-- *ngSwitchCase=\"'table'\" -->\n <ng-container *ngSwitchDefault>\n\n <div class=\"list-view-container\">\n <div class=\"list-view-container-inner\">\n <table class=\"list-view-table\">\n <thead class=\"list-view-thead\">\n <tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <th class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\"\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n {{col.title}}\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button disabled\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n <ng-container *ngFor=\"let item of items;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button (click)=\"toggleDetails(item)\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <ng-template [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\n <div class=\"cards-deck-1\">\n <lib-list-view-empty-state></lib-list-view-empty-state>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"pt-2 px-2\">\n\n <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
|
|
757
769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
758
770
|
type: Component,
|
|
759
|
-
args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\n\n <lib-pager *ngIf=\"showPager\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n\n </div>\n </ng-container>\n\n\n <!-- *ngSwitchCase=\"'gallery'\" -->\n <ng-container *ngSwitchCase=\"'gallery'\">\n <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n\n <!-- *ngSwitchCase=\"'table'\" -->\n <ng-container *ngSwitchDefault>\n\n <div class=\"list-view-container\">\n <div class=\"list-view-container-inner\">\n <table class=\"list-view-table\">\n <thead class=\"list-view-thead\">\n <tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <th class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\"\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n {{col.title}}\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button disabled\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n <ng-container *ngFor=\"let item of items;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button (click)=\"toggleDetails(item)\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <ng-template [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\n <div class=\"cards-deck-1\">\n <lib-list-view-empty-state></lib-list-view-empty-state>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n" }]
|
|
771
|
+
args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\n\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n\n </div>\n </ng-container>\n\n\n <!-- *ngSwitchCase=\"'gallery'\" -->\n <ng-container *ngSwitchCase=\"'gallery'\">\n <ul role=\"list\" [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n\n <!-- *ngSwitchCase=\"'table'\" -->\n <ng-container *ngSwitchDefault>\n\n <div class=\"list-view-container\">\n <div class=\"list-view-container-inner\">\n <table class=\"list-view-table\">\n <thead class=\"list-view-thead\">\n <tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <th class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\"\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n {{col.title}}\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button disabled\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody class=\"list-view-tbody\" *ngIf=\"!busy\">\n <ng-container *ngFor=\"let item of items;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button (click)=\"toggleDetails(item)\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <ng-template [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\n <div class=\"cards-deck-1\">\n <lib-list-view-empty-state></lib-list-view-empty-state>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"pt-2 px-2\">\n\n <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n" }]
|
|
760
772
|
}], ctorParameters: function () { return []; }, propDecorators: { busy: [{
|
|
761
773
|
type: Input
|
|
762
774
|
}], items: [{
|
|
763
775
|
type: Input
|
|
764
|
-
}], showPager: [{
|
|
765
|
-
type: Input,
|
|
766
|
-
args: ['show-pager']
|
|
767
776
|
}], count: [{
|
|
768
777
|
type: Input
|
|
769
778
|
}], page: [{
|
|
770
779
|
type: Input
|
|
780
|
+
}], view: [{
|
|
781
|
+
type: Input
|
|
782
|
+
}], sort: [{
|
|
783
|
+
type: Input
|
|
771
784
|
}], pageSize: [{
|
|
772
785
|
type: Input,
|
|
773
786
|
args: ['page-size']
|
|
774
787
|
}], pageSizeOptions: [{
|
|
775
788
|
type: Input,
|
|
776
789
|
args: ['page-size-options']
|
|
777
|
-
}], pageChanged: [{
|
|
778
|
-
type: Output
|
|
779
|
-
}], pageSizeChanged: [{
|
|
780
|
-
type: Output
|
|
781
|
-
}], detailsOpened: [{
|
|
782
|
-
type: Output
|
|
783
|
-
}], detailsSectionPropertyCount: [{
|
|
784
|
-
type: Input,
|
|
785
|
-
args: ['details-section-property-count']
|
|
786
790
|
}], sortOptions: [{
|
|
787
791
|
type: Input,
|
|
788
792
|
args: ['sort-options']
|
|
789
|
-
}], sort: [{
|
|
790
|
-
type: Input
|
|
791
793
|
}], sortdir: [{
|
|
792
794
|
type: Input,
|
|
793
795
|
args: ['sort-dir']
|
|
794
|
-
}], sortChanged: [{
|
|
795
|
-
type: Output
|
|
796
|
-
}], sortdirChanged: [{
|
|
797
|
-
type: Output
|
|
798
|
-
}], view: [{
|
|
799
|
-
type: Input
|
|
800
|
-
}], cols: [{
|
|
801
|
-
type: ContentChildren,
|
|
802
|
-
args: [ListColumnComponent, { read: ListColumnComponent }]
|
|
803
796
|
}], tilesCount: [{
|
|
804
797
|
type: Input,
|
|
805
798
|
args: ['tiles-count']
|
|
799
|
+
}], showPager: [{
|
|
800
|
+
type: Input,
|
|
801
|
+
args: ['show-pager']
|
|
802
|
+
}], pagerPosition: [{
|
|
803
|
+
type: Input,
|
|
804
|
+
args: ['pager-position']
|
|
805
|
+
}], detailsSectionPropertyCount: [{
|
|
806
|
+
type: Input,
|
|
807
|
+
args: ['details-section-property-count']
|
|
808
|
+
}], cols: [{
|
|
809
|
+
type: ContentChildren,
|
|
810
|
+
args: [ListColumnComponent, { read: ListColumnComponent }]
|
|
806
811
|
}], tiles: [{
|
|
807
812
|
type: ContentChild,
|
|
808
813
|
args: [ListTileComponent, { read: ListTileComponent }]
|
|
809
814
|
}], details: [{
|
|
810
815
|
type: ContentChild,
|
|
811
816
|
args: [ListDetailsSectionComponent, { read: ListDetailsSectionComponent }]
|
|
817
|
+
}], pageChanged: [{
|
|
818
|
+
type: Output
|
|
819
|
+
}], pageSizeChanged: [{
|
|
820
|
+
type: Output
|
|
821
|
+
}], detailsOpened: [{
|
|
822
|
+
type: Output
|
|
823
|
+
}], sortChanged: [{
|
|
824
|
+
type: Output
|
|
825
|
+
}], sortdirChanged: [{
|
|
826
|
+
type: Output
|
|
812
827
|
}] } });
|
|
813
828
|
|
|
814
829
|
class CollapsiblePanelComponent {
|
|
@@ -3815,5 +3830,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
3815
3830
|
* Generated bundle index. Do not edit.
|
|
3816
3831
|
*/
|
|
3817
3832
|
|
|
3818
|
-
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
|
|
3833
|
+
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
|
|
3819
3834
|
//# sourceMappingURL=indice-ng-components.mjs.map
|