systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
54 lines • 10.9 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ApplicationSidebarLargeComponent {
constructor() {
this.actions = [];
this.tabs = [];
this.selected = new EventEmitter();
}
ngOnInit() {
this.checkSubMenuSelected();
}
checkSubMenuSelected() {
this.tabs.forEach((tab) => {
if (tab.subMenu) {
tab.subMenu.forEach((subTab) => {
if (subTab.isSelected === true) {
tab.isSelected = true;
}
});
}
});
}
selectTab(id) {
this.tabs.forEach((tab) => {
tab.isSelected = (tab.id === id);
if (tab.subMenu) {
tab.subMenu.forEach((subTab) => {
if (subTab.id === id) {
subTab.isSelected = true;
tab.isSelected = true;
}
else {
subTab.isSelected = false;
}
});
}
});
this.selected.emit(id);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ApplicationSidebarLargeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: ApplicationSidebarLargeComponent, selector: "systelab-app-sidebar-large", inputs: { actions: "actions", tabs: "tabs" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"slab-app-sidebar-large-menu-container\">\n <ul class=\"slab-app-sidebar-tabs-container\">\n @for (tab of tabs; track tab.id) {\n <li class=\"slab-app-sidebar-tab\" (click)=\"!tab.subMenu ? tab.action ? tab.action(tab.id) : selectTab(tab.id) : false\"\n [class.selected]=\"tab.isSelected\">\n <div class=\"slab-app-sidebar-tab-decoration float-left\"></div>\n <span>{{tab.name}}</span>\n <ul *ngIf=\"tab.subMenu\" class=\"slab-app-sidebar-submenu\">\n @for (subTab of tab.subMenu; track subTab.id) {\n <li class=\"slab-app-sidebar-subtab\" (click)=\"subTab.action ? subTab.action(subTab.id) : selectTab(subTab.id)\" [class.selected]=\"subTab.isSelected\">\n <div class=\"slab-app-sidebar-tab-decoration float-left\"></div>\n <span>{{subTab.name}}</span>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n <ul class=\"slab-app-sidebar-actions-container\">\n @for (action of actions; track action.name) {\n <button type=\"button\" class=\"btn\" (click)=\"action.action()\">\n <i *ngIf=\"action.icon\" class=\"{{action.icon}}\"></i> {{action.name}}\n </button>\n }\n </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ApplicationSidebarLargeComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-app-sidebar-large', template: "<div class=\"slab-app-sidebar-large-menu-container\">\n <ul class=\"slab-app-sidebar-tabs-container\">\n @for (tab of tabs; track tab.id) {\n <li class=\"slab-app-sidebar-tab\" (click)=\"!tab.subMenu ? tab.action ? tab.action(tab.id) : selectTab(tab.id) : false\"\n [class.selected]=\"tab.isSelected\">\n <div class=\"slab-app-sidebar-tab-decoration float-left\"></div>\n <span>{{tab.name}}</span>\n <ul *ngIf=\"tab.subMenu\" class=\"slab-app-sidebar-submenu\">\n @for (subTab of tab.subMenu; track subTab.id) {\n <li class=\"slab-app-sidebar-subtab\" (click)=\"subTab.action ? subTab.action(subTab.id) : selectTab(subTab.id)\" [class.selected]=\"subTab.isSelected\">\n <div class=\"slab-app-sidebar-tab-decoration float-left\"></div>\n <span>{{subTab.name}}</span>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n <ul class=\"slab-app-sidebar-actions-container\">\n @for (action of actions; track action.name) {\n <button type=\"button\" class=\"btn\" (click)=\"action.action()\">\n <i *ngIf=\"action.icon\" class=\"{{action.icon}}\"></i> {{action.name}}\n </button>\n }\n </ul>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { actions: [{
type: Input
}], tabs: [{
type: Input
}], selected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLXNpZGViYXItbGFyZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3lzdGVsYWItY29tcG9uZW50cy9zcmMvbGliL2FwcGxpY2F0aW9uZnJhbWUvc2lkZWJhci9hcHAtc2lkZWJhci1sYXJnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvYXBwbGljYXRpb25mcmFtZS9zaWRlYmFyL2FwcC1zaWRlYmFyLWxhcmdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU8vRSxNQUFNLE9BQU8sZ0NBQWdDO0lBTTVDO1FBSmdCLFlBQU8sR0FBK0IsRUFBRSxDQUFDO1FBQ3pDLFNBQUksR0FBNEIsRUFBRSxDQUFDO1FBQ2xDLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBRy9DLENBQUM7SUFFTSxRQUFRO1FBQ2QsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVPLG9CQUFvQjtRQUMzQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ3pCLElBQUksR0FBRyxDQUFDLE9BQU8sRUFBRTtnQkFDaEIsR0FBRyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtvQkFDOUIsSUFBSSxNQUFNLENBQUMsVUFBVSxLQUFLLElBQUksRUFBRTt3QkFDL0IsR0FBRyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7cUJBQ3RCO2dCQUNGLENBQUMsQ0FBQyxDQUFDO2FBQ0g7UUFDRixDQUFDLENBQUMsQ0FBQztJQUNKLENBQUM7SUFFTSxTQUFTLENBQUMsRUFBVTtRQUMxQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ3pCLEdBQUcsQ0FBQyxVQUFVLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1lBQ2pDLElBQUksR0FBRyxDQUFDLE9BQU8sRUFBRTtnQkFDaEIsR0FBRyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtvQkFDOUIsSUFBSSxNQUFNLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRTt3QkFDckIsTUFBTSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7d0JBQ3pCLEdBQUcsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO3FCQUN0Qjt5QkFBTTt3QkFDTixNQUFNLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztxQkFDMUI7Z0JBQ0YsQ0FBQyxDQUFDLENBQUM7YUFDSDtRQUNGLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDeEIsQ0FBQzs4R0F4Q1csZ0NBQWdDO2tHQUFoQyxnQ0FBZ0MsbUpDUDdDLHMzQ0EwQkE7OzJGRG5CYSxnQ0FBZ0M7a0JBSjVDLFNBQVM7K0JBQ0ksNEJBQTRCO3dEQUt6QixPQUFPO3NCQUF0QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1csUUFBUTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFwcGxpY2F0aW9uU2lkZWJhckFjdGlvbiwgQXBwbGljYXRpb25TaWRlYmFyVGFiIH0gZnJvbSAnLi9hcHAtc2lkZWJhci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICAgICdzeXN0ZWxhYi1hcHAtc2lkZWJhci1sYXJnZScsXG5cdHRlbXBsYXRlVXJsOiAnYXBwLXNpZGViYXItbGFyZ2UuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEFwcGxpY2F0aW9uU2lkZWJhckxhcmdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuXHRASW5wdXQoKSBwdWJsaWMgYWN0aW9uczogQXBwbGljYXRpb25TaWRlYmFyQWN0aW9uW10gPSBbXTtcblx0QElucHV0KCkgcHVibGljIHRhYnM6IEFwcGxpY2F0aW9uU2lkZWJhclRhYltdID0gW107XG5cdEBPdXRwdXQoKSBwdWJsaWMgc2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0Y29uc3RydWN0b3IoKSB7XG5cdH1cblxuXHRwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG5cdFx0dGhpcy5jaGVja1N1Yk1lbnVTZWxlY3RlZCgpO1xuXHR9XG5cblx0cHJpdmF0ZSBjaGVja1N1Yk1lbnVTZWxlY3RlZCgpIHtcblx0XHR0aGlzLnRhYnMuZm9yRWFjaCgodGFiKSA9PiB7XG5cdFx0XHRpZiAodGFiLnN1Yk1lbnUpIHtcblx0XHRcdFx0dGFiLnN1Yk1lbnUuZm9yRWFjaCgoc3ViVGFiKSA9PiB7XG5cdFx0XHRcdFx0aWYgKHN1YlRhYi5pc1NlbGVjdGVkID09PSB0cnVlKSB7XG5cdFx0XHRcdFx0XHR0YWIuaXNTZWxlY3RlZCA9IHRydWU7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHR9KTtcblx0XHRcdH1cblx0XHR9KTtcblx0fVxuXG5cdHB1YmxpYyBzZWxlY3RUYWIoaWQ6IHN0cmluZykge1xuXHRcdHRoaXMudGFicy5mb3JFYWNoKCh0YWIpID0+IHtcblx0XHRcdHRhYi5pc1NlbGVjdGVkID0gKHRhYi5pZCA9PT0gaWQpO1xuXHRcdFx0aWYgKHRhYi5zdWJNZW51KSB7XG5cdFx0XHRcdHRhYi5zdWJNZW51LmZvckVhY2goKHN1YlRhYikgPT4ge1xuXHRcdFx0XHRcdGlmIChzdWJUYWIuaWQgPT09IGlkKSB7XG5cdFx0XHRcdFx0XHRzdWJUYWIuaXNTZWxlY3RlZCA9IHRydWU7XG5cdFx0XHRcdFx0XHR0YWIuaXNTZWxlY3RlZCA9IHRydWU7XG5cdFx0XHRcdFx0fSBlbHNlIHtcblx0XHRcdFx0XHRcdHN1YlRhYi5pc1NlbGVjdGVkID0gZmFsc2U7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHR9KTtcblx0XHRcdH1cblx0XHR9KTtcblx0XHR0aGlzLnNlbGVjdGVkLmVtaXQoaWQpO1xuXHR9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2xhYi1hcHAtc2lkZWJhci1sYXJnZS1tZW51LWNvbnRhaW5lclwiPlxuICAgIDx1bCBjbGFzcz1cInNsYWItYXBwLXNpZGViYXItdGFicy1jb250YWluZXJcIj5cbiAgICAgICAgQGZvciAodGFiIG9mIHRhYnM7IHRyYWNrIHRhYi5pZCkge1xuICAgICAgICAgICAgPGxpIGNsYXNzPVwic2xhYi1hcHAtc2lkZWJhci10YWJcIiAoY2xpY2spPVwiIXRhYi5zdWJNZW51ID8gdGFiLmFjdGlvbiA/IHRhYi5hY3Rpb24odGFiLmlkKSA6IHNlbGVjdFRhYih0YWIuaWQpIDogZmFsc2VcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5zZWxlY3RlZF09XCJ0YWIuaXNTZWxlY3RlZFwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbGFiLWFwcC1zaWRlYmFyLXRhYi1kZWNvcmF0aW9uIGZsb2F0LWxlZnRcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8c3Bhbj57e3RhYi5uYW1lfX08L3NwYW4+XG4gICAgICAgICAgICAgICAgPHVsICpuZ0lmPVwidGFiLnN1Yk1lbnVcIiBjbGFzcz1cInNsYWItYXBwLXNpZGViYXItc3VibWVudVwiPlxuICAgICAgICAgICAgICAgICAgICBAZm9yIChzdWJUYWIgb2YgdGFiLnN1Yk1lbnU7IHRyYWNrIHN1YlRhYi5pZCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgPGxpIGNsYXNzPVwic2xhYi1hcHAtc2lkZWJhci1zdWJ0YWJcIiAgKGNsaWNrKT1cInN1YlRhYi5hY3Rpb24gPyBzdWJUYWIuYWN0aW9uKHN1YlRhYi5pZCkgOiBzZWxlY3RUYWIoc3ViVGFiLmlkKVwiIFtjbGFzcy5zZWxlY3RlZF09XCJzdWJUYWIuaXNTZWxlY3RlZFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbGFiLWFwcC1zaWRlYmFyLXRhYi1kZWNvcmF0aW9uICBmbG9hdC1sZWZ0XCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4+e3tzdWJUYWIubmFtZX19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIDwvdWw+XG4gICAgICAgICAgICA8L2xpPlxuICAgICAgICB9XG4gICAgPC91bD5cbiAgICA8dWwgY2xhc3M9XCJzbGFiLWFwcC1zaWRlYmFyLWFjdGlvbnMtY29udGFpbmVyXCI+XG4gICAgICAgIEBmb3IgKGFjdGlvbiBvZiBhY3Rpb25zOyB0cmFjayBhY3Rpb24ubmFtZSkge1xuICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidG5cIiAoY2xpY2spPVwiYWN0aW9uLmFjdGlvbigpXCI+XG4gICAgICAgICAgICAgICAgPGkgKm5nSWY9XCJhY3Rpb24uaWNvblwiIGNsYXNzPVwie3thY3Rpb24uaWNvbn19XCI+PC9pPiB7e2FjdGlvbi5uYW1lfX1cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICB9XG4gICAgPC91bD5cbjwvZGl2PlxuIl19