ionic-side-menu
Version:
1 lines • 9.09 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"SideMenuOptions":{"__symbolic":"interface"},"SideMenuHeader":{"__symbolic":"interface"},"SideMenuProfile":{"__symbolic":"interface"},"SideMenu":{"__symbolic":"interface"},"SideMenuItem":{"__symbolic":"interface"},"SideMenuBadge":{"__symbolic":"interface"},"SideMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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))))}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setHeaderStyle":[{"__symbolic":"method"}]}},"IonicSideMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@ionic/angular","name":"IonicModule","line":9,"character":26},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":9,"character":39}],"declarations":[{"__symbolic":"reference","name":"SideMenuComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SideMenuComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"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)}"]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"depth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":19,"character":32},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":19,"character":62}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"SideMenuOptions":"./lib/shared/models/side-menu.model","SideMenuHeader":"./lib/shared/models/side-menu.model","SideMenuProfile":"./lib/shared/models/side-menu.model","SideMenu":"./lib/shared/models/side-menu.model","SideMenuItem":"./lib/shared/models/side-menu.model","SideMenuBadge":"./lib/shared/models/side-menu.model","SideMenuComponent":"./lib/components/side-menu/side-menu.component","IonicSideMenuModule":"./lib/ionic-side-menu.module","ɵa":"./lib/components/side-menu-item/side-menu-item.component"},"importAs":"ionic-side-menu"}