ionic-side-menu
Version:
2 lines • 9.66 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/common"),require("@ionic/angular"),require("@angular/core"),require("@angular/platform-browser"),require("@angular/router"),require("rxjs")):"function"==typeof define&&define.amd?define("ionic-side-menu",["exports","@angular/common","@ionic/angular","@angular/core","@angular/platform-browser","@angular/router","rxjs"],n):n(e["ionic-side-menu"]={},e.ng.common,e.angular,e.ng.core,e.ng.platformBrowser,e.ng.router,e.rxjs)}(this,function(e,n,t,r,i,a,l){"use strict";var o=function(){function e(){this.isObservable=l.isObservable}return e.prototype.ngOnInit=function(){},e.prototype.setHeaderStyle=function(e){var n={};return e.background&&(n["background-image"]="url("+e.background+")"),e.menus&&e.menus.length&&(n.cursor="pointer"),n},e.decorators=[{type:r.Component,args:[{selector:"ion-side-menu",template:'<div *ngIf="options.header as header" class="header"\r\n [ngStyle]="setHeaderStyle(header)" (click)="header.menus &&\r\n header.menus.length && expanded=!expanded">\r\n <ng-container *ngIf="header.profile as profile">\r\n <div *ngIf="isObservable(profile); then asyncProfileTemplate else\r\n normalProfileTemplate"></div>\r\n <ng-template #asyncProfileTemplate>\r\n <ng-container *ngTemplateOutlet="profileTemplate; context: { profile:\r\n profile | async }"></ng-container>\r\n </ng-template>\r\n <ng-template #normalProfileTemplate>\r\n <ng-container *ngTemplateOutlet="profileTemplate; context: { profile:\r\n profile }"></ng-container>\r\n </ng-template>\r\n <ng-template #profileTemplate let-profile="profile">\r\n <div class="profile">\r\n <img class="picture" [src]="profile.picture">\r\n <h2 class="name">{{ profile.name }}</h2>\r\n <p *ngIf="profile.email" class="email">{{ profile.email }}</p>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <ion-icon *ngIf="header.menus && header.menus.length" [name]="expanded ?\r\n \'arrow-dropup\' : \'arrow-dropdown\'"></ion-icon>\r\n</div>\r\n\r\n<div *ngIf="expanded; then profileMenuTemplate else normalMenuTemplate"></div>\r\n<ng-template #profileMenuTemplate>\r\n <ng-container *ngTemplateOutlet="menuTemplate; context: { menus:\r\n options.header.menus }"></ng-container>\r\n</ng-template>\r\n<ng-template #normalMenuTemplate>\r\n <ng-container *ngTemplateOutlet="menuTemplate; context: { menus: options.menus\r\n }"></ng-container>\r\n</ng-template>\r\n<ng-template #menuTemplate let-menus="menus">\r\n <ion-list *ngFor="let menu of menus" class="content" no-padding lines="none">\r\n <div [hidden]="isObservable(menu.hidden) ? (menu.hidden | async) :\r\n menu.hidden">\r\n <ion-list-header *ngIf="menu.header">{{ menu.header }}</ion-list-header>\r\n <ion-side-menu-item *ngFor="let item of menu.items" [item]="item"\r\n (click)="expanded=false"></ion-side-menu-item>\r\n <hr *ngIf="menu.type === \'divider\'" class="divider">\r\n </div>\r\n </ion-list>\r\n</ng-template>\r\n',styles:[".header{position:relative;height:160px;border-bottom:1px solid var(--ion-item-border-color,var(--ion-border-color,var(--ion-color-step-150,rgba(0,0,0,.13))));padding:16px;margin-bottom:8px;background:var(--ion-side-menu-header-background,var(--ion-text-color,#000));background-repeat:no-repeat;background-position:center;background-size:cover;color:var(--ion-side-menu-header-color,var(--ion-background-color,#fff));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header .profile{height:128px;padding-right:40px}.header .profile .picture{width:64px;height:64px;border-radius:50%}.header .profile .email,.header .profile .name{margin:0;font-size:14px;line-height:24px}.header .profile .name{margin-top:16px;font-weight:500}.header .profile .email{font-weight:400}.header ion-icon{position:absolute;bottom:16px;right:16px;font-size:24px}.content ion-list-header{margin-top:-8px;color:var(--ion-color-step-400,#999)}.content .divider{border-bottom:1px solid var(--ion-item-border-color,var(--ion-border-color,var(--ion-color-step-150,rgba(0,0,0,.13))))}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={options:[{type:r.Input}]},e}();function s(r,i){var o,a,l,e,s={label:0,sent:function(){if(1&l[0])throw l[1];return l[1]},trys:[],ops:[]};return e={next:n(0),"throw":n(1),"return":n(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function n(n){return function(e){return function t(e){if(o)throw new TypeError("Generator is already executing.");for(;s;)try{if(o=1,a&&(l=2&e[0]?a["return"]:e[0]?a["throw"]||((l=a["return"])&&l.call(a),0):a.next)&&!(l=l.call(a,e[1])).done)return l;switch(a=0,l&&(e=[2&e[0],l.value]),e[0]){case 0:case 1:l=e;break;case 4:return s.label++,{value:e[1],done:!1};case 5:s.label++,a=e[1],e=[0];continue;case 7:e=s.ops.pop(),s.trys.pop();continue;default:if(!(l=0<(l=s.trys).length&&l[l.length-1])&&(6===e[0]||2===e[0])){s=0;continue}if(3===e[0]&&(!l||e[1]>l[0]&&e[1]<l[3])){s.label=e[1];break}if(6===e[0]&&s.label<l[1]){s.label=l[1],l=e;break}if(l&&s.label<l[2]){s.label=l[2],s.ops.push(e);break}l[2]&&s.ops.pop(),s.trys.pop();continue}e=i.call(r,s)}catch(n){e=[6,n],a=0}finally{o=l=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([n,e])}}}var d=function(){function e(e,n){this.sanitizer=e,this.router=n,this.depth=0,this.isObservable=l.isObservable}return e.prototype.ngOnInit=function(){return function e(n,a,l,s){return new(l||(l=Promise))(function(e,t){function r(e){try{o(s.next(e))}catch(n){t(n)}}function i(e){try{o(s["throw"](e))}catch(n){t(n)}}function o(n){n.done?e(n.value):new l(function(e){e(n.value)}).then(r,i)}o((s=s.apply(n,a||[])).next())})}(this,void 0,void 0,function(){var n,t,r,i,o=this;return s(this,function(e){switch(e.label){case 0:return l.isObservable(this.item.disabled)?[4,this.item.disabled.toPromise()]:[3,2];case 1:return t=e.sent(),[3,3];case 2:t=this.item.disabled,e.label=3;case 3:return n=t,l.isObservable(this.item.hidden)?[4,this.item.hidden.toPromise()]:[3,5];case 4:return i=e.sent(),[3,6];case 5:i=this.item.hidden,e.label=6;case 6:return r=i,this.router.events.subscribe(function(e){e instanceof a.NavigationEnd&&(!e.urlAfterRedirects.startsWith(o.item.url)||n||r||(o.expanded=!0))}),!this.router.url.startsWith(this.item.url)||n||r||(this.expanded=!0),[2]}})})},e.decorators=[{type:r.Component,args:[{selector:"ion-side-menu-item",template:'<div *ngIf="item.children && item.children.length; then parentItemTemplate else\r\n normalItemTemplate"></div>\r\n<ng-template #parentItemTemplate>\r\n <ion-item [style]="sanitizer.bypassSecurityTrustStyle(\'--padding-start: \' +\r\n (depth + 1) * 16 + \'px\')" button detail="false" (click)="expanded=!expanded"\r\n [disabled]="isObservable(item.disabled) ? (item.disabled | async) :\r\n item.disabled" [hidden]="isObservable(item.hidden) ? (item.hidden | async) :\r\n item.hidden">\r\n <ng-container *ngTemplateOutlet="itemTemplate; context: { item: item }"></ng-container>\r\n <ion-icon slot="end" [name]="expanded ? \'arrow-dropup\' : \'arrow-dropdown\'"></ion-icon>\r\n </ion-item>\r\n <ng-container *ngIf="expanded">\r\n <ion-side-menu-item *ngFor="let child of item.children" [item]="child"\r\n [depth]="depth + 1"></ion-side-menu-item>\r\n </ng-container>\r\n</ng-template>\r\n<ng-template #normalItemTemplate>\r\n <ion-menu-toggle auto-hide="false">\r\n <ion-item [style]="sanitizer.bypassSecurityTrustStyle(\'--padding-start: \' +\r\n (depth + 1) * 16 + \'px\')" [routerLink]="item.url ? item.url : []"\r\n [routerLinkActive]="item.url ? \'active\' : []" [routerDirection]="item.url\r\n && \'root\'" (click)="item.handler && item.handler()"\r\n [disabled]="isObservable(item.disabled) ? (item.disabled | async) :\r\n item.disabled" [hidden]="isObservable(item.hidden) ? (item.hidden | async)\r\n : item.hidden">\r\n <ng-container *ngTemplateOutlet="itemTemplate; context: { item: item }"></ng-container>\r\n </ion-item>\r\n </ion-menu-toggle>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item="item">\r\n <ion-icon *ngIf="item.icon" slot="start" [name]="item.icon"></ion-icon>\r\n <ion-label>{{ item.label }}</ion-label>\r\n <ng-container *ngIf="item.badge as badge">\r\n <div *ngIf="isObservable(badge); then asyncBadgeTemplate else\r\n normalBadgeTemplate"></div>\r\n <ng-template #asyncBadgeTemplate>\r\n <ng-container *ngTemplateOutlet="badgeTemplate; context: { badge: badge |\r\n async }"></ng-container>\r\n </ng-template>\r\n <ng-template #normalBadgeTemplate>\r\n <ng-container *ngTemplateOutlet="badgeTemplate; context: { badge: badge\r\n }"></ng-container>\r\n </ng-template>\r\n <ng-template #badgeTemplate let-badge="badge">\r\n <ion-badge slot="end" [color]="badge.color">{{ badge.text }}</ion-badge>\r\n </ng-template>\r\n </ng-container>\r\n</ng-template>\r\n',styles:["ion-item{color:var(--ion-color-step-600,#666)}.active{--background:var(--border-color)}.active ion-icon,.active ion-label{color:var(--ion-color-primary,#3880ff)}"]}]}],e.ctorParameters=function(){return[{type:i.DomSanitizer},{type:a.Router}]},e.propDecorators={item:[{type:r.Input}],depth:[{type:r.Input}]},e}(),m=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[n.CommonModule,t.IonicModule,a.RouterModule],declarations:[o,d],exports:[o]}]}],e}();e.SideMenuComponent=o,e.IonicSideMenuModule=m,e.ɵa=d,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ionic-side-menu.umd.min.js.map