@indice/ng-components 0.2.172-beta.9 → 0.2.173-beta.0
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.scss +14 -6
- package/esm2020/lib/controls/kpi-tile/kpi-tile.component.mjs +3 -3
- package/esm2020/lib/controls/list-view/list-view.component.mjs +2 -2
- package/esm2020/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/views/model-view-layout/model-view-layout.component.mjs +50 -7
- package/fesm2015/indice-ng-components.mjs +50 -10
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +50 -10
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/controls/kpi-tile/kpi-tile.component.d.ts +1 -1
- package/lib/layouts/views/model-view-layout/model-view-layout.component.d.ts +18 -4
- package/package.json +1 -1
|
@@ -1464,7 +1464,7 @@ class ListViewComponent {
|
|
|
1464
1464
|
this.tilesDeckClass = 'cards-deck-4';
|
|
1465
1465
|
this.tileTemplate = null;
|
|
1466
1466
|
this.detailsTemplate = null;
|
|
1467
|
-
for (let i = 0; i <
|
|
1467
|
+
for (let i = 0; i < 9; i++) {
|
|
1468
1468
|
this.loaderItems.push({});
|
|
1469
1469
|
}
|
|
1470
1470
|
if (this.pagerPosition) {
|
|
@@ -1646,10 +1646,10 @@ class KpiTileComponent {
|
|
|
1646
1646
|
}
|
|
1647
1647
|
}
|
|
1648
1648
|
KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
-
KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn", actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"
|
|
1649
|
+
KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn", actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\r\n <div class=\"card-body\">\r\n <div class=\"kpi-tile-title-container\">\r\n <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n </div>\r\n <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\r\n <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"card-footer\">\r\n <div class=\"text-xs\">\r\n <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1650
1650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: KpiTileComponent, decorators: [{
|
|
1651
1651
|
type: Component,
|
|
1652
|
-
args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"
|
|
1652
|
+
args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\r\n <div class=\"card-body\">\r\n <div class=\"kpi-tile-title-container\">\r\n <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\r\n </div>\r\n <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\r\n <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"card-footer\">\r\n <div class=\"text-xs\">\r\n <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n</div>" }]
|
|
1653
1653
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
1654
1654
|
type: Input
|
|
1655
1655
|
}], busy: [{
|
|
@@ -3209,10 +3209,10 @@ class ShellSidebarLayoutComponent {
|
|
|
3209
3209
|
}
|
|
3210
3210
|
}
|
|
3211
3211
|
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [{ token: UserSettingsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3212
|
-
ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate" }, ngImport: i0, template: "<div>\r\n <div class=\"sidebar-off-canvas-menu-container\"\r\n role=\"dialog\"\r\n aria-modal=\"true\">\r\n <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n </div>\r\n <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-off-canvas-layout-container\">\r\n <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n <button type=\"button\"\r\n class=\"sidebar-off-canvas-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Close sidebar</span>\r\n <svg class=\"h-6 w-6 text-white\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"sidebar-off-canvas-app-logo-container\">\r\n <img class=\"
|
|
3212
|
+
ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate" }, ngImport: i0, template: "<div>\r\n <div class=\"sidebar-off-canvas-menu-container\"\r\n role=\"dialog\"\r\n aria-modal=\"true\">\r\n <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n </div>\r\n <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-off-canvas-layout-container\">\r\n <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n <button type=\"button\"\r\n class=\"sidebar-off-canvas-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Close sidebar</span>\r\n <svg class=\"h-6 w-6 text-white\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"sidebar-off-canvas-app-logo-container\">\r\n <img class=\"shell-sidebar-logo\"\r\n [src]=\"config?.appLogo\"\r\n [alt]=\"config?.appLogoAlt\">\r\n </div>\r\n <lib-shell-sidebar></lib-shell-sidebar>\r\n </div>\r\n <div class=\"sidebar-dummy-element\"\r\n aria-hidden=\"true\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sidebar-static-menu-outer-container\">\r\n <div class=\"sidebar-static-menu-container\"\r\n [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\r\n [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-static-menu-container-inner\">\r\n <div class=\"sidebar-static-menu-app-logo-container\">\r\n <img *ngIf=\"!showMobileSidebar\"\r\n class=\"shell-sidebar-logo\"\r\n [src]=\"config?.appLogo\"\r\n [alt]=\"config?.appLogoAlt\">\r\n <button *ngIf=\"showMobileSidebar\"\r\n type=\"button\"\r\n class=\"sidebar-static-menu-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <svg class=\"h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n </div>\r\n <div class=\"flex flex-shrink-0 bg-gray-700 p-4\"\r\n *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n <div class=\"group block flex-shrink-0\">\r\n <div class=\"flex items-center\">\r\n <div>\r\n <p class=\"text-sm font-medium text-gray-400\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sidebar-static-menu-wrapper\"\r\n [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n <div class=\"sidebar-static-menu-sticky-header-container\"\r\n *ngIf=\"config?.showHeader\">\r\n <button *ngIf=\"showMobileSidebar\"\r\n type=\"button\"\r\n class=\"sidebar-static-menu-toggle-button-md\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <svg class=\"h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"!showMobileSidebar\"\r\n type=\"button\"\r\n class=\"sidebar-static-menu-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <svg class=\"h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n <div class=\"sidebar-static-menu-header-container\">\r\n <div class=\"sidebar-static-menu-header-near-container\">\r\n <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n *ngIf=\"showMobileSidebar\">\r\n <img class=\"shell-sidebar-logo\"\r\n [src]=\"config?.appLogo\"\r\n [alt]=\"config?.appLogoAlt\">\r\n </div>\r\n </div>\r\n <div class=\"sidebar-static-menu-header-far-container\">\r\n <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n [show-alerts]=\"config?.showAlertsOnHeader\"\r\n [show-langs]=\"config?.showLangsOnHeader\">\r\n </lib-shell-sidebar-header>\r\n </div>\r\n </div>\r\n </div>\r\n <div flex-1>\r\n <main class=\"shell-content-container-fluid\">\r\n <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n <div class=\"shell-content-container-inner\">\r\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n </div>\r\n </main>\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ 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$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: BreadcrumbComponent, selector: "lib-breadcrumb" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config", "sticky"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
|
|
3213
3213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
3214
3214
|
type: Component,
|
|
3215
|
-
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\r\n <div class=\"sidebar-off-canvas-menu-container\"\r\n role=\"dialog\"\r\n aria-modal=\"true\">\r\n <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n </div>\r\n <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-off-canvas-layout-container\">\r\n <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n <button type=\"button\"\r\n class=\"sidebar-off-canvas-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Close sidebar</span>\r\n <svg class=\"h-6 w-6 text-white\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"sidebar-off-canvas-app-logo-container\">\r\n <img class=\"
|
|
3215
|
+
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\r\n <div class=\"sidebar-off-canvas-menu-container\"\r\n role=\"dialog\"\r\n aria-modal=\"true\">\r\n <div class=\"sidebar-off-canvas-menu-backdrop\"\r\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\r\n </div>\r\n <div class=\"sidebar-off-canvas-menu-container-inner\"\r\n [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\r\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-off-canvas-layout-container\">\r\n <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n <button type=\"button\"\r\n class=\"sidebar-off-canvas-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Close sidebar</span>\r\n <svg class=\"h-6 w-6 text-white\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"sidebar-off-canvas-app-logo-container\">\r\n <img class=\"shell-sidebar-logo\"\r\n [src]=\"config?.appLogo\"\r\n [alt]=\"config?.appLogoAlt\">\r\n </div>\r\n <lib-shell-sidebar></lib-shell-sidebar>\r\n </div>\r\n <div class=\"sidebar-dummy-element\"\r\n aria-hidden=\"true\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sidebar-static-menu-outer-container\">\r\n <div class=\"sidebar-static-menu-container\"\r\n [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\r\n [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-static-menu-container-inner\">\r\n <div class=\"sidebar-static-menu-app-logo-container\">\r\n <img *ngIf=\"!showMobileSidebar\"\r\n class=\"shell-sidebar-logo\"\r\n [src]=\"config?.appLogo\"\r\n [alt]=\"config?.appLogoAlt\">\r\n <button *ngIf=\"showMobileSidebar\"\r\n type=\"button\"\r\n class=\"sidebar-static-menu-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <svg class=\"h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\r\n </div>\r\n <div class=\"flex flex-shrink-0 bg-gray-700 p-4\"\r\n *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\r\n <div class=\"group block flex-shrink-0\">\r\n <div class=\"flex items-center\">\r\n <div>\r\n <p class=\"text-sm font-medium text-gray-400\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sidebar-static-menu-wrapper\"\r\n [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\r\n <div class=\"sidebar-static-menu-sticky-header-container\"\r\n *ngIf=\"config?.showHeader\">\r\n <button *ngIf=\"showMobileSidebar\"\r\n type=\"button\"\r\n class=\"sidebar-static-menu-toggle-button-md\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <svg class=\"h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n <button *ngIf=\"!showMobileSidebar\"\r\n type=\"button\"\r\n class=\"sidebar-static-menu-toggle-button\"\r\n (click)=\"toggleMobileSidebar()\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <svg class=\"h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n <div class=\"sidebar-static-menu-header-container\">\r\n <div class=\"sidebar-static-menu-header-near-container\">\r\n <div class=\"sidebar-static-menu-header-app-logo-container\"\r\n *ngIf=\"showMobileSidebar\">\r\n <img class=\"shell-sidebar-logo\"\r\n [src]=\"config?.appLogo\"\r\n [alt]=\"config?.appLogoAlt\">\r\n </div>\r\n </div>\r\n <div class=\"sidebar-static-menu-header-far-container\">\r\n <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\r\n [show-alerts]=\"config?.showAlertsOnHeader\"\r\n [show-langs]=\"config?.showLangsOnHeader\">\r\n </lib-shell-sidebar-header>\r\n </div>\r\n </div>\r\n </div>\r\n <div flex-1>\r\n <main class=\"shell-content-container-fluid\">\r\n <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\r\n <div class=\"shell-content-container-inner\">\r\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n </div>\r\n </main>\r\n </div>\r\n </div>\r\n</div>" }]
|
|
3216
3216
|
}], ctorParameters: function () { return [{ type: UserSettingsService }]; }, propDecorators: { config: [{
|
|
3217
3217
|
type: Input
|
|
3218
3218
|
}], sidebarFooterTemplate: [{
|
|
@@ -3430,8 +3430,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
|
|
|
3430
3430
|
}] } });
|
|
3431
3431
|
|
|
3432
3432
|
class ModelViewLayoutComponent {
|
|
3433
|
-
constructor(location) {
|
|
3433
|
+
constructor(location, router, route) {
|
|
3434
3434
|
this.location = location;
|
|
3435
|
+
this.router = router;
|
|
3436
|
+
this.route = route;
|
|
3435
3437
|
this.showRightPaneSM = false;
|
|
3436
3438
|
this.title = 'no title';
|
|
3437
3439
|
// tslint:disable-next-line:no-input-rename
|
|
@@ -3445,8 +3447,43 @@ class ModelViewLayoutComponent {
|
|
|
3445
3447
|
this.icon = null;
|
|
3446
3448
|
this.busy = false;
|
|
3447
3449
|
this.actions = null;
|
|
3450
|
+
this.optionsLoaded = false;
|
|
3451
|
+
this._options = [];
|
|
3452
|
+
}
|
|
3453
|
+
get tabsOptions() {
|
|
3454
|
+
if (!this.optionsLoaded) {
|
|
3455
|
+
this.optionsLoaded = true;
|
|
3456
|
+
if (this.primary) {
|
|
3457
|
+
this.primary.forEach(p => {
|
|
3458
|
+
this._options.push(new MenuOption(p.text, p.link, undefined, undefined, p.icon));
|
|
3459
|
+
});
|
|
3460
|
+
}
|
|
3461
|
+
if (this.secondary) {
|
|
3462
|
+
this.secondary.forEach(p => {
|
|
3463
|
+
this._options.push(new MenuOption(p.text, p.link, undefined, undefined, p.icon));
|
|
3464
|
+
});
|
|
3465
|
+
}
|
|
3466
|
+
this.selectedTab = this._options[0].value;
|
|
3467
|
+
}
|
|
3468
|
+
return this._options;
|
|
3448
3469
|
}
|
|
3449
3470
|
ngOnInit() {
|
|
3471
|
+
this.selectedTabSub$ = this.router.events.subscribe(event => {
|
|
3472
|
+
if (event instanceof NavigationEnd) {
|
|
3473
|
+
if (event.urlAfterRedirects) {
|
|
3474
|
+
var urlParts = event.urlAfterRedirects.split('/');
|
|
3475
|
+
if (urlParts && urlParts.length > 0) {
|
|
3476
|
+
const lastPart = urlParts[urlParts.length - 1];
|
|
3477
|
+
this.selectedTab = lastPart.split('?')[0];
|
|
3478
|
+
}
|
|
3479
|
+
}
|
|
3480
|
+
}
|
|
3481
|
+
});
|
|
3482
|
+
}
|
|
3483
|
+
ngOnDestroy() {
|
|
3484
|
+
if (this.selectedTabSub$) {
|
|
3485
|
+
this.selectedTabSub$.unsubscribe();
|
|
3486
|
+
}
|
|
3450
3487
|
}
|
|
3451
3488
|
onSidePaneActivated($event) {
|
|
3452
3489
|
this.showRightPaneSM = true;
|
|
@@ -3457,13 +3494,16 @@ class ModelViewLayoutComponent {
|
|
|
3457
3494
|
closeSidePane() {
|
|
3458
3495
|
this.location.back();
|
|
3459
3496
|
}
|
|
3497
|
+
navigateLink(link) {
|
|
3498
|
+
this.router.navigate([link], { relativeTo: this.route });
|
|
3499
|
+
}
|
|
3460
3500
|
}
|
|
3461
|
-
ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
3462
|
-
ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n <main class=\"model-view-container\">\r\n <div class=\"model-view-container-inner\">\r\n <aside class=\"model-view-aside\">\r\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n <div class=\"model-view-aside-header-container\">\r\n <div class=\"model-view-aside-header-container-inner\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- menu items -->\r\n <div class=\"model-view-menu-container\">\r\n <nav class=\"model-view-menu-nav\">\r\n <div class=\"model-view-menu-item\">\r\n <ng-container *ngFor=\"let section of primary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLink]=\"section.link\"\r\n class=\"view-nav-link\">\r\n {{section.text}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n <div class=\"model-view-menu-item-far\">\r\n <ng-container *ngFor=\"let section of secondary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLinkActiveOptions]=\"{ exact:
|
|
3501
|
+
ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
3502
|
+
ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n <main class=\"model-view-container\">\r\n <div class=\"model-view-container-inner\">\r\n <aside class=\"model-view-aside\">\r\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n <div class=\"model-view-aside-header-container\">\r\n <div class=\"model-view-aside-header-container-inner\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- menu items -->\r\n <div class=\"model-view-menu-container-mobile\">\r\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div class=\"model-view-menu-container\">\r\n <nav class=\"model-view-menu-nav\">\r\n <div class=\"model-view-menu-item\">\r\n <ng-container *ngFor=\"let section of primary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLink]=\"section.link\"\r\n [routerLinkActiveOptions]=\"{ exact: false }\"\r\n class=\"view-nav-link\">\r\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n {{section.text}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n <div class=\"model-view-menu-item-far\">\r\n <ng-container *ngFor=\"let section of secondary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLink]=\"section.link\"\r\n [routerLinkActiveOptions]=\"{ exact: false }\"\r\n class=\"view-nav-link\">\r\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n {{section.text}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n </div>\r\n </section>\r\n </aside>\r\n <div class=\"model-view-details-container\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n </main>\r\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$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
|
|
3463
3503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
|
|
3464
3504
|
type: Component,
|
|
3465
|
-
args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n <main class=\"model-view-container\">\r\n <div class=\"model-view-container-inner\">\r\n <aside class=\"model-view-aside\">\r\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n <div class=\"model-view-aside-header-container\">\r\n <div class=\"model-view-aside-header-container-inner\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- menu items -->\r\n <div class=\"model-view-menu-container\">\r\n <nav class=\"model-view-menu-nav\">\r\n <div class=\"model-view-menu-item\">\r\n <ng-container *ngFor=\"let section of primary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLink]=\"section.link\"\r\n class=\"view-nav-link\">\r\n {{section.text}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n <div class=\"model-view-menu-item-far\">\r\n <ng-container *ngFor=\"let section of secondary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLinkActiveOptions]=\"{ exact:
|
|
3466
|
-
}], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { title: [{
|
|
3505
|
+
args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\r\n <main class=\"model-view-container\">\r\n <div class=\"model-view-container-inner\">\r\n <aside class=\"model-view-aside\">\r\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\r\n <div class=\"model-view-aside-header-container\">\r\n <div class=\"model-view-aside-header-container-inner\">\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- menu items -->\r\n <div class=\"model-view-menu-container-mobile\">\r\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div class=\"model-view-menu-container\">\r\n <nav class=\"model-view-menu-nav\">\r\n <div class=\"model-view-menu-item\">\r\n <ng-container *ngFor=\"let section of primary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLink]=\"section.link\"\r\n [routerLinkActiveOptions]=\"{ exact: false }\"\r\n class=\"view-nav-link\">\r\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n {{section.text}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n <div class=\"model-view-menu-item-far\">\r\n <ng-container *ngFor=\"let section of secondary\">\r\n <a href=\"#\"\r\n [routerLinkActive]=\"['view-nav-link-active']\"\r\n [routerLink]=\"section.link\"\r\n [routerLinkActiveOptions]=\"{ exact: false }\"\r\n class=\"view-nav-link\">\r\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"]></i>\r\n {{section.text}}\r\n </a>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n </div>\r\n </section>\r\n </aside>\r\n <div class=\"model-view-details-container\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n </main>\r\n" }]
|
|
3506
|
+
}], ctorParameters: function () { return [{ type: i1.Location }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }]; }, propDecorators: { title: [{
|
|
3467
3507
|
type: Input
|
|
3468
3508
|
}], primary: [{
|
|
3469
3509
|
type: Input,
|