@indice/ng-components 0.2.96 → 0.2.99
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/README.md +4 -4
- package/bundles/indice-ng-components.umd.js +9 -5
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/kpi-tile/kpi-tile.component.js +1 -1
- package/esm2015/lib/controls/list-view/list-column.component.js +1 -1
- package/esm2015/lib/controls/list-view/list-view-empty-state.component.js +2 -2
- package/esm2015/lib/controls/list-view/list-view.component.js +5 -2
- package/esm2015/lib/controls/pager/pager.component.js +4 -3
- package/esm2015/lib/controls/skeleton-loader/skeleton-loader.component.js +2 -2
- package/esm2015/lib/services/toaster.service.js +1 -1
- package/fesm2015/indice-ng-components.js +9 -5
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/indice-ng-components.metadata.json +1 -1
- package/lib/controls/list-view/list-view.component.d.ts +1 -0
- package/lib/controls/pager/pager.component.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# INDICE ANGULAR Components
|
|
2
|
-
|
|
3
|
-
Indice common components for Angular 2+
|
|
4
|
-
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
|
|
1
|
+
# INDICE ANGULAR Components
|
|
2
|
+
|
|
3
|
+
Indice common components for Angular 2+
|
|
4
|
+
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
|
|
@@ -766,6 +766,8 @@
|
|
|
766
766
|
var PagerComponent = /** @class */ (function () {
|
|
767
767
|
function PagerComponent(router) {
|
|
768
768
|
this.router = router;
|
|
769
|
+
// BUSY STATE
|
|
770
|
+
this.busy = false;
|
|
769
771
|
// PAGING
|
|
770
772
|
this.count = null;
|
|
771
773
|
this.page = 1;
|
|
@@ -810,7 +812,6 @@
|
|
|
810
812
|
}
|
|
811
813
|
this.canPreviousPage = this.page > 1;
|
|
812
814
|
this.canNextPage = this.page < this.pages.length;
|
|
813
|
-
//console.log('calcPages', this.page, this.canPreviousPage, this.canNextPage);
|
|
814
815
|
};
|
|
815
816
|
PagerComponent.prototype.nextPage = function () {
|
|
816
817
|
var next = this.page + 1;
|
|
@@ -837,7 +838,6 @@
|
|
|
837
838
|
this.sortChanged.emit(sort);
|
|
838
839
|
};
|
|
839
840
|
PagerComponent.prototype.toggleSortdir = function () {
|
|
840
|
-
//console.log('toggleSortdir');
|
|
841
841
|
var sortdir = 'desc';
|
|
842
842
|
if (this.sortdir === 'desc') {
|
|
843
843
|
sortdir = 'asc';
|
|
@@ -861,6 +861,7 @@
|
|
|
861
861
|
{ type: router.Router }
|
|
862
862
|
]; };
|
|
863
863
|
PagerComponent.propDecorators = {
|
|
864
|
+
busy: [{ type: i0.Input }],
|
|
864
865
|
count: [{ type: i0.Input }],
|
|
865
866
|
page: [{ type: i0.Input }],
|
|
866
867
|
pageSize: [{ type: i0.Input, args: ['page-size',] }],
|
|
@@ -923,6 +924,8 @@
|
|
|
923
924
|
|
|
924
925
|
var ListViewComponent = /** @class */ (function () {
|
|
925
926
|
function ListViewComponent() {
|
|
927
|
+
// BUSY STATE
|
|
928
|
+
this.busy = false;
|
|
926
929
|
this.expandIcon = Icons.Expand;
|
|
927
930
|
this.collapseIcon = Icons.Collapse;
|
|
928
931
|
// tslint:disable-next-line:no-input-rename
|
|
@@ -1044,11 +1047,12 @@
|
|
|
1044
1047
|
ListViewComponent.decorators = [
|
|
1045
1048
|
{ type: i0.Component, args: [{
|
|
1046
1049
|
selector: 'lib-list-view',
|
|
1047
|
-
template: "<div class=\"px-2\">\r\n\r\n <lib-pager *ngIf=\"showPager && items && items.length > 0\"\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 (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=\"
|
|
1050
|
+
template: "<div class=\"px-2\">\r\n\r\n <lib-pager *ngIf=\"showPager && items && items.length > 0\"\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=\"!items\" [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"
|
|
1048
1051
|
},] }
|
|
1049
1052
|
];
|
|
1050
1053
|
ListViewComponent.ctorParameters = function () { return []; };
|
|
1051
1054
|
ListViewComponent.propDecorators = {
|
|
1055
|
+
busy: [{ type: i0.Input }],
|
|
1052
1056
|
items: [{ type: i0.Input }],
|
|
1053
1057
|
showPager: [{ type: i0.Input, args: ['show-pager',] }],
|
|
1054
1058
|
count: [{ type: i0.Input }],
|
|
@@ -1086,7 +1090,7 @@
|
|
|
1086
1090
|
ListViewEmptyStateComponent.decorators = [
|
|
1087
1091
|
{ type: i0.Component, args: [{
|
|
1088
1092
|
selector: 'lib-list-view-empty-state',
|
|
1089
|
-
template: "<div class=\"p-20\">\
|
|
1093
|
+
template: "<div class=\"p-20\">\n <div class=\"text-center p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n <p class=\"mt-1 text-sm text-gray-500\">\n {{subTitle}}\n </p>\n <div class=\"mt-6\" *ngIf=\"false\">\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n <!-- Heroicon name: solid/plus -->\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n {{newItemLabel}}\n </button>\n </div>\n </div>\n</div>\n"
|
|
1090
1094
|
},] }
|
|
1091
1095
|
];
|
|
1092
1096
|
ListViewEmptyStateComponent.ctorParameters = function () { return []; };
|
|
@@ -1112,7 +1116,7 @@
|
|
|
1112
1116
|
{ type: i0.Component, args: [{
|
|
1113
1117
|
// tslint:disable-next-line:component-selector
|
|
1114
1118
|
selector: 'lib-skeleton-loader',
|
|
1115
|
-
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=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto\">\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\" *ngSwitchCase=\"'large-tiles'\">\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\">\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=\"rounded-full bg-light-blue-400 h-12 w-12\"> </div>\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-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</ng-container>\r\n"
|
|
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=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto\">\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\" *ngSwitchCase=\"'large-tiles'\">\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\">\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=\"rounded-full bg-light-blue-400 h-12 w-12\"> </div>\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-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\r\n <div class=\"cards-deck-1\">\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</ng-container>\r\n"
|
|
1116
1120
|
},] }
|
|
1117
1121
|
];
|
|
1118
1122
|
SkeletonLoaderComponent.ctorParameters = function () { return []; };
|