@logo-software/tree
Version:
A tree view represents a hierarchical view of information, where each item can have a number of subitems.
337 lines (329 loc) • 30.9 kB
JavaScript
import { EventEmitter, Component, ElementRef, Input, Output, Directive, NgModule, Optional, SkipSelf } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/**
* Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.
*
* Add the below code to your code stack and give initializer parameters.
*
* <sub>app.component.html</sub>
*
* ```html
* <logo-tree [items]="items" [start]="0" [iconClasses]=""></logo-tree>
* ```
*/
class TreeComponent {
/**
* Give HttpClient to the component. First import HttpClientModule to main Module of the app. For example.
* ```typescript
* @NgModule({ imports: [
* BrowserModule,
* HttpClientModule, // Add HttpClientModule
* ]
* })
* export class AppModule {
* }
* ```
* @param http
*/
constructor(elem, http) {
this.elem = elem;
this.http = http;
/**
* group
*/
this.group = false;
/**
* Specifies one or more CSS classes to be used by the element. When set, this class will also be used by all child elements that don't have their own class.
*/
this.classes = '';
/**
* Specifies one or more CSS classes to be used by the element's icons. When set, this class will also be used by all child elements icons that don't have their own class.
*/
this.iconClasses = '';
/**
* Menu items to show
*/
this.items = [];
/**
* It indicates the starting level of the items to be displayed
*/
this.start = 0;
/**
* Specifies the amount of indentation, in pixels, used to offset successive menu leaf levels in a hierarchy. The default value is 10 pixels.
*/
this.paddingLeft = 30;
/**
* Role information about which authorized people can view this menu item. Example: roles: ['ROLE_ADMIN', 'ROLE_DEVELOPER']
*/
this.roles = [];
/**
* Item click event trigger. When clicked on any item this event will be called and pushes the item information to the given method.
*/
this.itemClick = new EventEmitter();
/**
* Category click event trigger. When clicked on any category item, this event will be called and pushes the item information to the given method.
*/
this.categoryClick = new EventEmitter();
/**
* The Matched router is activated this method will be triggered. It will push the tree item to the given method.
*/
this.routeItemActivated = new EventEmitter();
/**
* Item checkbox status change trigger. When clicked, clicked item will be emited
*/
this.itemCheckChange = new EventEmitter();
this._level = 0;
}
get level() {
return this._level;
}
set level(level) {
++level;
this._level = level;
}
ngOnInit() {
if (!this.elementId) {
this.elementId = this.generateElementId();
}
}
generateElementId() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
+ Math.random().toString(16).slice(2)
+ Date.now().toString(16).slice(4);
}
open(routerLinkActive) {
this.recursiveParent(routerLinkActive.element.nativeElement);
}
recursiveParent(element) {
const parent = element.closest('ul').closest('li');
if (parent) {
const input = parent.querySelector('input');
input.checked = true;
// if (!(element as any).closest('ul.top-level-accordion')) {
this.recursiveParent(parent);
// }
}
}
getMenuList() {
this.http.request(this.request).subscribe((response) => this.onSuccessHandler(response));
}
onSuccessHandler(response) {
this.items = response.body.children;
}
htmlItemOnClick(item, $event) {
if (event) {
event.cancelBubble = true;
event.stopPropagation();
}
this.$onItemClick(item);
}
$onItemClick(item) {
this.itemClick.emit(item);
}
$onItemCheckChange(item) {
this.itemCheckChange.emit(item);
}
htmlCategoryOnClick(item, $event) {
if (event) {
event.cancelBubble = true;
event.stopPropagation();
}
this.$onCategoryClick(item);
}
$onCategoryClick(item) {
this.categoryClick.emit(item);
}
htmlSetPadding(level, start) {
const val = Number(level) - (this.group ? 1 : 0);
const padding = val <= 0 ? 0 : val * this.paddingLeft + 'px';
return level >= start ? padding : this.paddingLeft + 'px';
}
componentSetPadding(level, start) {
const currentPadding = this.htmlSetPadding(level, start).toString().replace('px', '');
return Math.floor(Number(currentPadding)) + 'px';
}
onRouteItemActivated(item) {
this.routeItemActivated.emit(item);
}
/**
* set left padding size programmatically for collapsed menus.
* @param value
*/
setPadding(value = 0) {
this.paddingLeft = value;
}
}
TreeComponent.decorators = [
{ type: Component, args: [{
selector: 'logo-tree',
template: "<!--\n/**\n * @license\n * Copyright LOGO YAZILIM SANAY\u0130 VE T\u0130CARET A.\u015E. All Rights Reserved.\n *\n * Save to the extent permitted by law, you may not use, copy, modify,\n * distribute or create derivative works of this material or any part\n * of it without the prior written consent of LOGO YAZILIM SANAY\u0130 VE T\u0130CARET A.\u015E. Limited.\n * Any reproduction of this material must contain this notice.\n */\n-->\n<ul [ngClass]=\"{'top-level-tree' : level == start}\">\n <ng-container *ngFor=\"let item of items; let i = index; let lst=last\">\n <!--div class=\"emitter\">emit</div-->\n <ng-container *ngIf=\"item.children && item.children.length >= 0;\">\n <li class=\"level-{{level}} tree-category {{classes}} {{item.group ? 'group': ''}}\">\n <ng-container *ngIf=\"level >= start\">\n <input [checked]=\"item.isOpen\" hidden class=\"opener\" id=\"{{elementId}}{{i}}\" type=\"checkbox\"/>\n <div class=\"label label-category{{item.group ? ' label-group': ''}}{{item.isActive ? ' router-link-active':''}}\" [style.paddingLeft]=\"htmlSetPadding(level, start)\">\n <div class=\"arrow ghost primary small le-chevron_right\" (click)=\"htmlCategoryOnClick(item)\"></div>\n <div class=\"label-items\" (click)=\"htmlItemOnClick(item)\">\n <input\n *ngIf=\"item.optional\"\n [checked]=\"false\"\n disabled\n id=\"tree-option-{{elementId}}-{{i}}\"\n type=\"checkbox\"\n />\n <span *ngIf=\"!!item.iconPath && !item.optional\" [ngClass]=\"item.iconClasses\" class=\"{{iconClasses}} item-icon\">\n <img *ngIf=\"!!item.iconPath && !item.optional\" src=\"{{item.iconPath}}\"/>\n </span>\n <span class=\"title\">{{item.name}}</span>\n </div>\n <label\n [style.paddingLeft]=\"htmlSetPadding(level, start)\"\n for=\"{{elementId}}{{i}}\"\n >\n </label>\n </div>\n </ng-container>\n <logo-tree\n (categoryClick)=\"$onCategoryClick($event)\"\n (itemClick)=\"$onItemClick($event)\"\n (routeItemActivated)=\"onRouteItemActivated($event)\"\n [classes]=\"classes\"\n [group]=\"item.group\"\n [iconClasses]=\"iconClasses\"\n [items]=\"item.children\"\n [level]=\"level + (item.group ? 1 : 0)\"\n [ngClass]=\"{'show': level < start}\"\n [paddingLeft]=\"paddingLeft\"\n [request]=\"request\"\n [roles]=\"roles\"\n [start]=\"level\"\n class=\"children\"\n >\n </logo-tree>\n </li>\n </ng-container>\n <ng-container *ngIf=\"!item.children\">\n <li class=\"tree-link {{classes}}\">\n <input *ngIf=\"item.optional\" (change)=\"$onItemCheckChange(item)\" class=\"selector\" id=\"option-{{elementId}}-{{i}}\" type=\"checkbox\">\n <label\n (click)=\"htmlItemOnClick(item)\"\n class=\"label label-link\"\n for=\"{{elementId}}{{i}}\"\n [style.paddingLeft]=\"htmlSetPadding(level, start)\"\n [ngClass]=\"{'check-active': item.optional, 'router-link-active': item.isActive }\"\n >\n <div class=\"arrow ghost small le-chevron_right no-children-item\"></div>\n <span *ngIf=\"!!item.iconPath && !item.optional\" [ngClass]=\"item.iconClasses\" class=\"{{iconClasses}} item-icon\">\n <img *ngIf=\"!!item.iconPath\" src=\"{{item.iconPath}}\"/>\n </span>\n <ng-container *ngIf=\"item.noLink; else withLink\">\n <a\n [fragment]=\"item.fragment? item.fragment : ''\"\n [queryParams]=\"item.params ? item.params: {}\"\n [routerLink]=\"item.link ? [item.link] : []\"\n class=\"none\"\n ></a>\n <span class=\"title\">{{item.name}}</span>\n </ng-container>\n <ng-template #withLink>\n <a\n [fragment]=\"item.fragment? item.fragment : ''\"\n [queryParams]=\"item.params ? item.params: {}\"\n [routerLink]=\"item.link ? [item.link] : []\"\n >\n {{item.name}}\n </a>\n </ng-template>\n </label>\n </li>\n </ng-container>\n </ng-container>\n</ul>\n\n",
styles: ["[class*=\" le-\"],[class^=le-]{position:relative;height:100%}[class*=\" le-\"]:before,[class^=le-]:before{height:100%;top:0;-webkit-mask-size:14px;mask-size:14px}.le-arrow_right:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='arrow_right'%3E %3Cpath id='Shape' fill-rule='evenodd' clip-rule='evenodd' d='M14.5713 12C14.5713 11.8762 14.5351 11.7657 14.4628 11.6686L14.4017 11.5982L10.4017 7.59823C10.2886 7.48514 10.1547 7.42859 9.9999 7.42859C9.84513 7.42859 9.7112 7.48514 9.59811 7.59823C9.50763 7.68871 9.45335 7.79252 9.43525 7.90966L9.42847 8.00002V16C9.42847 16.1548 9.48501 16.2887 9.59811 16.4018C9.7112 16.5149 9.84513 16.5714 9.9999 16.5714C10.1237 16.5714 10.2342 16.5353 10.3313 16.4629L10.4017 16.4018L14.4017 12.4018C14.5148 12.2887 14.5713 12.1548 14.5713 12Z' fill='%235A5A5A'/%3E %3C/g%3E %3C/svg%3E\");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;display:inline-block;content:\"\";position:absolute;background:currentColor}.dotted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-tooltip .tip.on-bottom:after,.logo-tooltip .tip.on-top:after{border-left:7px solid transparent;border-right:7px solid transparent}.logo-tooltip .tip.on-left:after,.logo-tooltip .tip.on-right:after{border-top:7px solid transparent;border-bottom:7px solid transparent}.logo-tooltip{position:relative;color:#e94a34;cursor:pointer}.logo-tooltip .tip{position:absolute;width:180px;color:#fff;font-size:14px;font-style:normal;line-height:1.4;text-align:center;border-radius:3px;background:#333;padding:8px 12px;box-sizing:border-box;cursor:auto;z-index:10;opacity:0;visibility:hidden;transition:all .25s ease-in}.logo-tooltip .tip:after{position:absolute;width:0;height:0;content:\"\"}.logo-tooltip .tip.on-top{bottom:25px;left:0}.logo-tooltip .tip.on-top:after{bottom:-7px;left:10px;border-top:7px solid #333}.logo-tooltip .tip.on-right{top:-5px;left:103%}.logo-tooltip .tip.on-right:after{top:37%;left:-7px;border-right:7px solid #333}.logo-tooltip .tip.on-bottom{top:25px;left:0}.logo-tooltip .tip.on-bottom:after{top:-7px;left:10px;border-bottom:7px solid #333}.logo-tooltip .tip.on-left{top:-100%;right:103%}.logo-tooltip .tip.on-left:after{top:37%;right:-7px;border-left:7px solid #333}.logo-tooltip:hover .tip{opacity:1;visibility:visible}.logo-tooltip:hover .tip.on-top{transform:translateY(-15px)}.logo-tooltip:hover .tip.on-right{transform:translateX(15px)}.logo-tooltip:hover .tip.on-bottom{transform:translateY(15px)}.logo-tooltip:hover .tip.on-left{transform:translateX(-15px)}.test{content:\"a\";content:\"ba\";content:\"aa\";content:\"aade\";content:\"abde\"}:root .basic,:root .gray,:root .secondary{color:var(--leds-contrast-90pct)}:root .danger,:root .info,:root .success,:root .warning{color:var(--white)}:root .outline.primary,:root .outline.primary:active,:root .outline.primary:focus,:root .outline.primary:hover{border-color:var(--light-600)}:root .outline.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .outline.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .outline.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .outline.secondary{color:var(--leds-contrast-90pct)}:root .outline.secondary,:root .outline.secondary:active,:root .outline.secondary:focus,:root .outline.secondary:hover{border-color:var(--light-600)}:root .outline.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.basic{color:var(--leds-contrast-90pct)}:root .outline.basic,:root .outline.basic:active,:root .outline.basic:focus,:root .outline.basic:hover{border-color:var(--light-600)}:root .outline.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.neutral,:root .outline.neutral:active,:root .outline.neutral:focus,:root .outline.neutral:hover{border-color:var(--light-600)}:root .outline.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .outline.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .outline.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .outline.light{border-color:rgba(var(--light-rgb),.5)}:root .outline.light:active,:root .outline.light:focus,:root .outline.light:hover{border-color:var(--light)}:root .outline.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .outline.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .outline.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .outline.dark,:root .outline.dark:active,:root .outline.dark:focus,:root .outline.dark:hover{border-color:var(--light-600)}:root .outline.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .outline.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .outline.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .outline.gray{color:var(--leds-contrast-90pct)}:root .outline.gray,:root .outline.gray:active,:root .outline.gray:focus,:root .outline.gray:hover{border-color:var(--light-600)}:root .outline.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.info{color:var(--info)}:root .outline.info,:root .outline.info:active,:root .outline.info:focus,:root .outline.info:hover{border-color:var(--light-600)}:root .outline.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .outline.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .outline.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .outline.danger{color:var(--danger)}:root .outline.danger,:root .outline.danger:active,:root .outline.danger:focus,:root .outline.danger:hover{border-color:var(--light-600)}:root .outline.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .outline.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .outline.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .outline.warning{color:var(--warning)}:root .outline.warning,:root .outline.warning:active,:root .outline.warning:focus,:root .outline.warning:hover{border-color:var(--light-600)}:root .outline.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .outline.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .outline.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .outline.success{color:var(--success)}:root .outline.success,:root .outline.success:active,:root .outline.success:focus,:root .outline.success:hover{border-color:var(--light-600)}:root .outline.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .outline.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .outline.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}:root .ghost.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .ghost.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .ghost.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .ghost.secondary,:root .ghost.secondary:hover{color:var(--leds-contrast-90pct)}:root .ghost.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus))}:root .ghost.basic,:root .ghost.basic:hover,:root .ghost.secondary:focus{color:var(--leds-contrast-90pct)}:root .ghost.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .ghost.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .ghost.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .ghost.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .ghost.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .ghost.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .ghost.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .ghost.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .ghost.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .ghost.gray,:root .ghost.gray:hover{color:var(--leds-contrast-90pct)}:root .ghost.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.info{color:var(--info)}:root .ghost.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .ghost.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .ghost.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .ghost.danger{color:var(--danger)}:root .ghost.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .ghost.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .ghost.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .ghost.warning{color:var(--warning)}:root .ghost.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .ghost.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .ghost.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .ghost.success{color:var(--success)}:root .ghost.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .ghost.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .ghost.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}::ng-deep :root{--tree-font-color:var(--leds-contrast-90pct);--tree-item-active-background-color:var(--leds-contrast-5pct);--tree-item-hover-background-color:var(--leds-contrast-5pct);--tree-item-focus-background-color:var(--leds-contrast-5pct)}:host{display:block;padding:0;margin:0;font-family:Nunito Sans!important;opacity:1;transition:all .5s ease-out;overflow-y:auto;overflow-x:hidden;height:100%;box-sizing:border-box}:host ul{list-style:none;padding:0}:host ul li{position:relative;box-sizing:border-box}:host ul li.group .label-group{background-color:var(--leds-contrast-5pct)}:host ul li .selector{position:absolute;z-index:1;top:8px}:host ul li .label{display:flex;color:var(--leds-contrast-90pct);padding:4px;font-size:16px!important;min-height:38px;box-sizing:border-box;align-items:center;border-radius:4px;justify-content:space-between;cursor:auto;position:relative}:host ul li .label:focus,:host ul li .label:focus-within,:host ul li .label:hover{background-color:var(--leds-contrast-5pct);transition:color .1s ease-in}:host ul li .label.router-link-active{background-color:var(--leds-contrast-5pct)}:host ul li .label.router-link-active a{font-weight:700!important}:host ul li .label.check-active a{margin-left:15px}:host ul li .label .arrow{margin-left:4px;border-radius:4px}:host ul li .label .arrow:before{top:-1px}:host ul li .label .arrow.no-children-item{opacity:.15}:host ul li .label .label-items{display:flex;align-items:center;justify-content:flex-start;flex-grow:1;padding-left:4px;cursor:pointer}:host ul li .label .label-items .title{display:block;text-overflow:ellipsis;overflow:hidden;margin-top:0}:host ul li .label a{width:100%;color:var(--leds-contrast-90pct);text-decoration:none;padding-left:4px;cursor:pointer;line-height:normal;font-size:16px!important}:host ul li .label a.none{position:absolute;display:inline-block;width:0;height:0;overflow:hidden;opacity:0;visibility:hidden;top:0;left:0}:host ul li .label label{position:absolute;z-index:1;display:inline-block;width:36px;height:36px;top:1px;left:0}:host ul li logo-tree{height:100%;max-height:0;opacity:0;transition:all .5s ease-out;overflow:hidden}:host ul li logo-tree.show{max-height:max-content;opacity:1;padding-left:0;transition:all .5s ease-out}:host ul li .opener[type=checkbox]:checked+.label>div.arrow{transform:rotate(90deg)}:host ul li .opener[type=checkbox]:checked+.label+logo-tree{max-height:max-content;opacity:1;transition:all .5s ease-out}:host .emitter{background:rgba(200,20,20,.1);width:100%;height:48px}:host .item-icon{border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;display:inline-block;width:30px;height:30px}"]
},] }
];
TreeComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: HttpClient }
];
TreeComponent.propDecorators = {
group: [{ type: Input }],
classes: [{ type: Input }],
iconClasses: [{ type: Input }],
items: [{ type: Input }],
start: [{ type: Input }],
paddingLeft: [{ type: Input }],
request: [{ type: Input }],
roles: [{ type: Input }],
itemClick: [{ type: Output }],
categoryClick: [{ type: Output }],
routeItemActivated: [{ type: Output }],
itemCheckChange: [{ type: Output }],
elementId: [{ type: Input }],
level: [{ type: Input, args: ['level',] }]
};
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/**
* Emits the defined method when route is active and set a class name when route is active.
*
* __Usage Example:__
*
* ```html
* <a
* [routerLink]="['home']"
* routerLinkActive="add-active-css-class"
* #reference="routerLinkActive"
* [isActiveRoute]="reference"
* (isActiveRouteEmitter)="isActiveRoute($event)"
* >
* Link to Home
* </a> - this link is {{route && route.isActive ? 'active' : 'not active'}}
* ```
*/
class IsActiveRouteDirective {
constructor(router) {
this.router = router;
this.isActiveRouteEmitter = new EventEmitter();
this.subscription = this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.update();
}
});
}
ngAfterContentInit() {
this.update();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
update() {
Promise.resolve().then(() => {
if (this.isActiveRoute && this.isActiveRoute.isActive) {
this.isActiveRouteEmitter.emit(this.isActiveRoute);
}
});
}
}
IsActiveRouteDirective.decorators = [
{ type: Directive, args: [{
selector: '[isActiveRoute]',
},] }
];
IsActiveRouteDirective.ctorParameters = () => [
{ type: Router }
];
IsActiveRouteDirective.propDecorators = {
isActiveRoute: [{ type: Input }],
isActiveRouteEmitter: [{ type: Output }]
};
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/**
* A tree view represents a hierarchical view of information, where each item can have a number of subitems.
* Click on the arrow(s) to open or close the tree branches.
*
* @stacked-example(Tree Showcase, logo/tree-sample/tree-showcase/tree-showcase.component)
*
* ### Installation
* All public npm packages of Logo Software is at [https://www.npmjs.com/~logofe](https://www.npmjs.com/~logofe).
* To install Tree Module:
*
* ```bash
* $ npm set registry https://registry.npmjs.org/
* $ npm install @logo-software/tree -s
* ```
*
* Then add TreeModule to @NgModule `imports` section
*
* <sub>app.module.ts</sub>
*
* ```typescript
* @NgModule({
* imports: [CommonModule, TreeModule],
* })
* export class AppModule {
* }
* ```
*/
class TreeModule {
constructor(parentModule, http) {
this.http = http;
if (!http) {
throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
'See also https://github.com/angular/angular/issues/20575');
}
}
}
TreeModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule],
declarations: [TreeComponent, IsActiveRouteDirective],
exports: [TreeComponent],
providers: [],
},] }
];
TreeModule.ctorParameters = () => [
{ type: TreeModule, decorators: [{ type: Optional }, { type: SkipSelf }] },
{ type: HttpClient, decorators: [{ type: Optional }] }
];
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/*
* Public API Surface of tree
*/
/**
* Generated bundle index. Do not edit.
*/
export { IsActiveRouteDirective, TreeComponent, TreeModule };
//# sourceMappingURL=logo-software-tree.js.map