@indice/ng-components 0.2.101 → 0.2.104
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/bundles/indice-ng-components.umd.js +3 -3
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/list-view/list-view.component.js +2 -2
- package/esm2015/lib/controls/pager/pager.component.js +2 -2
- package/esm2015/lib/controls/skeleton-loader/skeleton-loader.component.js +2 -2
- package/fesm2015/indice-ng-components.js +3 -3
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/indice-ng-components.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -854,7 +854,7 @@
|
|
|
854
854
|
PagerComponent.decorators = [
|
|
855
855
|
{ type: i0.Component, args: [{
|
|
856
856
|
selector: 'lib-pager',
|
|
857
|
-
template: "<div class=\"pager-container\" *ngIf=\"busy\">\r\n
|
|
857
|
+
template: "<div class=\"pager-container\" *ngIf=\"busy\">\r\n <div class=\"pager-container-inner\">\r\n <div class=\"flex animate-pulse flex-row items-center h-full justify-center space-x-5\">\r\n <div class=\"flex flex-col space-y-3\">\r\n <div class=\"w-36 bg-gray-300 h-6 rounded-md \">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"pager-pages-container\">\r\n <div class=\"flex animate-pulse flex-row items-center h-full justify-center space-x-5\">\r\n <div class=\"flex flex-col space-y-3\">\r\n <div class=\"w-36 bg-gray-300 h-6 rounded-md \">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"pager-container\" *ngIf=\"!busy\">\r\n <div class=\"pager-container-inner\">\r\n <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\r\n <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\r\n <button (click)=\"toggleSortdir()\" [disabled]=\"!sort\" class=\"pager-icon-button\">\r\n <span class=\"sr-only\">sort direction</span>\r\n <span class=\"inline-block relative\">\r\n <i [class]=\"sortdirIcon\"></i>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"pager-pages-container\">\r\n <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\r\n <div class=\"mx-2\" *ngIf=\"count !== null && count > pageSize\">\r\n <button [disabled]=\"!canPreviousPage\" (click)=\"previousPage()\"\r\n class=\"pager-arrow-button-left\">\r\n <span class=\"sr-only\">Previous</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n <button [disabled]=\"!canNextPage\" (click)=\"nextPage()\"\r\n class=\"pager-arrow-button-right\">\r\n <span class=\"sr-only\">Next</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <lib-drop-down-menu *ngIf=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n</div>\r\n"
|
|
858
858
|
},] }
|
|
859
859
|
];
|
|
860
860
|
PagerComponent.ctorParameters = function () { return [
|
|
@@ -1047,7 +1047,7 @@
|
|
|
1047
1047
|
ListViewComponent.decorators = [
|
|
1048
1048
|
{ type: i0.Component, args: [{
|
|
1049
1049
|
selector: 'lib-list-view',
|
|
1050
|
-
template: "<div class=\"px-2\">\r\n\r\n <lib-pager *ngIf=\"showPager
|
|
1050
|
+
template: "<div class=\"px-2\">\r\n\r\n <lib-pager *ngIf=\"showPager\"\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 *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\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\" [count]=\"5\" [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\" [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [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 <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'table'\"></lib-skeleton-loader>\r\n\r\n <div class=\"list-view-container\" *ngIf=\"!busy && items && items.length > 0\">\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 <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</ng-container>\r\n\r\n<ng-content></ng-content>\r\n"
|
|
1051
1051
|
},] }
|
|
1052
1052
|
];
|
|
1053
1053
|
ListViewComponent.ctorParameters = function () { return []; };
|
|
@@ -1116,7 +1116,7 @@
|
|
|
1116
1116
|
{ type: i0.Component, args: [{
|
|
1117
1117
|
// tslint:disable-next-line:component-selector
|
|
1118
1118
|
selector: 'lib-skeleton-loader',
|
|
1119
|
-
template: "<ng-container *ngSwitch=\"type\">\r\n <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n <ng-container *ngFor=\"let i of counter(count)\">\r\n <div class=\"
|
|
1119
|
+
template: "<h1>SKELETON LOADER!</h1>\r\n<ng-container *ngSwitch=\"type\">\r\n <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\r\n <ng-container *ngFor=\"let i of counter(count)\">\r\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n <div class=\"animate-pulse flex flex-col\">\r\n <div class=\"rounded w-full h-32 bg-gray-200\"></div>\r\n <div class=\"flex flex-col mt-5\">\r\n <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n\r\n <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n\r\n <div class=\"flex items-center mt-5\">\r\n <div>\r\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n </div>\r\n <div class=\"flex justify-between w-full ml-3\">\r\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\r\n <ng-container *ngFor=\"let i of counter(count)\">\r\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n <div class=\"animate-pulse flex flex-col\">\r\n <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n <div class=\"flex flex-col mt-5\">\r\n <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n\r\n <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n\r\n <div class=\"flex items-center mt-5\">\r\n <div>\r\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n </div>\r\n <div class=\"flex justify-between w-full ml-3\">\r\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\r\n <ng-container *ngFor=\"let i of counter(count)\">\r\n <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\r\n <div class=\"animate-pulse flex space-x-4\">\r\n <div class=\"rounded-full bg-light-blue-400 h-12 w-12\"> </div>\r\n <div class=\"flex-1 space-y-4 py-1\">\r\n <div class=\"h-4 bg-light-blue-400 rounded w-3/4\"> </div>\r\n <div class=\"space-y-2\">\r\n <div class=\"h-4 bg-light-blue-400 rounded\"> </div>\r\n <div class=\"h-4 bg-light-blue-400 rounded w-5/6\"> </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"cards-deck-3\" *ngSwitchDefault>\r\n <ng-container *ngFor=\"let i of counter(count)\">\r\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\r\n <div class=\"animate-pulse flex flex-col\">\r\n <div class=\"rounded w-full h-52 bg-gray-200\"></div>\r\n <div class=\"flex flex-col mt-5\">\r\n <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n\r\n <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1\">\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n\r\n <div class=\"flex items-center mt-5\">\r\n <div>\r\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\r\n </div>\r\n <div class=\"flex justify-between w-full ml-3\">\r\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\r\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n"
|
|
1120
1120
|
},] }
|
|
1121
1121
|
];
|
|
1122
1122
|
SkeletonLoaderComponent.ctorParameters = function () { return []; };
|