@indice/ng-components 0.2.164 → 0.2.165
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/_styles.css +1 -1
- package/bundles/indice-ng-components.umd.js +1 -1
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/list-view/list-view.component.js +2 -2
- package/fesm2015/indice-ng-components.js +1 -1
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/package.json +1 -1
package/_styles.css
CHANGED
|
@@ -1710,7 +1710,7 @@
|
|
|
1710
1710
|
return ListViewComponent;
|
|
1711
1711
|
}());
|
|
1712
1712
|
ListViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1713
|
-
ListViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", 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", advancedSearchChanged: "advancedSearchChanged" }, 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__namespace, template: "<div class=\"px-2\">\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\"\r\n [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2\">\r\n <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>", components: [{ type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
1713
|
+
ListViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", 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", advancedSearchChanged: "advancedSearchChanged" }, 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__namespace, template: "<div class=\"px-2\">\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\"\r\n [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>", components: [{ type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
1714
1714
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListViewComponent, decorators: [{
|
|
1715
1715
|
type: i0.Component,
|
|
1716
1716
|
args: [{
|