@indice/ng-components 0.2.72 → 0.2.76
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/_styles.css +2 -2
- package/bundles/indice-ng-components.umd.js +5 -4
- 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 +2 -2
- package/esm2015/lib/controls/skeleton-loader/skeleton-loader.component.js +1 -1
- package/esm2015/lib/controls/toggle/toggle.component.js +2 -2
- package/esm2015/lib/layouts/shell/shell-layout/shell-layout.component.js +3 -2
- package/esm2015/lib/services/toaster.service.js +1 -1
- package/fesm2015/indice-ng-components.js +5 -4
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/indice-ng-components.metadata.json +1 -1
- package/lib/layouts/shell/shell-layout/shell-layout.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.
|
package/_styles.css
CHANGED
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.btn-outline:disabled {
|
|
62
|
-
@apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm;
|
|
62
|
+
@apply focus:outline-none bg-transparent text-gray-400 text-sm px-2.5 py-1.5 border border-gray-300 rounded-sm cursor-not-allowed;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
|
|
@@ -588,7 +588,7 @@
|
|
|
588
588
|
}
|
|
589
589
|
|
|
590
590
|
.side-view-layout-action-button-submit:disabled {
|
|
591
|
-
@apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500;
|
|
591
|
+
@apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 cursor-not-allowed;
|
|
592
592
|
}
|
|
593
593
|
|
|
594
594
|
}
|
|
@@ -1043,7 +1043,7 @@
|
|
|
1043
1043
|
ListViewComponent.decorators = [
|
|
1044
1044
|
{ type: i0.Component, args: [{
|
|
1045
1045
|
selector: 'lib-list-view',
|
|
1046
|
-
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 [ngSwitch]=\"view\">\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"tilesDeckClass\">\r\n <lib-skeleton-loader *ngIf=\"!items\"
|
|
1046
|
+
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=\"(items == null || undefined) || 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=\"!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 </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <lib-skeleton-loader *ngIf=\"(items == null || undefined) || items?.length == 0\" [count]=\"5\" [type]=\"'table'\"></lib-skeleton-loader>\r\n\r\n <div class=\"list-view-container\"\r\n *ngIf=\"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"
|
|
1047
1047
|
},] }
|
|
1048
1048
|
];
|
|
1049
1049
|
ListViewComponent.ctorParameters = function () { return []; };
|
|
@@ -1085,7 +1085,7 @@
|
|
|
1085
1085
|
ListViewEmptyStateComponent.decorators = [
|
|
1086
1086
|
{ type: i0.Component, args: [{
|
|
1087
1087
|
selector: 'lib-list-view-empty-state',
|
|
1088
|
-
template: "<div class=\"p-20\">\
|
|
1088
|
+
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"
|
|
1089
1089
|
},] }
|
|
1090
1090
|
];
|
|
1091
1091
|
ListViewEmptyStateComponent.ctorParameters = function () { return []; };
|
|
@@ -1552,7 +1552,7 @@
|
|
|
1552
1552
|
ToggleComponent.decorators = [
|
|
1553
1553
|
{ type: i0.Component, args: [{
|
|
1554
1554
|
selector: 'lib-toggle',
|
|
1555
|
-
template: "<button type=\"button\"\n [ngClass]=\"value ? 'enabled' : 'disabled'\"\n class=\"toggle-button\"\n role=\"switch\"\n aria-checked=\"false\"\n aria-labelledby=\"isPrivate\"\n (click)=\"changeValue()\"\n (blur)=\"onBlur($event)\"\n value=\"{{value}}\"\n [disabled]=\"disabled\"\n [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\n <span aria-hidden=\"true\"\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n class=\"toggle-span\"></span>\n</button>",
|
|
1555
|
+
template: "<button type=\"button\"\r\n [ngClass]=\"value ? 'enabled' : 'disabled'\"\r\n class=\"toggle-button\"\r\n role=\"switch\"\r\n aria-checked=\"false\"\r\n aria-labelledby=\"isPrivate\"\r\n (click)=\"changeValue()\"\r\n (blur)=\"onBlur($event)\"\r\n value=\"{{value}}\"\r\n [disabled]=\"disabled\"\r\n [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n <span aria-hidden=\"true\"\r\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n class=\"toggle-span\"></span>\r\n</button>",
|
|
1556
1556
|
providers: [
|
|
1557
1557
|
{
|
|
1558
1558
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1838,6 +1838,7 @@
|
|
|
1838
1838
|
this.showRightPaneSM = false;
|
|
1839
1839
|
this.routerSub$ = null;
|
|
1840
1840
|
this.activeConfig = new DefaultShellConfig();
|
|
1841
|
+
this.loaded = false;
|
|
1841
1842
|
if (!config) {
|
|
1842
1843
|
config = new DefaultShellConfig();
|
|
1843
1844
|
}
|
|
@@ -1899,7 +1900,7 @@
|
|
|
1899
1900
|
{ type: i0.Component, args: [{
|
|
1900
1901
|
// tslint:disable-next-line:component-selector
|
|
1901
1902
|
selector: 'lib-shell-layout',
|
|
1902
|
-
template: "<div class=\"shell-container active-side-pane\">\r\n <div class=\"shell-header-container\"
|
|
1903
|
+
template: "<div *ngIf=\"loaded\" class=\"shell-container active-side-pane\">\r\n <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n\r\n <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n <div appDynamicComponentHost =\"Header\"></div>\r\n </ng-container>\r\n\r\n <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [show-userName]=\"activeConfig.showUserNameOnHeader\"></lib-shell-header>\r\n </div>\r\n </div>\r\n\r\n <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n </main>\r\n\r\n <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n </ng-container>\r\n <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n </div>\r\n </div>\r\n\r\n <lib-side-pane #rightPane>\r\n <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n </lib-side-pane>\r\n\r\n <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n<div style=\"display: none;\" (onload)=\"loaded=true\"></div>\r\n"
|
|
1903
1904
|
},] }
|
|
1904
1905
|
];
|
|
1905
1906
|
ShellLayoutComponent.ctorParameters = function () { return [
|