@indice/ng-components 0.2.160-beta.2 → 0.2.160-beta.3
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 +406 -2
- package/esm2020/lib/controls/notifications-indicator/notifications-indicator.component.mjs +17 -13
- package/esm2020/lib/controls/user-profile-menu/user-profile-menu.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-header/shell-header.component.mjs +6 -7
- package/esm2020/lib/layouts/shell/shell-layout/shell-layout.component.mjs +7 -9
- package/esm2020/lib/layouts/shell/shell-sidebar/shell-sidebar.component.mjs +7 -7
- package/esm2020/lib/layouts/shell/shell-sidebar-header/shell-sidebar-header.component.mjs +45 -0
- package/esm2020/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.mjs +25 -0
- package/esm2020/lib/layouts/shell/shell-stacked-layout/shell-stacked-layout.component.mjs +21 -0
- package/esm2020/lib/ng-components.module.mjs +12 -3
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/indice-ng-components.mjs +139 -60
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +133 -58
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/controls/notifications-indicator/notifications-indicator.component.d.ts +3 -3
- package/lib/layouts/shell/shell-header/shell-header.component.d.ts +2 -3
- package/lib/layouts/shell/shell-sidebar-header/shell-sidebar-header.component.d.ts +14 -0
- package/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.d.ts +12 -0
- package/lib/layouts/shell/shell-stacked-layout/shell-stacked-layout.component.d.ts +10 -0
- package/lib/ng-components.module.d.ts +7 -4
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -3,7 +3,7 @@ import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component,
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { isPlatformBrowser, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
|
-
import { Router,
|
|
6
|
+
import { Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
|
|
7
7
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
8
|
import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
|
|
9
9
|
import { filter, debounceTime, distinctUntilChanged, share, map } from 'rxjs/operators';
|
|
@@ -2082,6 +2082,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
2082
2082
|
args: [{ providedIn: 'root' }]
|
|
2083
2083
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
|
|
2084
2084
|
|
|
2085
|
+
class ShellSidebarComponent {
|
|
2086
|
+
constructor(router, route, links) {
|
|
2087
|
+
this.router = router;
|
|
2088
|
+
this.route = route;
|
|
2089
|
+
this.links = links;
|
|
2090
|
+
// tslint:disable-next-line:no-input-rename
|
|
2091
|
+
this.sectionLinksPath = 'main';
|
|
2092
|
+
this.sectionLinks = of([]);
|
|
2093
|
+
// tslint:disable-next-line:no-input-rename
|
|
2094
|
+
this.shellConfig = undefined;
|
|
2095
|
+
this.activeFragment = null;
|
|
2096
|
+
}
|
|
2097
|
+
ngOnInit() {
|
|
2098
|
+
this.activeFragment = this.route.fragment.pipe(share());
|
|
2099
|
+
this.sectionLinks = this.links[this.sectionLinksPath];
|
|
2100
|
+
}
|
|
2101
|
+
}
|
|
2102
|
+
ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2103
|
+
ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n <lib-nav-links-list\r\n [show-icons]=\"true\"\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'sidebar nav-link group'\"\r\n [link-active-class]=\"'sidebar nav-link-active group'\">\r\n </lib-nav-links-list>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
|
|
2104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
2105
|
+
type: Component,
|
|
2106
|
+
args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n <lib-nav-links-list\r\n [show-icons]=\"true\"\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'sidebar nav-link group'\"\r\n [link-active-class]=\"'sidebar nav-link-active group'\">\r\n </lib-nav-links-list>\r\n </div>\r\n</div>\r\n" }]
|
|
2107
|
+
}], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
|
|
2108
|
+
type: Inject,
|
|
2109
|
+
args: [Router]
|
|
2110
|
+
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2111
|
+
type: Inject,
|
|
2112
|
+
args: [ActivatedRoute]
|
|
2113
|
+
}] }, { type: undefined, decorators: [{
|
|
2114
|
+
type: Inject,
|
|
2115
|
+
args: [APP_LINKS]
|
|
2116
|
+
}] }]; }, propDecorators: { sectionLinksPath: [{
|
|
2117
|
+
type: Input,
|
|
2118
|
+
args: ['section-links']
|
|
2119
|
+
}], shellConfig: [{
|
|
2120
|
+
type: Input,
|
|
2121
|
+
args: ['config']
|
|
2122
|
+
}] } });
|
|
2123
|
+
|
|
2085
2124
|
class NotificationsIndicatorComponent {
|
|
2086
2125
|
constructor(notifications, links) {
|
|
2087
2126
|
this.notifications = notifications;
|
|
@@ -2098,20 +2137,24 @@ class NotificationsIndicatorComponent {
|
|
|
2098
2137
|
}
|
|
2099
2138
|
}
|
|
2100
2139
|
ngOnInit() {
|
|
2101
|
-
this.links['notifications']
|
|
2102
|
-
this.
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2140
|
+
if (this.links && this.links['notifications']) {
|
|
2141
|
+
this.links['notifications'].subscribe(notificationsLink => {
|
|
2142
|
+
this.allNotificationsLink = notificationsLink;
|
|
2143
|
+
});
|
|
2144
|
+
}
|
|
2145
|
+
if (this.notifications) {
|
|
2146
|
+
this.notificationsSub$ = this.notifications?.messages.subscribe(result => {
|
|
2147
|
+
if (result.items) {
|
|
2148
|
+
this.newArrival = true;
|
|
2149
|
+
this.unreadCount = result.count;
|
|
2150
|
+
this.items = result.items;
|
|
2151
|
+
setTimeout(() => { this.newArrival = false; }, 1000);
|
|
2152
|
+
}
|
|
2153
|
+
});
|
|
2154
|
+
}
|
|
2112
2155
|
}
|
|
2113
2156
|
doInboxAction() {
|
|
2114
|
-
if (this.notifications
|
|
2157
|
+
if (this.notifications?.inboxAction) {
|
|
2115
2158
|
this.notifications.inboxAction();
|
|
2116
2159
|
}
|
|
2117
2160
|
else {
|
|
@@ -2218,10 +2261,10 @@ class UserProfileMenuComponent {
|
|
|
2218
2261
|
}
|
|
2219
2262
|
}
|
|
2220
2263
|
UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2221
|
-
UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\"
|
|
2264
|
+
UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
|
|
2222
2265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
2223
2266
|
type: Component,
|
|
2224
|
-
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\"
|
|
2267
|
+
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n" }]
|
|
2225
2268
|
}], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
|
|
2226
2269
|
type: Inject,
|
|
2227
2270
|
args: [AuthService]
|
|
@@ -2252,7 +2295,7 @@ class ShellHeaderComponent {
|
|
|
2252
2295
|
// tslint:disable-next-line:no-input-rename
|
|
2253
2296
|
this.showAlerts = false;
|
|
2254
2297
|
// tslint:disable-next-line:no-input-rename
|
|
2255
|
-
this.
|
|
2298
|
+
this.showLangs = false;
|
|
2256
2299
|
this.border = true;
|
|
2257
2300
|
this.sectionLinks = of([]);
|
|
2258
2301
|
this.mobileMenuExpanded = false;
|
|
@@ -2313,10 +2356,10 @@ class ShellHeaderComponent {
|
|
|
2313
2356
|
}
|
|
2314
2357
|
}
|
|
2315
2358
|
ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2316
|
-
ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"],
|
|
2359
|
+
ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div class=\"shell-header-border\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-logo-container\">\r\n <div>\r\n <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <div class=\"shell-header-link-container-inner\">\r\n <lib-nav-links-list\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link'\"\r\n [link-active-class]=\"'nav-link-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n\r\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <lib-nav-links-list\r\n [links]=\"links.profileActions\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'shell-header-menu-rounded-button'\"\r\n [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n </lib-nav-links-list>\r\n\r\n\r\n <!-- Profile dropdown -->\r\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n </div>\r\n\r\n <!-- Notifications dropdown -->\r\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n <lib-notifications-indicator></lib-notifications-indicator>\r\n </div>\r\n\r\n <!-- languages dropdown -->\r\n <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n <lib-language-selection></lib-language-selection>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-button-container\">\r\n <!-- Mobile menu button -->\r\n <button type=\"button\"\r\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n class=\"mobile-menu-button\"\r\n aria-controls=\"mobile-menu\"\r\n [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n <span class=\"sr-only\">Open main menu</span>\r\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Mobile menu, show/hide based on menu state. -->\r\n <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n <lib-nav-links-list\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link-mobile'\"\r\n [link-active-class]=\"'nav-link-mobile-active'\"\r\n [container-class]=\"'mobile-menu-link-container'\">\r\n </lib-nav-links-list>\r\n\r\n <div *ngIf=\"!user\">\r\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n </a>\r\n </div>\r\n\r\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n <div class=\"mobile-menu-user-info-container-inner\">\r\n <div class=\"flex-shrink-0\">\r\n <span class=\"mobile-menu-avatar-container\">\r\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n </span>\r\n </div>\r\n <div class=\"ml-3\">\r\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n </div>\r\n <!--\r\n <button class=\"mobile-menu-rounded-button\">\r\n <span class=\"sr-only\">View notifications</span>\r\n <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n </svg>\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <lib-nav-links-list\r\n [links]=\"links.profile\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link-mobile'\"\r\n [link-active-class]=\"'nav-link-mobile-active'\"\r\n [container-class]=\"'mobile-menu-link-container'\">\r\n </lib-nav-links-list>\r\n </div>\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
|
|
2317
2360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
2318
2361
|
type: Component,
|
|
2319
|
-
args: [{ selector: 'lib-shell-header', template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div
|
|
2362
|
+
args: [{ selector: 'lib-shell-header', template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div class=\"shell-header-border\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-logo-container\">\r\n <div>\r\n <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <div class=\"shell-header-link-container-inner\">\r\n <lib-nav-links-list\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link'\"\r\n [link-active-class]=\"'nav-link-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n\r\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <lib-nav-links-list\r\n [links]=\"links.profileActions\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'shell-header-menu-rounded-button'\"\r\n [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n </lib-nav-links-list>\r\n\r\n\r\n <!-- Profile dropdown -->\r\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n </div>\r\n\r\n <!-- Notifications dropdown -->\r\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n <lib-notifications-indicator></lib-notifications-indicator>\r\n </div>\r\n\r\n <!-- languages dropdown -->\r\n <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n <lib-language-selection></lib-language-selection>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-button-container\">\r\n <!-- Mobile menu button -->\r\n <button type=\"button\"\r\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n class=\"mobile-menu-button\"\r\n aria-controls=\"mobile-menu\"\r\n [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n <span class=\"sr-only\">Open main menu</span>\r\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Mobile menu, show/hide based on menu state. -->\r\n <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n <lib-nav-links-list\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link-mobile'\"\r\n [link-active-class]=\"'nav-link-mobile-active'\"\r\n [container-class]=\"'mobile-menu-link-container'\">\r\n </lib-nav-links-list>\r\n\r\n <div *ngIf=\"!user\">\r\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n </a>\r\n </div>\r\n\r\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n <div class=\"mobile-menu-user-info-container-inner\">\r\n <div class=\"flex-shrink-0\">\r\n <span class=\"mobile-menu-avatar-container\">\r\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n </span>\r\n </div>\r\n <div class=\"ml-3\">\r\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n </div>\r\n <!--\r\n <button class=\"mobile-menu-rounded-button\">\r\n <span class=\"sr-only\">View notifications</span>\r\n <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n </svg>\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <lib-nav-links-list\r\n [links]=\"links.profile\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link-mobile'\"\r\n [link-active-class]=\"'nav-link-mobile-active'\"\r\n [container-class]=\"'mobile-menu-link-container'\">\r\n </lib-nav-links-list>\r\n </div>\r\n</nav>\r\n" }]
|
|
2320
2363
|
}], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
|
|
2321
2364
|
type: Inject,
|
|
2322
2365
|
args: [AuthService]
|
|
@@ -2344,13 +2387,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
2344
2387
|
}], showAlerts: [{
|
|
2345
2388
|
type: Input,
|
|
2346
2389
|
args: ['show-alerts']
|
|
2347
|
-
}],
|
|
2390
|
+
}], showLangs: [{
|
|
2348
2391
|
type: Input,
|
|
2349
|
-
args: ['
|
|
2392
|
+
args: ['show-langs']
|
|
2350
2393
|
}], border: [{
|
|
2351
2394
|
type: Input
|
|
2352
2395
|
}] } });
|
|
2353
2396
|
|
|
2397
|
+
class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
2398
|
+
constructor(authService, router, route, config, links) {
|
|
2399
|
+
super(authService, router, route, config, links);
|
|
2400
|
+
this.authService = authService;
|
|
2401
|
+
this.router = router;
|
|
2402
|
+
this.route = route;
|
|
2403
|
+
this.config = config;
|
|
2404
|
+
this.links = links;
|
|
2405
|
+
}
|
|
2406
|
+
}
|
|
2407
|
+
ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2408
|
+
ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\">\n <div class=\"shell-header-md-visible\">\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n <!-- Profile dropdown -->\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n </div>\n <!-- Notifications dropdown -->\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n <lib-notifications-indicator></lib-notifications-indicator>\n </div>\n <!-- languages dropdown -->\n <div *ngIf=\"showLangs\" class=\"ml-4\">\n <lib-language-selection></lib-language-selection>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
|
|
2409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
2410
|
+
type: Component,
|
|
2411
|
+
args: [{ selector: 'lib-shell-sidebar-header', template: "<div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\">\n <div class=\"shell-header-md-visible\">\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n <!-- Profile dropdown -->\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\n </div>\n <!-- Notifications dropdown -->\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n <lib-notifications-indicator></lib-notifications-indicator>\n </div>\n <!-- languages dropdown -->\n <div *ngIf=\"showLangs\" class=\"ml-4\">\n <lib-language-selection></lib-language-selection>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n" }]
|
|
2412
|
+
}], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
|
|
2413
|
+
type: Inject,
|
|
2414
|
+
args: [AuthService]
|
|
2415
|
+
}] }, { type: i1$1.Router, decorators: [{
|
|
2416
|
+
type: Inject,
|
|
2417
|
+
args: [Router]
|
|
2418
|
+
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2419
|
+
type: Inject,
|
|
2420
|
+
args: [ActivatedRoute]
|
|
2421
|
+
}] }, { type: undefined, decorators: [{
|
|
2422
|
+
type: Inject,
|
|
2423
|
+
args: [SHELL_CONFIG]
|
|
2424
|
+
}] }, { type: undefined, decorators: [{
|
|
2425
|
+
type: Inject,
|
|
2426
|
+
args: [APP_LINKS]
|
|
2427
|
+
}] }]; } });
|
|
2428
|
+
|
|
2429
|
+
class ShellSidebarLayoutComponent {
|
|
2430
|
+
constructor() {
|
|
2431
|
+
this.showMobileSidebar = true;
|
|
2432
|
+
}
|
|
2433
|
+
ngOnInit() {
|
|
2434
|
+
}
|
|
2435
|
+
toggleMobileSidebar() {
|
|
2436
|
+
this.showMobileSidebar = !this.showMobileSidebar;
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
|
+
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2440
|
+
ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n \n <!-- -->\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n\n <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n \n <!-- -->\n <div class=\"sidebar-off-canvas-menu-backdrop\" \n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n </div>\n \n <!-- -->\n <div class=\"sidebar-off-canvas-menu-container-inner\" \n [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\n <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n \n <!-- -->\n <div class=\"sidebar-off-canvas-layout-container\">\n <!--Close button, show/hide based on off-canvas menu state.-->\n <!-- -->\n <div class=\"sidebar-off-canvas-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Close sidebar</span>\n <!-- Heroicon name: outline/x -->\n <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n \n <!-- -->\n <div class=\"sidebar-off-canvas-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n\n <lib-shell-sidebar></lib-shell-sidebar>\n \n </div>\n \n <!-- -->\n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n <!-- Dummy element to force sidebar to shrink to fit close icon -->\n </div>\n </div>\n </div>\n \n <!-- Static sidebar for desktop -->\n \n <!-- -->\n <div class=\"sidebar-static-menu-outer-container\">\n \n <!-- -->\n <div class=\"sidebar-static-menu-container\" \n [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \n [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\n <!-- Sidebar component, swap this element with another sidebar if you like -->\n \n <!-- -->\n <div class=\"sidebar-static-menu-container-inner\">\n \n <!-- -->\n <div class=\"sidebar-static-menu-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n <lib-shell-sidebar></lib-shell-sidebar>\n </div>\n </div>\n </div>\n\n <!-- sidebar-static-menu-container1 -->\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n <!-- -->\n <div class=\"sidebar-static-menu-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <!-- Heroicon name: outline/menu-alt-2 -->\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n \n <!-- sidebar-static-menu-header-container -->\n <div class=\"sidebar-static-menu-header-container\">\n <!-- -->\n <div class=\"sidebar-static-menu-header-near-container\">\n \n </div>\n <!-- -->\n <div class=\"sidebar-static-menu-header-far-container\">\n <lib-shell-sidebar-header \n [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" \n [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n </div>\n </div>\n </div>\n \n <div flex-1>\n <main class=\"shell-content-container-fluid\">\n <div class=\"shell-content-container-inner\">\n <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n </div>\n </main>\n </div>\n </div>\n </div>", dependencies: [{ 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: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
|
|
2441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
2442
|
+
type: Component,
|
|
2443
|
+
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n \n <!-- -->\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n\n <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n \n <!-- -->\n <div class=\"sidebar-off-canvas-menu-backdrop\" \n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n </div>\n \n <!-- -->\n <div class=\"sidebar-off-canvas-menu-container-inner\" \n [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\n <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n \n <!-- -->\n <div class=\"sidebar-off-canvas-layout-container\">\n <!--Close button, show/hide based on off-canvas menu state.-->\n <!-- -->\n <div class=\"sidebar-off-canvas-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Close sidebar</span>\n <!-- Heroicon name: outline/x -->\n <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n \n <!-- -->\n <div class=\"sidebar-off-canvas-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n\n <lib-shell-sidebar></lib-shell-sidebar>\n \n </div>\n \n <!-- -->\n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n <!-- Dummy element to force sidebar to shrink to fit close icon -->\n </div>\n </div>\n </div>\n \n <!-- Static sidebar for desktop -->\n \n <!-- -->\n <div class=\"sidebar-static-menu-outer-container\">\n \n <!-- -->\n <div class=\"sidebar-static-menu-container\" \n [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \n [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\n <!-- Sidebar component, swap this element with another sidebar if you like -->\n \n <!-- -->\n <div class=\"sidebar-static-menu-container-inner\">\n \n <!-- -->\n <div class=\"sidebar-static-menu-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n <lib-shell-sidebar></lib-shell-sidebar>\n </div>\n </div>\n </div>\n\n <!-- sidebar-static-menu-container1 -->\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n <!-- -->\n <div class=\"sidebar-static-menu-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <!-- Heroicon name: outline/menu-alt-2 -->\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n \n <!-- sidebar-static-menu-header-container -->\n <div class=\"sidebar-static-menu-header-container\">\n <!-- -->\n <div class=\"sidebar-static-menu-header-near-container\">\n \n </div>\n <!-- -->\n <div class=\"sidebar-static-menu-header-far-container\">\n <lib-shell-sidebar-header \n [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" \n [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n </div>\n </div>\n </div>\n \n <div flex-1>\n <main class=\"shell-content-container-fluid\">\n <div class=\"shell-content-container-inner\">\n <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n </div>\n </main>\n </div>\n </div>\n </div>" }]
|
|
2444
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2445
|
+
type: Input
|
|
2446
|
+
}] } });
|
|
2447
|
+
|
|
2354
2448
|
class ShellFooterComponent {
|
|
2355
2449
|
constructor(links) {
|
|
2356
2450
|
this.links = links;
|
|
@@ -2366,43 +2460,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
2366
2460
|
args: [APP_LINKS]
|
|
2367
2461
|
}] }]; } });
|
|
2368
2462
|
|
|
2369
|
-
class
|
|
2370
|
-
constructor(
|
|
2371
|
-
this.router = router;
|
|
2372
|
-
this.route = route;
|
|
2373
|
-
this.links = links;
|
|
2374
|
-
// tslint:disable-next-line:no-input-rename
|
|
2375
|
-
this.sectionLinksPath = 'main';
|
|
2376
|
-
this.sectionLinks = of([]);
|
|
2377
|
-
// tslint:disable-next-line:no-input-rename
|
|
2378
|
-
this.shellConfig = undefined;
|
|
2379
|
-
this.activeFragment = null;
|
|
2380
|
-
}
|
|
2463
|
+
class ShellStackedLayoutComponent {
|
|
2464
|
+
constructor() { }
|
|
2381
2465
|
ngOnInit() {
|
|
2382
|
-
this.activeFragment = this.route.fragment.pipe(share());
|
|
2383
|
-
this.sectionLinks = this.links[this.sectionLinksPath];
|
|
2384
2466
|
}
|
|
2385
2467
|
}
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type:
|
|
2468
|
+
ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2469
|
+
ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\n <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n <ng-container *ngIf=\"config?.customHeaderComponent\">\n <div appDynamicComponentHost =\"Header\"></div>\n </ng-container>\n <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n </lib-shell-header>\n </div>\n</div>\n\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n </div>\n</main>\n\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\n <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n <ng-container *ngIf=\"config?.customFooterComponent\">\n <div appDynamicComponentHost hostName=\"Footer\"></div>\n </ng-container>\n <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n </div>\n</div>", dependencies: [{ 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: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }] });
|
|
2470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
2389
2471
|
type: Component,
|
|
2390
|
-
args: [{ selector: 'lib-shell-
|
|
2391
|
-
}], ctorParameters: function () { return [
|
|
2392
|
-
|
|
2393
|
-
args: [Router]
|
|
2394
|
-
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2395
|
-
type: Inject,
|
|
2396
|
-
args: [ActivatedRoute]
|
|
2397
|
-
}] }, { type: undefined, decorators: [{
|
|
2398
|
-
type: Inject,
|
|
2399
|
-
args: [APP_LINKS]
|
|
2400
|
-
}] }]; }, propDecorators: { sectionLinksPath: [{
|
|
2401
|
-
type: Input,
|
|
2402
|
-
args: ['section-links']
|
|
2403
|
-
}], shellConfig: [{
|
|
2404
|
-
type: Input,
|
|
2405
|
-
args: ['config']
|
|
2472
|
+
args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\n <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n <ng-container *ngIf=\"config?.customHeaderComponent\">\n <div appDynamicComponentHost =\"Header\"></div>\n </ng-container>\n <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n </lib-shell-header>\n </div>\n</div>\n\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n </div>\n</main>\n\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\n <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n <ng-container *ngIf=\"config?.customFooterComponent\">\n <div appDynamicComponentHost hostName=\"Footer\"></div>\n </ng-container>\n <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n </div>\n</div>" }]
|
|
2473
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2474
|
+
type: Input
|
|
2406
2475
|
}] } });
|
|
2407
2476
|
|
|
2408
2477
|
class ShellLayoutComponent {
|
|
@@ -2476,10 +2545,10 @@ class ShellLayoutComponent {
|
|
|
2476
2545
|
}
|
|
2477
2546
|
}
|
|
2478
2547
|
ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
|
|
2479
|
-
ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div
|
|
2548
|
+
ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n <!-- STACKED LAYOUT -->\r\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n </div>\r\n\r\n <!-- SIDEBAR LAYOUT -->\r\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\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>", dependencies: [{ 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: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }] });
|
|
2480
2549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
2481
2550
|
type: Component,
|
|
2482
|
-
args: [{ selector: 'lib-shell-layout', template: "<div
|
|
2551
|
+
args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n <!-- STACKED LAYOUT -->\r\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n </div>\r\n\r\n <!-- SIDEBAR LAYOUT -->\r\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\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>" }]
|
|
2483
2552
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2484
2553
|
type: Inject,
|
|
2485
2554
|
args: [DOCUMENT]
|
|
@@ -3672,7 +3741,10 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
|
|
|
3672
3741
|
LibStepperComponent,
|
|
3673
3742
|
LibStepComponent,
|
|
3674
3743
|
LibStepLabelDirective,
|
|
3675
|
-
LibStepInfoDirective
|
|
3744
|
+
LibStepInfoDirective,
|
|
3745
|
+
ShellSidebarHeaderComponent,
|
|
3746
|
+
ShellSidebarLayoutComponent,
|
|
3747
|
+
ShellStackedLayoutComponent], imports: [CommonModule,
|
|
3676
3748
|
RouterModule,
|
|
3677
3749
|
IndiceAuthModule], exports: [AddressPipe,
|
|
3678
3750
|
AuthCallbackComponent,
|
|
@@ -3773,7 +3845,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
3773
3845
|
LibStepperComponent,
|
|
3774
3846
|
LibStepComponent,
|
|
3775
3847
|
LibStepLabelDirective,
|
|
3776
|
-
LibStepInfoDirective
|
|
3848
|
+
LibStepInfoDirective,
|
|
3849
|
+
ShellSidebarHeaderComponent,
|
|
3850
|
+
ShellSidebarLayoutComponent,
|
|
3851
|
+
ShellStackedLayoutComponent
|
|
3777
3852
|
],
|
|
3778
3853
|
imports: [
|
|
3779
3854
|
CommonModule,
|
|
@@ -3830,5 +3905,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
3830
3905
|
* Generated bundle index. Do not edit.
|
|
3831
3906
|
*/
|
|
3832
3907
|
|
|
3833
|
-
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
|
|
3908
|
+
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
|
|
3834
3909
|
//# sourceMappingURL=indice-ng-components.mjs.map
|