@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';
|
|
@@ -2110,6 +2110,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
2110
2110
|
args: [{ providedIn: 'root' }]
|
|
2111
2111
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
|
|
2112
2112
|
|
|
2113
|
+
class ShellSidebarComponent {
|
|
2114
|
+
constructor(router, route, links) {
|
|
2115
|
+
this.router = router;
|
|
2116
|
+
this.route = route;
|
|
2117
|
+
this.links = links;
|
|
2118
|
+
// tslint:disable-next-line:no-input-rename
|
|
2119
|
+
this.sectionLinksPath = 'main';
|
|
2120
|
+
this.sectionLinks = of([]);
|
|
2121
|
+
// tslint:disable-next-line:no-input-rename
|
|
2122
|
+
this.shellConfig = undefined;
|
|
2123
|
+
this.activeFragment = null;
|
|
2124
|
+
}
|
|
2125
|
+
ngOnInit() {
|
|
2126
|
+
this.activeFragment = this.route.fragment.pipe(share());
|
|
2127
|
+
this.sectionLinks = this.links[this.sectionLinksPath];
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
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 });
|
|
2131
|
+
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"] }] });
|
|
2132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
2133
|
+
type: Component,
|
|
2134
|
+
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" }]
|
|
2135
|
+
}], ctorParameters: function () {
|
|
2136
|
+
return [{ type: i1$1.Router, decorators: [{
|
|
2137
|
+
type: Inject,
|
|
2138
|
+
args: [Router]
|
|
2139
|
+
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2140
|
+
type: Inject,
|
|
2141
|
+
args: [ActivatedRoute]
|
|
2142
|
+
}] }, { type: undefined, decorators: [{
|
|
2143
|
+
type: Inject,
|
|
2144
|
+
args: [APP_LINKS]
|
|
2145
|
+
}] }];
|
|
2146
|
+
}, propDecorators: { sectionLinksPath: [{
|
|
2147
|
+
type: Input,
|
|
2148
|
+
args: ['section-links']
|
|
2149
|
+
}], shellConfig: [{
|
|
2150
|
+
type: Input,
|
|
2151
|
+
args: ['config']
|
|
2152
|
+
}] } });
|
|
2153
|
+
|
|
2113
2154
|
class NotificationsIndicatorComponent {
|
|
2114
2155
|
constructor(notifications, links) {
|
|
2115
2156
|
this.notifications = notifications;
|
|
@@ -2126,20 +2167,26 @@ class NotificationsIndicatorComponent {
|
|
|
2126
2167
|
}
|
|
2127
2168
|
}
|
|
2128
2169
|
ngOnInit() {
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2170
|
+
var _a;
|
|
2171
|
+
if (this.links && this.links['notifications']) {
|
|
2172
|
+
this.links['notifications'].subscribe(notificationsLink => {
|
|
2173
|
+
this.allNotificationsLink = notificationsLink;
|
|
2174
|
+
});
|
|
2175
|
+
}
|
|
2176
|
+
if (this.notifications) {
|
|
2177
|
+
this.notificationsSub$ = (_a = this.notifications) === null || _a === void 0 ? void 0 : _a.messages.subscribe(result => {
|
|
2178
|
+
if (result.items) {
|
|
2179
|
+
this.newArrival = true;
|
|
2180
|
+
this.unreadCount = result.count;
|
|
2181
|
+
this.items = result.items;
|
|
2182
|
+
setTimeout(() => { this.newArrival = false; }, 1000);
|
|
2183
|
+
}
|
|
2184
|
+
});
|
|
2185
|
+
}
|
|
2140
2186
|
}
|
|
2141
2187
|
doInboxAction() {
|
|
2142
|
-
|
|
2188
|
+
var _a;
|
|
2189
|
+
if ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.inboxAction) {
|
|
2143
2190
|
this.notifications.inboxAction();
|
|
2144
2191
|
}
|
|
2145
2192
|
else {
|
|
@@ -2252,10 +2299,10 @@ class UserProfileMenuComponent {
|
|
|
2252
2299
|
}
|
|
2253
2300
|
}
|
|
2254
2301
|
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 });
|
|
2255
|
-
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)\"
|
|
2302
|
+
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"] }] });
|
|
2256
2303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
2257
2304
|
type: Component,
|
|
2258
|
-
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\"
|
|
2305
|
+
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" }]
|
|
2259
2306
|
}], ctorParameters: function () {
|
|
2260
2307
|
return [{ type: i2.AuthService, decorators: [{
|
|
2261
2308
|
type: Inject,
|
|
@@ -2288,7 +2335,7 @@ class ShellHeaderComponent {
|
|
|
2288
2335
|
// tslint:disable-next-line:no-input-rename
|
|
2289
2336
|
this.showAlerts = false;
|
|
2290
2337
|
// tslint:disable-next-line:no-input-rename
|
|
2291
|
-
this.
|
|
2338
|
+
this.showLangs = false;
|
|
2292
2339
|
this.border = true;
|
|
2293
2340
|
this.sectionLinks = of([]);
|
|
2294
2341
|
this.mobileMenuExpanded = false;
|
|
@@ -2350,10 +2397,10 @@ class ShellHeaderComponent {
|
|
|
2350
2397
|
}
|
|
2351
2398
|
}
|
|
2352
2399
|
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 });
|
|
2353
|
-
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"],
|
|
2400
|
+
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"] }] });
|
|
2354
2401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
2355
2402
|
type: Component,
|
|
2356
|
-
args: [{ selector: 'lib-shell-header', template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div
|
|
2403
|
+
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" }]
|
|
2357
2404
|
}], ctorParameters: function () {
|
|
2358
2405
|
return [{ type: i2.AuthService, decorators: [{
|
|
2359
2406
|
type: Inject,
|
|
@@ -2383,13 +2430,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
2383
2430
|
}], showAlerts: [{
|
|
2384
2431
|
type: Input,
|
|
2385
2432
|
args: ['show-alerts']
|
|
2386
|
-
}],
|
|
2433
|
+
}], showLangs: [{
|
|
2387
2434
|
type: Input,
|
|
2388
|
-
args: ['
|
|
2435
|
+
args: ['show-langs']
|
|
2389
2436
|
}], border: [{
|
|
2390
2437
|
type: Input
|
|
2391
2438
|
}] } });
|
|
2392
2439
|
|
|
2440
|
+
class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
2441
|
+
constructor(authService, router, route, config, links) {
|
|
2442
|
+
super(authService, router, route, config, links);
|
|
2443
|
+
this.authService = authService;
|
|
2444
|
+
this.router = router;
|
|
2445
|
+
this.route = route;
|
|
2446
|
+
this.config = config;
|
|
2447
|
+
this.links = links;
|
|
2448
|
+
}
|
|
2449
|
+
}
|
|
2450
|
+
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 });
|
|
2451
|
+
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"] }] });
|
|
2452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
2453
|
+
type: Component,
|
|
2454
|
+
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" }]
|
|
2455
|
+
}], ctorParameters: function () {
|
|
2456
|
+
return [{ type: i2.AuthService, decorators: [{
|
|
2457
|
+
type: Inject,
|
|
2458
|
+
args: [AuthService]
|
|
2459
|
+
}] }, { type: i1$1.Router, decorators: [{
|
|
2460
|
+
type: Inject,
|
|
2461
|
+
args: [Router]
|
|
2462
|
+
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2463
|
+
type: Inject,
|
|
2464
|
+
args: [ActivatedRoute]
|
|
2465
|
+
}] }, { type: undefined, decorators: [{
|
|
2466
|
+
type: Inject,
|
|
2467
|
+
args: [SHELL_CONFIG]
|
|
2468
|
+
}] }, { type: undefined, decorators: [{
|
|
2469
|
+
type: Inject,
|
|
2470
|
+
args: [APP_LINKS]
|
|
2471
|
+
}] }];
|
|
2472
|
+
} });
|
|
2473
|
+
|
|
2474
|
+
class ShellSidebarLayoutComponent {
|
|
2475
|
+
constructor() {
|
|
2476
|
+
this.showMobileSidebar = true;
|
|
2477
|
+
}
|
|
2478
|
+
ngOnInit() {
|
|
2479
|
+
}
|
|
2480
|
+
toggleMobileSidebar() {
|
|
2481
|
+
this.showMobileSidebar = !this.showMobileSidebar;
|
|
2482
|
+
}
|
|
2483
|
+
}
|
|
2484
|
+
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2485
|
+
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" }] });
|
|
2486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
2487
|
+
type: Component,
|
|
2488
|
+
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>" }]
|
|
2489
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2490
|
+
type: Input
|
|
2491
|
+
}] } });
|
|
2492
|
+
|
|
2393
2493
|
class ShellFooterComponent {
|
|
2394
2494
|
constructor(links) {
|
|
2395
2495
|
this.links = links;
|
|
@@ -2407,45 +2507,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
2407
2507
|
}] }];
|
|
2408
2508
|
} });
|
|
2409
2509
|
|
|
2410
|
-
class
|
|
2411
|
-
constructor(
|
|
2412
|
-
this.router = router;
|
|
2413
|
-
this.route = route;
|
|
2414
|
-
this.links = links;
|
|
2415
|
-
// tslint:disable-next-line:no-input-rename
|
|
2416
|
-
this.sectionLinksPath = 'main';
|
|
2417
|
-
this.sectionLinks = of([]);
|
|
2418
|
-
// tslint:disable-next-line:no-input-rename
|
|
2419
|
-
this.shellConfig = undefined;
|
|
2420
|
-
this.activeFragment = null;
|
|
2421
|
-
}
|
|
2510
|
+
class ShellStackedLayoutComponent {
|
|
2511
|
+
constructor() { }
|
|
2422
2512
|
ngOnInit() {
|
|
2423
|
-
this.activeFragment = this.route.fragment.pipe(share());
|
|
2424
|
-
this.sectionLinks = this.links[this.sectionLinksPath];
|
|
2425
2513
|
}
|
|
2426
2514
|
}
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type:
|
|
2515
|
+
ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2516
|
+
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" }] });
|
|
2517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
2430
2518
|
type: Component,
|
|
2431
|
-
args: [{ selector: 'lib-shell-
|
|
2432
|
-
}], ctorParameters: function () {
|
|
2433
|
-
|
|
2434
|
-
type: Inject,
|
|
2435
|
-
args: [Router]
|
|
2436
|
-
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2437
|
-
type: Inject,
|
|
2438
|
-
args: [ActivatedRoute]
|
|
2439
|
-
}] }, { type: undefined, decorators: [{
|
|
2440
|
-
type: Inject,
|
|
2441
|
-
args: [APP_LINKS]
|
|
2442
|
-
}] }];
|
|
2443
|
-
}, propDecorators: { sectionLinksPath: [{
|
|
2444
|
-
type: Input,
|
|
2445
|
-
args: ['section-links']
|
|
2446
|
-
}], shellConfig: [{
|
|
2447
|
-
type: Input,
|
|
2448
|
-
args: ['config']
|
|
2519
|
+
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>" }]
|
|
2520
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2521
|
+
type: Input
|
|
2449
2522
|
}] } });
|
|
2450
2523
|
|
|
2451
2524
|
class ShellLayoutComponent {
|
|
@@ -2520,10 +2593,10 @@ class ShellLayoutComponent {
|
|
|
2520
2593
|
}
|
|
2521
2594
|
}
|
|
2522
2595
|
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 });
|
|
2523
|
-
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
|
|
2596
|
+
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"] }] });
|
|
2524
2597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
2525
2598
|
type: Component,
|
|
2526
|
-
args: [{ selector: 'lib-shell-layout', template: "<div
|
|
2599
|
+
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>" }]
|
|
2527
2600
|
}], ctorParameters: function () {
|
|
2528
2601
|
return [{ type: undefined, decorators: [{
|
|
2529
2602
|
type: Inject,
|
|
@@ -3736,7 +3809,10 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
|
|
|
3736
3809
|
LibStepperComponent,
|
|
3737
3810
|
LibStepComponent,
|
|
3738
3811
|
LibStepLabelDirective,
|
|
3739
|
-
LibStepInfoDirective
|
|
3812
|
+
LibStepInfoDirective,
|
|
3813
|
+
ShellSidebarHeaderComponent,
|
|
3814
|
+
ShellSidebarLayoutComponent,
|
|
3815
|
+
ShellStackedLayoutComponent
|
|
3740
3816
|
], imports: [CommonModule,
|
|
3741
3817
|
RouterModule,
|
|
3742
3818
|
IndiceAuthModule], exports: [AddressPipe,
|
|
@@ -3838,7 +3914,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
3838
3914
|
LibStepperComponent,
|
|
3839
3915
|
LibStepComponent,
|
|
3840
3916
|
LibStepLabelDirective,
|
|
3841
|
-
LibStepInfoDirective
|
|
3917
|
+
LibStepInfoDirective,
|
|
3918
|
+
ShellSidebarHeaderComponent,
|
|
3919
|
+
ShellSidebarLayoutComponent,
|
|
3920
|
+
ShellStackedLayoutComponent
|
|
3842
3921
|
],
|
|
3843
3922
|
imports: [
|
|
3844
3923
|
CommonModule,
|
|
@@ -3895,5 +3974,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
3895
3974
|
* Generated bundle index. Do not edit.
|
|
3896
3975
|
*/
|
|
3897
3976
|
|
|
3898
|
-
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 };
|
|
3977
|
+
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 };
|
|
3899
3978
|
//# sourceMappingURL=indice-ng-components.mjs.map
|