@sumaris-net/ngx-components 2.4.129 → 2.4.131
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/esm2020/src/app/core/menu/menu.component.mjs +3 -3
- package/esm2020/src/app/core/menu/menu.model.mjs +3 -2
- package/esm2020/src/app/core/menu/menu.service.mjs +26 -17
- package/esm2020/src/app/core/menu/sub-menu-tab.directive.mjs +10 -9
- package/esm2020/src/app/core/menu/testing/menu-other.testing.mjs +15 -6
- package/esm2020/src/app/core/menu/testing/menu.testing.mjs +29 -5
- package/fesm2015/sumaris-net.ngx-components.mjs +82 -35
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +77 -35
- package/fesm2020/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/core/menu/menu.service.d.ts +2 -1
- package/src/app/core/menu/testing/menu-other.testing.d.ts +2 -0
- package/src/app/core/menu/testing/menu.testing.d.ts +7 -1
|
@@ -22685,7 +22685,8 @@ class MenuItems {
|
|
|
22685
22685
|
return (isNotNil(mainItem?.id) && mainItem.id === otherItem?.id)
|
|
22686
22686
|
|| (mainItem.path === otherItem.path
|
|
22687
22687
|
&& mainItem.parentPath === otherItem.parentPath
|
|
22688
|
-
|
|
22688
|
+
// FIXME: check if can be disabled
|
|
22689
|
+
//&& mainItem.title === otherItem.title
|
|
22689
22690
|
&& this.isSameParams(mainItem.pathParams, otherItem.pathParams));
|
|
22690
22691
|
}
|
|
22691
22692
|
/**
|
|
@@ -22790,6 +22791,7 @@ class MenuService extends StartableObservableService {
|
|
|
22790
22791
|
this.router = router;
|
|
22791
22792
|
this.environment = environment;
|
|
22792
22793
|
this.accountChanges = new BehaviorSubject(undefined);
|
|
22794
|
+
this._detachedItems = [];
|
|
22793
22795
|
this._itemCounter = 0;
|
|
22794
22796
|
this._logPrefix = '[menu-service] ';
|
|
22795
22797
|
this._$opened = new Subject();
|
|
@@ -22802,6 +22804,7 @@ class MenuService extends StartableObservableService {
|
|
|
22802
22804
|
item.id = this._itemCounter++;
|
|
22803
22805
|
return item;
|
|
22804
22806
|
});
|
|
22807
|
+
this._detachedItems = []; // TODO restore from settings ?
|
|
22805
22808
|
}
|
|
22806
22809
|
get opened() {
|
|
22807
22810
|
return this._$opened.asObservable();
|
|
@@ -22868,7 +22871,7 @@ class MenuService extends StartableObservableService {
|
|
|
22868
22871
|
this.accountService.ready(),
|
|
22869
22872
|
this.configService.ready(),
|
|
22870
22873
|
]);
|
|
22871
|
-
await this._loadMenuItems(config, account);
|
|
22874
|
+
const items = await this._loadMenuItems(config, account);
|
|
22872
22875
|
const accountEvent$ = merge(this.accountService.onLogin, this.accountService.onLogout.pipe(map(_ => null))).pipe(distinctUntilChanged((a1, a2) => DateUtils.isSame(a1?.updateDate, a2?.updateDate)), map(account => isNotNil(account?.id) ? account : null));
|
|
22873
22876
|
this.registerSubscription(
|
|
22874
22877
|
// Combine config and account events
|
|
@@ -22879,14 +22882,15 @@ class MenuService extends StartableObservableService {
|
|
|
22879
22882
|
if (this._debug)
|
|
22880
22883
|
console.debug(`${this._logPrefix}Received config or account event. Refreshing items...`, account);
|
|
22881
22884
|
// Load all items
|
|
22882
|
-
await this._loadMenuItems(config, account);
|
|
22885
|
+
const items = await this._loadMenuItems(config, account);
|
|
22886
|
+
this.dataSubject.next(items);
|
|
22883
22887
|
// Emit account changes event
|
|
22884
22888
|
this.accountChanges.next(account);
|
|
22885
22889
|
}));
|
|
22886
22890
|
this.registerSubscription(this._$listenRoute.pipe(filter(listen => listen === true), mergeMap$1(_ => this.router.events), filter(event => event instanceof NavigationEnd), map((event) => MenuItems.parsePathWithQuery(event.url))).subscribe(pathParam => {
|
|
22887
22891
|
this.detachSubMenuItem(pathParam);
|
|
22888
22892
|
}));
|
|
22889
|
-
return
|
|
22893
|
+
return items;
|
|
22890
22894
|
}
|
|
22891
22895
|
_addSubMenuItem(newItem, opts) {
|
|
22892
22896
|
opts = {
|
|
@@ -22909,16 +22913,19 @@ class MenuService extends StartableObservableService {
|
|
|
22909
22913
|
// Replace existing item, but keep the existing id
|
|
22910
22914
|
newItem.id = existingItem.id;
|
|
22911
22915
|
newItem.$children = existingItem.$children;
|
|
22912
|
-
|
|
22913
|
-
const parent = this._findParent(newItem, opts?.availableParents);
|
|
22914
|
-
if (!parent) {
|
|
22915
|
-
console.warn(`${this._logPrefix}Unable to add sub item: no parent found`);
|
|
22916
|
-
return null;
|
|
22916
|
+
newItem.pinned = existingItem.pinned;
|
|
22917
22917
|
}
|
|
22918
22918
|
// Generate item's id (if need)
|
|
22919
22919
|
if (isNil(newItem.id))
|
|
22920
22920
|
newItem.id = this._itemCounter++;
|
|
22921
|
-
this.
|
|
22921
|
+
const parent = this._findParent(newItem, opts?.availableParents);
|
|
22922
|
+
if (parent) {
|
|
22923
|
+
this._addMenuToParent(parent, newItem);
|
|
22924
|
+
}
|
|
22925
|
+
else {
|
|
22926
|
+
console.debug(`${this._logPrefix}Add detached sub item (no parent found)`);
|
|
22927
|
+
this._detachedItems.push(newItem);
|
|
22928
|
+
}
|
|
22922
22929
|
// Start listening route
|
|
22923
22930
|
if (!this._$listenRoute.value)
|
|
22924
22931
|
this._$listenRoute.next(true);
|
|
@@ -22928,8 +22935,11 @@ class MenuService extends StartableObservableService {
|
|
|
22928
22935
|
if (this._debug)
|
|
22929
22936
|
console.debug(`${this._logPrefix}Loading menu items...`);
|
|
22930
22937
|
// Save previous children of root items
|
|
22931
|
-
const
|
|
22932
|
-
.reduce((res, rootItem) =>
|
|
22938
|
+
const detachedItems = (this.data || [])
|
|
22939
|
+
.reduce((res, rootItem) => {
|
|
22940
|
+
rootItem.$children.next([]);
|
|
22941
|
+
return res.concat(rootItem.$children?.value || []);
|
|
22942
|
+
}, []);
|
|
22933
22943
|
// Reset base root items (clean items added by config)
|
|
22934
22944
|
let items = this._staticItems.slice();
|
|
22935
22945
|
// Concat config's items
|
|
@@ -22988,15 +22998,15 @@ class MenuService extends StartableObservableService {
|
|
|
22988
22998
|
return item;
|
|
22989
22999
|
});
|
|
22990
23000
|
// Re-attach sub menu items
|
|
22991
|
-
if (
|
|
22992
|
-
await this.addSubMenuItems(
|
|
23001
|
+
if (detachedItems.length) {
|
|
23002
|
+
await this.addSubMenuItems(detachedItems, { skipIfExists: false, availableParents: detachedItems.concat(items) });
|
|
22993
23003
|
}
|
|
22994
23004
|
if (this._debug)
|
|
22995
23005
|
console.debug(`${this._logPrefix}Found ${items.length} visible items...`);
|
|
22996
|
-
|
|
23006
|
+
return items;
|
|
22997
23007
|
}
|
|
22998
23008
|
_findExistingItem(item, items) {
|
|
22999
|
-
items = items || this.data;
|
|
23009
|
+
items = items || this._detachedItems.concat(this.data);
|
|
23000
23010
|
if (!items.length)
|
|
23001
23011
|
return undefined; // Not found
|
|
23002
23012
|
for (const i of items) {
|
|
@@ -23010,7 +23020,7 @@ class MenuService extends StartableObservableService {
|
|
|
23010
23020
|
_findParent(childItem, availableParents) {
|
|
23011
23021
|
if (!childItem?.path)
|
|
23012
23022
|
return undefined;
|
|
23013
|
-
availableParents = availableParents || this.data;
|
|
23023
|
+
availableParents = availableParents || this._detachedItems.concat(this.data);
|
|
23014
23024
|
return availableParents.reduce((res, item) => {
|
|
23015
23025
|
if (!item?.path)
|
|
23016
23026
|
return res;
|
|
@@ -23331,10 +23341,10 @@ class MenuComponent {
|
|
|
23331
23341
|
}
|
|
23332
23342
|
}
|
|
23333
23343
|
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, deps: [{ token: PlatformService }, { token: AccountService }, { token: i2.NavController }, { token: i2.MenuController }, { token: i2.ModalController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$5.Router }, { token: ENVIRONMENT }, { token: i1$5.ActivatedRoute, optional: true }, { token: APP_MENU_OPTIONS, optional: true }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
23334
|
-
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", appVersion: "appVersion", rxStrategy: "rxStrategy" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\"\n @fadeInSlowAnimation\n class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button type=\"button\" mat-flat-button\n class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n </button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img *ngIf=\"logo; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n <ng-template #noLogo>\n <span style=\"width: 108px;\">{{appName}}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button mat-button type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{accountName}}</b>\n </h3>\n <h4>{{accountEmail}}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center;\">\n <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\" alt=\"logo\">\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n <mat-icon><span>{{splitPane.when ? '«' : '»'}}</span></mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n\n </ion-menu>\n\n <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n <!-- link -->\n <ion-item *ngIf=\"item.path\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n [class.menu-item-sub]=\"level!==0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level !== 0)}\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>{{item.title|translate}}</ion-label>\n\n <!-- pin button -->\n <ion-button *ngIf=\"level > 0\"\n slot=\"end\"\n shape=\"round\" fill=\"clear\" size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinSubMenu($event, item)\">\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n\n </ion-item>\n\n <!-- action -->\n <ion-item *ngIf=\"item.action\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}} text-1x\"\n tappable\n (click)=\"doAction(item.action, $event)\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item>\n\n <!-- divider -->\n <ion-item-divider @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n *ngIf=\"!item.path && !item.action\">\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item-divider>\n\n <!-- children -->\n <div *ngIf=\"item?.$children\" class=\"ion-margin-start\">\n <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 33px;--padding-vertical: 8px;--padding-horizontal: 16px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{height:calc(var(--min-height) / 2);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i9$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23344
|
+
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", appVersion: "appVersion", rxStrategy: "rxStrategy" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\"\n @fadeInSlowAnimation\n class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button type=\"button\" mat-flat-button\n class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n </button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img *ngIf=\"logo; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n <ng-template #noLogo>\n <span style=\"width: 108px;\">{{appName}}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button mat-button type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{accountName}}</b>\n </h3>\n <h4>{{accountEmail}}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center;\">\n <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\" alt=\"logo\">\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n <mat-icon><span>{{splitPane.when ? '«' : '»'}}</span></mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n\n </ion-menu>\n\n <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n <!-- link -->\n <ion-item *ngIf=\"item.path\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n [class.menu-item-sub]=\"level!==0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level !== 0)}\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>\n <span *ngIf=\"item.title; else skeletonText\" [innerHTML]=\"item.title|translate\"></span>\n </ion-label>\n\n <!-- pin button -->\n <ion-button *ngIf=\"level > 0\"\n slot=\"end\"\n shape=\"round\" fill=\"clear\" size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinSubMenu($event, item)\">\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n\n </ion-item>\n\n <!-- action -->\n <ion-item *ngIf=\"item.action\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}} text-1x\"\n tappable\n (click)=\"doAction(item.action, $event)\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item>\n\n <!-- divider -->\n <ion-item-divider @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n *ngIf=\"!item.path && !item.action\">\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item-divider>\n\n <!-- children -->\n <div *ngIf=\"item?.$children\" class=\"ion-margin-start\">\n <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 33px;--padding-vertical: 8px;--padding-horizontal: 16px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{height:calc(var(--min-height) / 2);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i9$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23335
23345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
23336
23346
|
type: Component,
|
|
23337
|
-
args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\"\n @fadeInSlowAnimation\n class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button type=\"button\" mat-flat-button\n class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n </button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img *ngIf=\"logo; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n <ng-template #noLogo>\n <span style=\"width: 108px;\">{{appName}}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button mat-button type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{accountName}}</b>\n </h3>\n <h4>{{accountEmail}}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center;\">\n <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\" alt=\"logo\">\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n <mat-icon><span>{{splitPane.when ? '«' : '»'}}</span></mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n\n </ion-menu>\n\n <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n <!-- link -->\n <ion-item *ngIf=\"item.path\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n [class.menu-item-sub]=\"level!==0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level !== 0)}\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>{{item.title|translate}}</ion-label>\n\n <!-- pin button -->\n <ion-button *ngIf=\"level > 0\"\n slot=\"end\"\n shape=\"round\" fill=\"clear\" size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinSubMenu($event, item)\">\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n\n </ion-item>\n\n <!-- action -->\n <ion-item *ngIf=\"item.action\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}} text-1x\"\n tappable\n (click)=\"doAction(item.action, $event)\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item>\n\n <!-- divider -->\n <ion-item-divider @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n *ngIf=\"!item.path && !item.action\">\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item-divider>\n\n <!-- children -->\n <div *ngIf=\"item?.$children\" class=\"ion-margin-start\">\n <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 33px;--padding-vertical: 8px;--padding-horizontal: 16px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{height:calc(var(--min-height) / 2);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
|
|
23347
|
+
args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n <ion-header>\n\n <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\"\n @fadeInSlowAnimation\n class=\"user-toolbar\">\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <button type=\"button\" mat-flat-button\n class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n </button>\n </ion-col>\n <ion-col size=\"8\" class=\"user-logo\">\n <img *ngIf=\"logo; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n <ng-template #noLogo>\n <span style=\"width: 108px;\">{{appName}}</span>\n </ng-template>\n </ion-col>\n </ion-row>\n <ion-row class=\"ion-no-padding\">\n <ion-col>\n <button mat-button type=\"button\"\n [routerLink]=\"['/account']\"\n routerDirection=\"root\"\n routerLinkActive=\"ion-color-primary\"\n (click)=\"close()\"\n [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n <h3 class=\"no-margin username\">\n <b>{{accountName}}</b>\n </h3>\n <h4>{{accountEmail}}</h4>\n </ion-label>\n </button>\n </ion-col>\n\n <!-- Insertion headerBottomRight -->\n <ion-col size=\"auto\">\n <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </ion-toolbar>\n\n <!-- User not logged -->\n <ng-template #notLogin>\n <mat-toolbar class=\"ion-padding\"\n *ngIf=\"!loading\"\n style=\"height: unset; display: block; margin: auto; text-align: center;\">\n <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\" alt=\"logo\">\n <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n </mat-toolbar>\n </ng-template>\n </ion-header>\n\n <ion-content [class.has-user-header]=\"isLogin\">\n <!-- will close the menu, after a click, in mobile -->\n <ion-menu-toggle auto-hide=\"false\">\n <ion-list lines=\"none\" *ngIf=\"!loading\">\n <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n </ng-container>\n </ion-list>\n </ion-menu-toggle>\n </ion-content>\n\n <ion-footer class=\"hidden-xs hidden-sm\">\n <ion-toolbar>\n\n <ion-buttons slot=\"start\">\n <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n </ion-button>\n </ion-buttons>\n\n <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n </ion-title>\n\n <ion-buttons slot=\"end\">\n <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n class=\"hidden-xs hidden-sm hidden-md\"\n [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n <mat-icon><span>{{splitPane.when ? '«' : '»'}}</span></mat-icon>\n </button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n\n </ion-menu>\n\n <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n <!-- link -->\n <ion-item *ngIf=\"item.path\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n [class.menu-item-sub]=\"level!==0\"\n tappable\n [routerLink]=\"item.path\"\n [queryParams]=\"item.pathParams\"\n routerDirection=\"root\"\n routerLinkActive=\"selected\"\n [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level !== 0)}\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>\n <span *ngIf=\"item.title; else skeletonText\" [innerHTML]=\"item.title|translate\"></span>\n </ion-label>\n\n <!-- pin button -->\n <ion-button *ngIf=\"level > 0\"\n slot=\"end\"\n shape=\"round\" fill=\"clear\" size=\"small\"\n [class.visible-hover]=\"!item.pinned\"\n (click)=\"togglePinSubMenu($event, item)\">\n <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n </ion-button>\n\n </ion-item>\n\n <!-- action -->\n <ion-item *ngIf=\"item.action\"\n @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}} text-1x\"\n tappable\n (click)=\"doAction(item.action, $event)\">\n <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item>\n\n <!-- divider -->\n <ion-item-divider @fadeInSlowAnimation\n class=\"{{item.cssClass}} {{item.color}}\"\n *ngIf=\"!item.path && !item.action\">\n <ion-label>{{item.title|translate}}</ion-label>\n </ion-item-divider>\n\n <!-- children -->\n <div *ngIf=\"item?.$children\" class=\"ion-margin-start\">\n <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 33px;--padding-vertical: 8px;--padding-horizontal: 16px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{height:calc(var(--min-height) / 2);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
|
|
23338
23348
|
}], ctorParameters: function () { return [{ type: PlatformService }, { type: AccountService }, { type: i2.NavController }, { type: i2.MenuController }, { type: i2.ModalController }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$5.Router }, { type: undefined, decorators: [{
|
|
23339
23349
|
type: Inject,
|
|
23340
23350
|
args: [ENVIRONMENT]
|
|
@@ -23384,7 +23394,8 @@ class SubMenuTabDirective {
|
|
|
23384
23394
|
this._addItemToMenu();
|
|
23385
23395
|
}
|
|
23386
23396
|
ngOnChanges(changes) {
|
|
23387
|
-
if (changes.disabled || changes.label || changes.parentPath) {
|
|
23397
|
+
if (changes.disabled || changes.label || changes.subMenuTitle || changes.parentPath || changes.path) {
|
|
23398
|
+
console.log('TODO received tab=' + (this.subMenuTitle || this.label), this.path);
|
|
23388
23399
|
if (this.disabled) {
|
|
23389
23400
|
if (this._menuItem)
|
|
23390
23401
|
this.menuService.removeSubMenuItem(this._menuItem);
|
|
@@ -23399,7 +23410,7 @@ class SubMenuTabDirective {
|
|
|
23399
23410
|
const pathParams = index === 0 ? {} : { tab: index.toString() };
|
|
23400
23411
|
const parentPath = index === 0 ? this.parentPath : this.path;
|
|
23401
23412
|
return MenuItems.prepareItem({
|
|
23402
|
-
title: this.subMenuTitle
|
|
23413
|
+
title: isNotNil(this.subMenuTitle) ? this.subMenuTitle : this.label,
|
|
23403
23414
|
parentPath,
|
|
23404
23415
|
icon: 'none',
|
|
23405
23416
|
path: this.path,
|
|
@@ -23409,13 +23420,13 @@ class SubMenuTabDirective {
|
|
|
23409
23420
|
async _addItemToMenu() {
|
|
23410
23421
|
let menuItem = this._computeMenuItem();
|
|
23411
23422
|
if (this._menuItem) {
|
|
23423
|
+
if (menuItem.title === this._menuItem.title && MenuItems.isSame(menuItem, this._menuItem))
|
|
23424
|
+
return; // Skip if no changes
|
|
23412
23425
|
menuItem.id = this._menuItem.id;
|
|
23413
23426
|
}
|
|
23414
|
-
if (!menuItem.parentPath)
|
|
23415
|
-
|
|
23416
|
-
|
|
23417
|
-
return; // Skip if no title
|
|
23418
|
-
menuItem = await this.menuService.addSubMenuItem(menuItem, { skipIfExists: isNil(menuItem.id) });
|
|
23427
|
+
//if (!menuItem.parentPath) return; // Skip if no parent
|
|
23428
|
+
//if (isNil(menuItem.title)) return; // Skip if no title
|
|
23429
|
+
menuItem = await this.menuService.addSubMenuItem(menuItem, { skipIfExists: false });
|
|
23419
23430
|
this._menuItem = menuItem;
|
|
23420
23431
|
}
|
|
23421
23432
|
}
|
|
@@ -36322,12 +36333,18 @@ class MenuTestingPage extends AppTabEditor {
|
|
|
36322
36333
|
this.menuService = menuService;
|
|
36323
36334
|
this.logPrefix = '[menu-testing] ';
|
|
36324
36335
|
this.childPath = '';
|
|
36325
|
-
this.title = '';
|
|
36326
36336
|
this.thirdTabTitle = '';
|
|
36327
36337
|
this.parentPath = null;
|
|
36328
36338
|
this.showOtherLinks = true;
|
|
36339
|
+
this.$title = new BehaviorSubject('');
|
|
36329
36340
|
this.$secondTabTitle = new BehaviorSubject('Second');
|
|
36330
36341
|
}
|
|
36342
|
+
set title(value) {
|
|
36343
|
+
this.$title.next(value);
|
|
36344
|
+
}
|
|
36345
|
+
get title() {
|
|
36346
|
+
return this.$title.value;
|
|
36347
|
+
}
|
|
36331
36348
|
set secondTabTitle(value) {
|
|
36332
36349
|
this.$secondTabTitle.next(value);
|
|
36333
36350
|
}
|
|
@@ -36358,6 +36375,17 @@ class MenuTestingPage extends AppTabEditor {
|
|
|
36358
36375
|
save(event, options) {
|
|
36359
36376
|
return Promise.resolve(false);
|
|
36360
36377
|
}
|
|
36378
|
+
changeTitle(event) {
|
|
36379
|
+
this.title = '';
|
|
36380
|
+
setTimeout(() => {
|
|
36381
|
+
const time = DateUtils.moment().format('HH:mm:ss');
|
|
36382
|
+
this.title = `${this.getDefaultTitle()} <b>${time}</b>`;
|
|
36383
|
+
}, 2000);
|
|
36384
|
+
}
|
|
36385
|
+
changeSecondTabTitle(event) {
|
|
36386
|
+
const time = DateUtils.moment().format('HH:mm:ss');
|
|
36387
|
+
this.secondTabTitle = `<small>${time}<br/></small>Second`;
|
|
36388
|
+
}
|
|
36361
36389
|
enableMenu(value) {
|
|
36362
36390
|
this.menuService.enable(value);
|
|
36363
36391
|
}
|
|
@@ -36365,7 +36393,7 @@ class MenuTestingPage extends AppTabEditor {
|
|
|
36365
36393
|
this.menuService.toggleSplitPaneWhen();
|
|
36366
36394
|
}
|
|
36367
36395
|
async initSubMenu() {
|
|
36368
|
-
this.title =
|
|
36396
|
+
this.title = await this.computeTitle();
|
|
36369
36397
|
this.secondTabTitle = 'Others';
|
|
36370
36398
|
this.thirdTabTitle = 'Third';
|
|
36371
36399
|
this.parentPath = '/testing';
|
|
@@ -36376,12 +36404,18 @@ class MenuTestingPage extends AppTabEditor {
|
|
|
36376
36404
|
getFirstInvalidTabIndex() {
|
|
36377
36405
|
return 0;
|
|
36378
36406
|
}
|
|
36407
|
+
getDefaultTitle() {
|
|
36408
|
+
return 'Menu';
|
|
36409
|
+
}
|
|
36410
|
+
async computeTitle() {
|
|
36411
|
+
return this.getDefaultTitle();
|
|
36412
|
+
}
|
|
36379
36413
|
}
|
|
36380
36414
|
MenuTestingPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuTestingPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
|
|
36381
|
-
MenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuTestingPage, selector: "app-testing-menu", viewQueries: [{ propertyName: "toggleThird", first: true, predicate: ["toggleThird"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title
|
|
36415
|
+
MenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuTestingPage, selector: "app-testing-menu", viewQueries: [{ propertyName: "toggleThird", first: true, predicate: ["toggleThird"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title [innerHTML]=\"$title|async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n\n <mat-tab-group #tabGroup\n [(selectedIndex)]=\"selectedTabIndex\"\n (selectedTabChange)=\"onTabChange($event)\"\n dynamicHeight>\n\n <!-- TAB: 1 -->\n <mat-tab appSubMenuTab label=\"Details\" class=\"ion-padding\"\n [subMenuTitle]=\"$title|async\" [parentPath]=\"parentPath\">\n <ng-template mat-tab-label>\n <ion-label>Details</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A first tab</p>\n\n <p>\n <ion-toggle #toggleThird>\n Toggle Third Tab\n </ion-toggle>\n </p>\n\n <p>\n <ion-button (click)=\"changeTitle($event)\">\n Reload page title\n </ion-button>\n \n <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n Disable menu\n </ion-button>\n <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n Enable menu\n </ion-button>\n <ion-button (click)=\"toggleSplitPaneWhen()\"\n [disabled]=\"!(menuService.enabled|async)\">\n Toggle split pane\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 2 -->\n <mat-tab appSubMenuTab\n [subMenuTitle]=\"$secondTabTitle|async\"\n label=\"Second\" class=\"ion-padding\">\n <ng-template mat-tab-label>\n <ion-label [innerHTML]=\"$secondTabTitle|async\"></ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A second tab</p>\n\n <p *ngIf=\"showOtherLinks\">\n Navigate to : <a [routerLink]=\"childPath+'/1'\" >\n {{ childPath }}/1\n </a>\n <br/>\n Navigate to : <a [routerLink]=\"childPath+'/2'\" >\n {{ childPath }}/2\n </a>\n </p>\n\n <p>\n <ion-button (click)=\"changeSecondTabTitle($event)\">\n Change tab label\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 3 -->\n <mat-tab appSubMenuTab [label]=\"thirdTabTitle\"\n class=\"ion-padding\" [disabled]=\"!toggleThird.checked\">\n <ng-template mat-tab-label>\n <ion-label>{{thirdTabTitle}}</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n A third tab\n </div>\n\n </mat-tab>\n </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i7$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i7$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
|
|
36382
36416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuTestingPage, decorators: [{
|
|
36383
36417
|
type: Component,
|
|
36384
|
-
args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title
|
|
36418
|
+
args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title [innerHTML]=\"$title|async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n\n <mat-tab-group #tabGroup\n [(selectedIndex)]=\"selectedTabIndex\"\n (selectedTabChange)=\"onTabChange($event)\"\n dynamicHeight>\n\n <!-- TAB: 1 -->\n <mat-tab appSubMenuTab label=\"Details\" class=\"ion-padding\"\n [subMenuTitle]=\"$title|async\" [parentPath]=\"parentPath\">\n <ng-template mat-tab-label>\n <ion-label>Details</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A first tab</p>\n\n <p>\n <ion-toggle #toggleThird>\n Toggle Third Tab\n </ion-toggle>\n </p>\n\n <p>\n <ion-button (click)=\"changeTitle($event)\">\n Reload page title\n </ion-button>\n \n <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n Disable menu\n </ion-button>\n <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n Enable menu\n </ion-button>\n <ion-button (click)=\"toggleSplitPaneWhen()\"\n [disabled]=\"!(menuService.enabled|async)\">\n Toggle split pane\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 2 -->\n <mat-tab appSubMenuTab\n [subMenuTitle]=\"$secondTabTitle|async\"\n label=\"Second\" class=\"ion-padding\">\n <ng-template mat-tab-label>\n <ion-label [innerHTML]=\"$secondTabTitle|async\"></ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A second tab</p>\n\n <p *ngIf=\"showOtherLinks\">\n Navigate to : <a [routerLink]=\"childPath+'/1'\" >\n {{ childPath }}/1\n </a>\n <br/>\n Navigate to : <a [routerLink]=\"childPath+'/2'\" >\n {{ childPath }}/2\n </a>\n </p>\n\n <p>\n <ion-button (click)=\"changeSecondTabTitle($event)\">\n Change tab label\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 3 -->\n <mat-tab appSubMenuTab [label]=\"thirdTabTitle\"\n class=\"ion-padding\" [disabled]=\"!toggleThird.checked\">\n <ng-template mat-tab-label>\n <ion-label>{{thirdTabTitle}}</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n A third tab\n </div>\n\n </mat-tab>\n </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
|
|
36385
36419
|
}], ctorParameters: function () { return [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2.NavController }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: MenuService }]; }, propDecorators: { toggleThird: [{
|
|
36386
36420
|
type: ViewChild,
|
|
36387
36421
|
args: ['toggleThird']
|
|
@@ -36395,21 +36429,29 @@ class OtherMenuTestingPage extends MenuTestingPage {
|
|
|
36395
36429
|
this.showOtherLinks = false;
|
|
36396
36430
|
}
|
|
36397
36431
|
async initSubMenu() {
|
|
36398
|
-
|
|
36399
|
-
this.title = 'Other' + otherId;
|
|
36432
|
+
this.title = await this.computeTitle();
|
|
36400
36433
|
this.secondTabTitle = 'Second';
|
|
36401
36434
|
this.parentPath = '/testing/shared/menu?tab=1';
|
|
36402
36435
|
this.childPath = '';
|
|
36403
|
-
const path = '/testing/shared/menu/others/' + otherId;
|
|
36436
|
+
const path = '/testing/shared/menu/others/' + this.route.snapshot.paramMap.get('otherId');
|
|
36404
36437
|
const parentPath = '/testing/shared/menu?tab=1';
|
|
36405
36438
|
console.debug(`${this.logPrefix} Setup with`, { path, parentPath });
|
|
36406
36439
|
}
|
|
36440
|
+
getDefaultTitle() {
|
|
36441
|
+
return 'Other';
|
|
36442
|
+
}
|
|
36443
|
+
async computeTitle() {
|
|
36444
|
+
// Load title (with a delay (e.g. when loading data)
|
|
36445
|
+
await sleep(2000);
|
|
36446
|
+
const otherId = this.route.snapshot.paramMap.get('otherId');
|
|
36447
|
+
return this.getDefaultTitle() + ' ' + otherId;
|
|
36448
|
+
}
|
|
36407
36449
|
}
|
|
36408
36450
|
OtherMenuTestingPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OtherMenuTestingPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
|
|
36409
|
-
OtherMenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OtherMenuTestingPage, selector: "app-testing-menu-other", usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title
|
|
36451
|
+
OtherMenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OtherMenuTestingPage, selector: "app-testing-menu-other", usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title [innerHTML]=\"$title|async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n\n <mat-tab-group #tabGroup\n [(selectedIndex)]=\"selectedTabIndex\"\n (selectedTabChange)=\"onTabChange($event)\"\n dynamicHeight>\n\n <!-- TAB: 1 -->\n <mat-tab appSubMenuTab label=\"Details\" class=\"ion-padding\"\n [subMenuTitle]=\"$title|async\" [parentPath]=\"parentPath\">\n <ng-template mat-tab-label>\n <ion-label>Details</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A first tab</p>\n\n <p>\n <ion-toggle #toggleThird>\n Toggle Third Tab\n </ion-toggle>\n </p>\n\n <p>\n <ion-button (click)=\"changeTitle($event)\">\n Reload page title\n </ion-button>\n \n <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n Disable menu\n </ion-button>\n <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n Enable menu\n </ion-button>\n <ion-button (click)=\"toggleSplitPaneWhen()\"\n [disabled]=\"!(menuService.enabled|async)\">\n Toggle split pane\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 2 -->\n <mat-tab appSubMenuTab\n [subMenuTitle]=\"$secondTabTitle|async\"\n label=\"Second\" class=\"ion-padding\">\n <ng-template mat-tab-label>\n <ion-label [innerHTML]=\"$secondTabTitle|async\"></ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A second tab</p>\n\n <p *ngIf=\"showOtherLinks\">\n Navigate to : <a [routerLink]=\"childPath+'/1'\" >\n {{ childPath }}/1\n </a>\n <br/>\n Navigate to : <a [routerLink]=\"childPath+'/2'\" >\n {{ childPath }}/2\n </a>\n </p>\n\n <p>\n <ion-button (click)=\"changeSecondTabTitle($event)\">\n Change tab label\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 3 -->\n <mat-tab appSubMenuTab [label]=\"thirdTabTitle\"\n class=\"ion-padding\" [disabled]=\"!toggleThird.checked\">\n <ng-template mat-tab-label>\n <ion-label>{{thirdTabTitle}}</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n A third tab\n </div>\n\n </mat-tab>\n </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SubMenuTabDirective, selector: "[appSubMenuTab]", inputs: ["label", "disabled", "parentPath", "path", "subMenuTitle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i7$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i7$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
|
|
36410
36452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OtherMenuTestingPage, decorators: [{
|
|
36411
36453
|
type: Component,
|
|
36412
|
-
args: [{ selector: 'app-testing-menu-other', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title
|
|
36454
|
+
args: [{ selector: 'app-testing-menu-other', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n <ion-title [innerHTML]=\"$title|async\"></ion-title>\n</app-toolbar>\n\n<ion-content>\n\n <mat-tab-group #tabGroup\n [(selectedIndex)]=\"selectedTabIndex\"\n (selectedTabChange)=\"onTabChange($event)\"\n dynamicHeight>\n\n <!-- TAB: 1 -->\n <mat-tab appSubMenuTab label=\"Details\" class=\"ion-padding\"\n [subMenuTitle]=\"$title|async\" [parentPath]=\"parentPath\">\n <ng-template mat-tab-label>\n <ion-label>Details</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A first tab</p>\n\n <p>\n <ion-toggle #toggleThird>\n Toggle Third Tab\n </ion-toggle>\n </p>\n\n <p>\n <ion-button (click)=\"changeTitle($event)\">\n Reload page title\n </ion-button>\n \n <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n Disable menu\n </ion-button>\n <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n Enable menu\n </ion-button>\n <ion-button (click)=\"toggleSplitPaneWhen()\"\n [disabled]=\"!(menuService.enabled|async)\">\n Toggle split pane\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 2 -->\n <mat-tab appSubMenuTab\n [subMenuTitle]=\"$secondTabTitle|async\"\n label=\"Second\" class=\"ion-padding\">\n <ng-template mat-tab-label>\n <ion-label [innerHTML]=\"$secondTabTitle|async\"></ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n <p>A second tab</p>\n\n <p *ngIf=\"showOtherLinks\">\n Navigate to : <a [routerLink]=\"childPath+'/1'\" >\n {{ childPath }}/1\n </a>\n <br/>\n Navigate to : <a [routerLink]=\"childPath+'/2'\" >\n {{ childPath }}/2\n </a>\n </p>\n\n <p>\n <ion-button (click)=\"changeSecondTabTitle($event)\">\n Change tab label\n </ion-button>\n </p>\n </div>\n\n </mat-tab>\n\n <!-- TAB: 3 -->\n <mat-tab appSubMenuTab [label]=\"thirdTabTitle\"\n class=\"ion-padding\" [disabled]=\"!toggleThird.checked\">\n <ng-template mat-tab-label>\n <ion-label>{{thirdTabTitle}}</ion-label>\n </ng-template>\n\n <div class=\"ion-padding\">\n A third tab\n </div>\n\n </mat-tab>\n </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
|
|
36413
36455
|
}], ctorParameters: function () { return [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2.NavController }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: MenuService }]; } });
|
|
36414
36456
|
|
|
36415
36457
|
const routes$4 = [
|