@junte/ui
Version:
Quality Angular UI components kit
73 lines • 10.8 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, ContentChild, HostBinding, Input, TemplateRef } from '@angular/core';
import { DeviceService } from '../../responsive/device.service';
import { ContentApi } from '../../../core/decorators/api';
import { BreakpointService } from '../../responsive/breakpoint.service';
import { Breakpoint } from '../../../core/enums/breakpoint';
import { UI } from '../../../core/enums/ui';
import { I18N_PROVIDERS } from '../../../core/i18n/providers';
import { MenuComponent } from '../../../navigation/menu/menu.component';
const ASIDE_STATE = 'aside_collapsed';
let AppAsideComponent = class AppAsideComponent {
constructor(breakpoint, device) {
this.breakpoint = breakpoint;
this.device = device;
this.host = 'jnt-app-aside-host';
this.ui = UI;
this.opened = false;
}
set collapsed(collapsed) {
this._collapsed = this.breakpoint.current === Breakpoint.mobile ? false : (collapsed || false);
localStorage.setItem(ASIDE_STATE, JSON.stringify(collapsed));
}
get collapsed() {
return this._collapsed;
}
ngOnInit() {
this.collapsed = JSON.parse(localStorage.getItem(ASIDE_STATE));
}
toggle() {
this.opened = !this.opened;
}
};
AppAsideComponent.ctorParameters = () => [
{ type: BreakpointService },
{ type: DeviceService }
];
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], AppAsideComponent.prototype, "host", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], AppAsideComponent.prototype, "collapsed", null);
__decorate([
ContentApi({
selector: '#asideContentTemplate',
description: 'Aside content template'
}),
ContentChild('asideContentTemplate', { static: false }),
__metadata("design:type", TemplateRef)
], AppAsideComponent.prototype, "contentTemplate", void 0);
__decorate([
ContentChild(MenuComponent, { static: false }),
__metadata("design:type", MenuComponent)
], AppAsideComponent.prototype, "menu", void 0);
__decorate([
HostBinding('attr.data-opened'),
Input(),
__metadata("design:type", Object)
], AppAsideComponent.prototype, "opened", void 0);
AppAsideComponent = __decorate([
Component({
selector: 'jnt-app-aside',
template: "<div child-of=\"jnt-app-aside-host\" data-drawer [attr.data-collapsed]=\"collapsed\n && breakpoint.current !== ui.breakpoint.mobile\">\n <jnt-button child-of=\"jnt-app-aside-host\" *jntFor=\"ui.breakpoint.mobile\"\n [scheme]=\"ui.scheme.secondary\"\n [icon]=\"ui.icons.menu\"\n (click)=\"toggle()\" data-burger>\n </jnt-button>\n\n <div child-of=\"jnt-app-aside-host\" data-scroll [attr.data-windows]=\"device.platform.windows\">\n <button child-of=\"jnt-app-aside-host\" (click)=\"collapsed = !collapsed\">\n <jnt-stack child-of=\"jnt-app-aside-host\" [orientation]=\"ui.orientation.horizontal\" [align]=\"ui.align.center\">\n <jnt-icon child-of=\"jnt-app-aside-host\" data-icon [icon]=\"collapsed ? ui.icons.doubleChevronRight: ui.icons.doubleChevronLeft\"></jnt-icon>\n <span child-of=\"jnt-app-aside-host\" *ngIf=\"!collapsed\">{{'action.hide_sidebar' | translate}}</span>\n </jnt-stack>\n </button>\n <jnt-stack child-of=\"jnt-app-aside-host\" [align]=\"ui.align.stretch\">\n <ng-container *ngIf=\"!!contentTemplate\">\n <ng-container *ngTemplateOutlet=\"contentTemplate;\n context: {\n collapsed: collapsed && breakpoint.current !== ui.breakpoint.mobile,\n toggle: toggle.bind(this)\n }\">\n </ng-container>\n </ng-container>\n <jnt-menu child-of=\"jnt-app-aside-host\" data-menu *ngIf=\"!!menu\"\n context=\"popover-aside-sub-menu\"\n [orientation]=\"ui.orientation.vertical\"\n [collapsed]=\"collapsed && breakpoint.current !== ui.breakpoint.mobile\"\n [placement]=\"ui.placement.fixed\"\n [spacing]=\"menu.spacing\"\n (selected)=\"toggle()\">\n <jnt-menu-item child-of=\"jnt-app-aside-host\" *ngFor=\"let i of menu.items\"\n [title]=\"i.title\"\n [disabled]=\"i.disabled\"\n [link]=\"i.link\"\n [icon]=\"i.icon\">\n <jnt-badge child-of=\"jnt-app-aside-host\" *ngFor=\"let badge of i.badges\"\n [value]=\"badge.value\"\n [text]=\"badge.text\"\n [position]=\"ui.position.inline\"\n [color]=\"badge.color\">\n </jnt-badge>\n <jnt-sub-menu child-of=\"jnt-app-aside-host\" *ngIf=\"!!i.submenu\">\n <jnt-sub-menu-item child-of=\"jnt-app-aside-host\" *ngFor=\"let j of i?.submenu.items\"\n [title]=\"j.title\"\n [disabled]=\"j.disabled\"\n [link]=\"j.link\"\n [icon]=\"j.icon\">\n <jnt-badge child-of=\"jnt-app-aside-host\" *ngFor=\"let badge of j.badges\"\n [value]=\"badge.value\"\n [text]=\"badge.text\"\n [position]=\"ui.position.inline\"\n [color]=\"badge.color\">\n </jnt-badge>\n </jnt-sub-menu-item>\n </jnt-sub-menu>\n </jnt-menu-item>\n </jnt-menu>\n </jnt-stack>\n </div>\n</div>\n<div child-of=\"jnt-app-aside-host\" data-overlay (click)=\"opened = false\"></div>",
providers: [...I18N_PROVIDERS]
}),
__metadata("design:paramtypes", [BreakpointService,
DeviceService])
], AppAsideComponent);
export { AppAsideComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWFzaWRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BqdW50ZS91aS8iLCJzb3VyY2VzIjpbImxpYi9sYXlvdXQvYXBwL2FzaWRlL2FwcC1hc2lkZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQVUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pHLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNoRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDeEUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzVELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM1QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBRXhFLE1BQU0sV0FBVyxHQUFHLGlCQUFpQixDQUFDO0FBT3RDLElBQWEsaUJBQWlCLEdBQTlCLE1BQWEsaUJBQWlCO0lBK0I1QixZQUFtQixVQUE2QixFQUM3QixNQUFxQjtRQURyQixlQUFVLEdBQVYsVUFBVSxDQUFtQjtRQUM3QixXQUFNLEdBQU4sTUFBTSxDQUFlO1FBN0IvQixTQUFJLEdBQUcsb0JBQW9CLENBQUM7UUFHckMsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQXVCQyxXQUFNLEdBQUcsS0FBSyxDQUFDO0lBSXhCLENBQUM7SUF4QkQsSUFBSSxTQUFTLENBQUMsU0FBa0I7UUFDOUIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU8sS0FBSyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxJQUFJLEtBQUssQ0FBQyxDQUFDO1FBQy9GLFlBQVksQ0FBQyxPQUFPLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUMvRCxDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFtQkQsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUM7SUFDakUsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUM3QixDQUFDO0NBRUYsQ0FBQTs7WUFaZ0MsaUJBQWlCO1lBQ3JCLGFBQWE7O0FBN0J4QztJQURDLFdBQVcsQ0FBQyxXQUFXLENBQUM7OytDQUNZO0FBTXJDO0lBREMsS0FBSyxFQUFFOzs7a0RBSVA7QUFXRDtJQUxDLFVBQVUsQ0FBQztRQUNWLFFBQVEsRUFBRSx1QkFBdUI7UUFDakMsV0FBVyxFQUFFLHdCQUF3QjtLQUN0QyxDQUFDO0lBQ0QsWUFBWSxDQUFDLHNCQUFzQixFQUFFLEVBQUMsTUFBTSxFQUFFLEtBQUssRUFBQyxDQUFDOzhCQUNyQyxXQUFXOzBEQUFNO0FBR2xDO0lBREMsWUFBWSxDQUFDLGFBQWEsRUFBRSxFQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUMsQ0FBQzs4QkFDdkMsYUFBYTsrQ0FBQztBQUdYO0lBRFIsV0FBVyxDQUFDLGtCQUFrQixDQUFDO0lBQy9CLEtBQUssRUFBRTs7aURBQWdCO0FBN0JiLGlCQUFpQjtJQUw3QixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsZUFBZTtRQUN6QiwydUdBQTRDO1FBQzVDLFNBQVMsRUFBRSxDQUFDLEdBQUcsY0FBYyxDQUFDO0tBQy9CLENBQUM7cUNBZ0MrQixpQkFBaUI7UUFDckIsYUFBYTtHQWhDN0IsaUJBQWlCLENBMkM3QjtTQTNDWSxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEZXZpY2VTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vcmVzcG9uc2l2ZS9kZXZpY2Uuc2VydmljZSc7XG5pbXBvcnQgeyBDb250ZW50QXBpIH0gZnJvbSAnLi4vLi4vLi4vY29yZS9kZWNvcmF0b3JzL2FwaSc7XG5pbXBvcnQgeyBCcmVha3BvaW50U2VydmljZSB9IGZyb20gJy4uLy4uL3Jlc3BvbnNpdmUvYnJlYWtwb2ludC5zZXJ2aWNlJztcbmltcG9ydCB7IEJyZWFrcG9pbnQgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2VudW1zL2JyZWFrcG9pbnQnO1xuaW1wb3J0IHsgVUkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2VudW1zL3VpJztcbmltcG9ydCB7IEkxOE5fUFJPVklERVJTIH0gZnJvbSAnLi4vLi4vLi4vY29yZS9pMThuL3Byb3ZpZGVycyc7XG5pbXBvcnQgeyBNZW51Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vbmF2aWdhdGlvbi9tZW51L21lbnUuY29tcG9uZW50JztcblxuY29uc3QgQVNJREVfU1RBVEUgPSAnYXNpZGVfY29sbGFwc2VkJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnam50LWFwcC1hc2lkZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9hcHAtYXNpZGUuZW5jYXBzdWxhdGVkLmh0bWwnLFxuICBwcm92aWRlcnM6IFsuLi5JMThOX1BST1ZJREVSU11cbn0pXG5leHBvcnQgY2xhc3MgQXBwQXNpZGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5ob3N0JylcbiAgcmVhZG9ubHkgaG9zdCA9ICdqbnQtYXBwLWFzaWRlLWhvc3QnO1xuXG4gIHByaXZhdGUgX2NvbGxhcHNlZDogYm9vbGVhbjtcbiAgdWkgPSBVSTtcblxuICBASW5wdXQoKVxuICBzZXQgY29sbGFwc2VkKGNvbGxhcHNlZDogYm9vbGVhbikge1xuICAgIHRoaXMuX2NvbGxhcHNlZCA9IHRoaXMuYnJlYWtwb2ludC5jdXJyZW50ID09PSBCcmVha3BvaW50Lm1vYmlsZSA/IGZhbHNlIDogKGNvbGxhcHNlZCB8fCBmYWxzZSk7XG4gICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oQVNJREVfU1RBVEUsIEpTT04uc3RyaW5naWZ5KGNvbGxhcHNlZCkpO1xuICB9XG5cbiAgZ2V0IGNvbGxhcHNlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5fY29sbGFwc2VkO1xuICB9XG5cbiAgQENvbnRlbnRBcGkoe1xuICAgIHNlbGVjdG9yOiAnI2FzaWRlQ29udGVudFRlbXBsYXRlJyxcbiAgICBkZXNjcmlwdGlvbjogJ0FzaWRlIGNvbnRlbnQgdGVtcGxhdGUnXG4gIH0pXG4gIEBDb250ZW50Q2hpbGQoJ2FzaWRlQ29udGVudFRlbXBsYXRlJywge3N0YXRpYzogZmFsc2V9KVxuICBjb250ZW50VGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQENvbnRlbnRDaGlsZChNZW51Q29tcG9uZW50LCB7c3RhdGljOiBmYWxzZX0pXG4gIG1lbnU6IE1lbnVDb21wb25lbnQ7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtb3BlbmVkJylcbiAgQElucHV0KCkgb3BlbmVkID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHVibGljIGJyZWFrcG9pbnQ6IEJyZWFrcG9pbnRTZXJ2aWNlLFxuICAgICAgICAgICAgICBwdWJsaWMgZGV2aWNlOiBEZXZpY2VTZXJ2aWNlKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbGxhcHNlZCA9IEpTT04ucGFyc2UobG9jYWxTdG9yYWdlLmdldEl0ZW0oQVNJREVfU1RBVEUpKTtcbiAgfVxuXG4gIHRvZ2dsZSgpIHtcbiAgICB0aGlzLm9wZW5lZCA9ICF0aGlzLm9wZW5lZDtcbiAgfVxuXG59XG4iXX0=