@koalarx/ui
Version:
Koala UI is a Design System developed in Angular whose objective is to facilitate and make your development faster and simpler, making this framework your greatest ally.
161 lines (155 loc) • 16 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, Injectable, NgModule } from '@angular/core';
import * as i1 from '@angular/router';
import { NavigationEnd, Scroll, RouterModule } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { koala } from '@koalarx/utils';
import { map, switchMap } from 'rxjs/operators';
import { delay } from '@koalarx/utils/operators/delay';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i4 from '@koalarx/ui/icon';
import { KoalaIconModule } from '@koalarx/ui/icon';
const menuStateSubject = new BehaviorSubject(null);
class MenuComponent {
constructor(router) {
this.router = router;
}
ngOnInit() {
if (this.optionsSubject) {
this.optionsSubject.pipe(map((options) => this.defineMenuOptions(options))).subscribe();
this.router.events
.pipe(switchMap((event) => new Promise(async (resolve) => {
while (this.optionsSubject?.getValue()?.length === 0) {
await delay(300);
}
resolve(event);
})))
.pipe(map((event) => {
const options = this.cloneOptions();
this.optionsSubject?.next(options.map((option) => {
option.active = false;
return option;
}));
return event;
}))
.subscribe((event) => {
switch (true) {
case event instanceof Scroll:
case event instanceof NavigationEnd:
const options = this.cloneOptions();
if (options?.length > 0) {
this.optionsSubject?.next(this.defineMenuOptions(options, true));
}
}
});
}
}
toogle(module) {
if (this.optionsSubject) {
const options = JSON.parse(JSON.stringify(this.optionsSubject.getValue()));
this.optionsSubject.next(koala(options)
.array()
.map((item) => {
item.animateOpen = false;
item.animateClose = false;
if (item.name === module.name) {
item.expanded = !module.expanded;
item.animateOpen = item.expanded;
item.animateClose = !item.expanded;
}
else {
item.expanded = false;
}
return item;
})
.getValue());
}
}
getKoalaIcon(config) {
return config.icon;
}
defineMenuOptions(options, routerChange = false) {
options.map((module) => {
if (routerChange) {
module.animateOpen = false;
module.animateClose = false;
module.active = module.tools
? this.router.url === module.routerLink ||
!!module.tools.find((tool) => this.router.url.indexOf(tool.routerLink) >= 0)
: this.router.url === module.routerLink;
module.expanded = module.active;
}
return module;
});
return options;
}
cloneOptions() {
return JSON.parse(JSON.stringify(this.optionsSubject?.getValue()));
}
}
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "koala-menu", inputs: { titleMenu: "titleMenu", optionsSubject: "optionsSubject" }, ngImport: i0, template: "<nav>\n <h2 *ngIf=\"titleMenu\" class=\"title\">{{titleMenu}}</h2>\n <ul *ngIf=\"(optionsSubject | async) as options\" class=\"list-menu\" [ngClass]=\"{'without-title': !titleMenu}\">\n <li\n #moduleItem\n\t *ngFor=\"let module of options\"\n\t [ngClass]=\"{\n\t animateOpen: module.animateOpen,\n\t animateClose: module.animateClose,\n expanded: module.expanded,\n active: module.active\n }\">\n <a *ngIf=\"!!module.routerLink else moduleWithoutLink\" [routerLink]=\"module.routerLink\" (click)=\"toogle(module)\" class=\"module\">\n <mat-icon *ngIf=\"module.icon && !module.koalaIcon\">{{module.icon}}</mat-icon>\n <koala-icon *ngIf=\"module.icon && module.koalaIcon\" [icon]=\"getKoalaIcon(module)\"></koala-icon>\n <h3>{{module.name}}</h3>\n <mat-icon\n\t *ngIf=\"module.tools?.length ?? 0 > 0\"\n\t class=\"state-module\">{{module.expanded || module.active ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </a>\n <ng-template #moduleWithoutLink>\n <div (click)=\"toogle(module)\" class=\"module\">\n <mat-icon *ngIf=\"module.icon && !module.koalaIcon\">{{module.icon}}</mat-icon>\n <koala-icon *ngIf=\"module.icon && module.koalaIcon\" [icon]=\"getKoalaIcon(module)\" [size]=\"18\"></koala-icon>\n <h3>{{module.name}}</h3>\n <mat-icon\n\t *ngIf=\"module.tools?.length ?? 0 > 0\"\n\t class=\"state-module\">{{module.expanded || module.active ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </div>\n </ng-template>\n <ul *ngIf=\"module.tools?.length ?? 0 > 0\">\n <li *ngFor=\"let tool of module.tools\">\n\t\t <a [routerLink]=\"tool.routerLink\" routerLinkActive=\"active\">\n\t <mat-icon *ngIf=\"tool.icon && !tool.koalaIcon\">{{tool.icon}}</mat-icon>\n <koala-icon *ngIf=\"tool.icon && tool.koalaIcon\" [icon]=\"getKoalaIcon(tool)\" [size]=\"18\"></koala-icon>\n\t <h4>{{tool.name}}</h4>\n\t\t </a>\n </li>\n </ul>\n </li>\n </ul>\n</nav>\n", styles: [".title{font-family:OpenSans,sans-serif;font-size:.8em;font-weight:700;line-height:.8em;margin:0;padding:8px 15px}ul{font-size:0;list-style:none;margin:0;padding:0 20px 0 0;width:100%;box-sizing:border-box}ul.list-menu{height:calc(100vh - 107px);overflow:auto}ul.list-menu.without-title{height:calc(100vh - 78px)}ul ul{height:-moz-fit-content;height:fit-content;overflow:hidden;width:100%}ul li{cursor:pointer;display:block;font-size:14px;outline:none;padding:0;position:relative;transition:.2s;overflow:hidden;border-radius:0 20px 20px 0}ul li a{transition:.2s}.module{outline:none;padding:5px 15px;text-decoration:none}a.module{box-sizing:border-box;cursor:pointer;display:block;width:100%}ul li li{border:none!important;padding:0!important;height:0}.state-module{position:absolute;right:10px;top:4px}ul li.active ul{border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px #00000080}ul li.expanded ul{border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px #00000080;height:-moz-fit-content;height:fit-content;padding:15px 0}ul li.expanded ul li{height:30px}ul li li a.active{background:rgba(0,0,0,.1)!important;cursor:default;height:-moz-fit-content!important;height:fit-content!important}ul li h3,ul li h4,ul li koala-icon,ul li mat-icon{display:inline-flex;line-height:1.5em;margin:0;vertical-align:middle}ul li h3,ul li h4{font-size:.9em}ul li koala-icon,ul li li koala-icon{font-size:18px;height:18px;line-height:18px;margin-right:5px;width:18px}ul li mat-icon,ul li li mat-icon{font-size:20px;height:20px;line-height:20px;margin-right:5px;width:20px}ul li koala-icon,ul li li koala-icon{margin-right:10px}ul li li a{cursor:pointer;display:block;padding:5px 15px!important;text-decoration:none;width:100%}ul li li:hover{background:rgba(0,0,0,.1)}ul li li a.active:hover{background:transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.IconComponent, selector: "koala-icon", inputs: ["color", "icon", "size"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav>\n <h2 *ngIf=\"titleMenu\" class=\"title\">{{titleMenu}}</h2>\n <ul *ngIf=\"(optionsSubject | async) as options\" class=\"list-menu\" [ngClass]=\"{'without-title': !titleMenu}\">\n <li\n #moduleItem\n\t *ngFor=\"let module of options\"\n\t [ngClass]=\"{\n\t animateOpen: module.animateOpen,\n\t animateClose: module.animateClose,\n expanded: module.expanded,\n active: module.active\n }\">\n <a *ngIf=\"!!module.routerLink else moduleWithoutLink\" [routerLink]=\"module.routerLink\" (click)=\"toogle(module)\" class=\"module\">\n <mat-icon *ngIf=\"module.icon && !module.koalaIcon\">{{module.icon}}</mat-icon>\n <koala-icon *ngIf=\"module.icon && module.koalaIcon\" [icon]=\"getKoalaIcon(module)\"></koala-icon>\n <h3>{{module.name}}</h3>\n <mat-icon\n\t *ngIf=\"module.tools?.length ?? 0 > 0\"\n\t class=\"state-module\">{{module.expanded || module.active ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </a>\n <ng-template #moduleWithoutLink>\n <div (click)=\"toogle(module)\" class=\"module\">\n <mat-icon *ngIf=\"module.icon && !module.koalaIcon\">{{module.icon}}</mat-icon>\n <koala-icon *ngIf=\"module.icon && module.koalaIcon\" [icon]=\"getKoalaIcon(module)\" [size]=\"18\"></koala-icon>\n <h3>{{module.name}}</h3>\n <mat-icon\n\t *ngIf=\"module.tools?.length ?? 0 > 0\"\n\t class=\"state-module\">{{module.expanded || module.active ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>\n </div>\n </ng-template>\n <ul *ngIf=\"module.tools?.length ?? 0 > 0\">\n <li *ngFor=\"let tool of module.tools\">\n\t\t <a [routerLink]=\"tool.routerLink\" routerLinkActive=\"active\">\n\t <mat-icon *ngIf=\"tool.icon && !tool.koalaIcon\">{{tool.icon}}</mat-icon>\n <koala-icon *ngIf=\"tool.icon && tool.koalaIcon\" [icon]=\"getKoalaIcon(tool)\" [size]=\"18\"></koala-icon>\n\t <h4>{{tool.name}}</h4>\n\t\t </a>\n </li>\n </ul>\n </li>\n </ul>\n</nav>\n", styles: [".title{font-family:OpenSans,sans-serif;font-size:.8em;font-weight:700;line-height:.8em;margin:0;padding:8px 15px}ul{font-size:0;list-style:none;margin:0;padding:0 20px 0 0;width:100%;box-sizing:border-box}ul.list-menu{height:calc(100vh - 107px);overflow:auto}ul.list-menu.without-title{height:calc(100vh - 78px)}ul ul{height:-moz-fit-content;height:fit-content;overflow:hidden;width:100%}ul li{cursor:pointer;display:block;font-size:14px;outline:none;padding:0;position:relative;transition:.2s;overflow:hidden;border-radius:0 20px 20px 0}ul li a{transition:.2s}.module{outline:none;padding:5px 15px;text-decoration:none}a.module{box-sizing:border-box;cursor:pointer;display:block;width:100%}ul li li{border:none!important;padding:0!important;height:0}.state-module{position:absolute;right:10px;top:4px}ul li.active ul{border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px #00000080}ul li.expanded ul{border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px #00000080;height:-moz-fit-content;height:fit-content;padding:15px 0}ul li.expanded ul li{height:30px}ul li li a.active{background:rgba(0,0,0,.1)!important;cursor:default;height:-moz-fit-content!important;height:fit-content!important}ul li h3,ul li h4,ul li koala-icon,ul li mat-icon{display:inline-flex;line-height:1.5em;margin:0;vertical-align:middle}ul li h3,ul li h4{font-size:.9em}ul li koala-icon,ul li li koala-icon{font-size:18px;height:18px;line-height:18px;margin-right:5px;width:18px}ul li mat-icon,ul li li mat-icon{font-size:20px;height:20px;line-height:20px;margin-right:5px;width:20px}ul li koala-icon,ul li li koala-icon{margin-right:10px}ul li li a{cursor:pointer;display:block;padding:5px 15px!important;text-decoration:none;width:100%}ul li li:hover{background:rgba(0,0,0,.1)}ul li li a.active:hover{background:transparent}\n"] }]
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { titleMenu: [{
type: Input
}], optionsSubject: [{
type: Input
}] } });
class KoalaMenuService {
getMenuState() {
return menuStateSubject.getValue();
}
open() {
menuStateSubject.next('open');
}
close() {
menuStateSubject.next('close');
}
clearConfig() {
menuStateSubject.next(null);
}
}
KoalaMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
KoalaMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuService, providedIn: "any" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuService, decorators: [{
type: Injectable,
args: [{ providedIn: "any" }]
}] });
class KoalaMenuModule {
}
KoalaMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
KoalaMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuModule, declarations: [MenuComponent], imports: [CommonModule,
RouterModule,
MatIconModule,
KoalaIconModule], exports: [MenuComponent] });
KoalaMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuModule, imports: [CommonModule,
RouterModule,
MatIconModule,
KoalaIconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaMenuModule, decorators: [{
type: NgModule,
args: [{
declarations: [
MenuComponent
],
imports: [
CommonModule,
RouterModule,
MatIconModule,
KoalaIconModule
],
exports: [
MenuComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { KoalaMenuModule, KoalaMenuService, MenuComponent, menuStateSubject };
//# sourceMappingURL=koalarx-ui-menu.mjs.map