@logo-software/tree
Version:
A tree view represents a hierarchical view of information, where each item can have a number of subitems.
345 lines (336 loc) • 33.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common/http'), require('@angular/router'), require('/common')) :
typeof define === 'function' && define.amd ? define('-software/tree', ['exports', '@angular/core', '@angular/common/http', '@angular/router', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["logo-software"] = global["logo-software"] || {}, global["logo-software"].tree = {}), global.ng.core, global.ng.common.http, global.ng.router, global.ng.common));
})(this, (function (exports, core, http, router, common) { 'use strict';
/**
*
* 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>
* ```
*/
var TreeComponent = /** @class */ (function () {
/**
* 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
*/
function TreeComponent(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 core.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 core.EventEmitter();
/**
* The Matched router is activated this method will be triggered. It will push the tree item to the given method.
*/
this.routeItemActivated = new core.EventEmitter();
/**
* Item checkbox status change trigger. When clicked, clicked item will be emited
*/
this.itemCheckChange = new core.EventEmitter();
this._level = 0;
}
Object.defineProperty(TreeComponent.prototype, "level", {
get: function () {
return this._level;
},
set: function (level) {
++level;
this._level = level;
},
enumerable: false,
configurable: true
});
TreeComponent.prototype.ngOnInit = function () {
if (!this.elementId) {
this.elementId = this.generateElementId();
}
};
TreeComponent.prototype.generateElementId = function () {
return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
+ Math.random().toString(16).slice(2)
+ Date.now().toString(16).slice(4);
};
TreeComponent.prototype.open = function (routerLinkActive) {
this.recursiveParent(routerLinkActive.element.nativeElement);
};
TreeComponent.prototype.recursiveParent = function (element) {
var parent = element.closest('ul').closest('li');
if (parent) {
var input = parent.querySelector('input');
input.checked = true;
// if (!(element as any).closest('ul.top-level-accordion')) {
this.recursiveParent(parent);
// }
}
};
TreeComponent.prototype.getMenuList = function () {
var _this = this;
this.http.request(this.request).subscribe(function (response) { return _this.onSuccessHandler(response); });
};
TreeComponent.prototype.onSuccessHandler = function (response) {
this.items = response.body.children;
};
TreeComponent.prototype.htmlItemOnClick = function (item, $event) {
if (event) {
event.cancelBubble = true;
event.stopPropagation();
}
this.$onItemClick(item);
};
TreeComponent.prototype.$onItemClick = function (item) {
this.itemClick.emit(item);
};
TreeComponent.prototype.$onItemCheckChange = function (item) {
this.itemCheckChange.emit(item);
};
TreeComponent.prototype.htmlCategoryOnClick = function (item, $event) {
if (event) {
event.cancelBubble = true;
event.stopPropagation();
}
this.$onCategoryClick(item);
};
TreeComponent.prototype.$onCategoryClick = function (item) {
this.categoryClick.emit(item);
};
TreeComponent.prototype.htmlSetPadding = function (level, start) {
var val = Number(level) - (this.group ? 1 : 0);
var padding = val <= 0 ? 0 : val * this.paddingLeft + 'px';
return level >= start ? padding : this.paddingLeft + 'px';
};
TreeComponent.prototype.componentSetPadding = function (level, start) {
var currentPadding = this.htmlSetPadding(level, start).toString().replace('px', '');
return Math.floor(Number(currentPadding)) + 'px';
};
TreeComponent.prototype.onRouteItemActivated = function (item) {
this.routeItemActivated.emit(item);
};
/**
* set left padding size programmatically for collapsed menus.
* @param value
*/
TreeComponent.prototype.setPadding = function (value) {
if (value === void 0) { value = 0; }
this.paddingLeft = value;
};
return TreeComponent;
}());
TreeComponent.decorators = [
{ type: core.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 = function () { return [
{ type: core.ElementRef },
{ type: http.HttpClient }
]; };
TreeComponent.propDecorators = {
group: [{ type: core.Input }],
classes: [{ type: core.Input }],
iconClasses: [{ type: core.Input }],
items: [{ type: core.Input }],
start: [{ type: core.Input }],
paddingLeft: [{ type: core.Input }],
request: [{ type: core.Input }],
roles: [{ type: core.Input }],
itemClick: [{ type: core.Output }],
categoryClick: [{ type: core.Output }],
routeItemActivated: [{ type: core.Output }],
itemCheckChange: [{ type: core.Output }],
elementId: [{ type: core.Input }],
level: [{ type: core.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'}}
* ```
*/
var IsActiveRouteDirective = /** @class */ (function () {
function IsActiveRouteDirective(router$1) {
var _this = this;
this.router = router$1;
this.isActiveRouteEmitter = new core.EventEmitter();
this.subscription = this.router.events.subscribe(function (event) {
if (event instanceof router.NavigationEnd) {
_this.update();
}
});
}
IsActiveRouteDirective.prototype.ngAfterContentInit = function () {
this.update();
};
IsActiveRouteDirective.prototype.ngOnDestroy = function () {
this.subscription.unsubscribe();
};
IsActiveRouteDirective.prototype.update = function () {
var _this = this;
Promise.resolve().then(function () {
if (_this.isActiveRoute && _this.isActiveRoute.isActive) {
_this.isActiveRouteEmitter.emit(_this.isActiveRoute);
}
});
};
return IsActiveRouteDirective;
}());
IsActiveRouteDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[isActiveRoute]',
},] }
];
IsActiveRouteDirective.ctorParameters = function () { return [
{ type: router.Router }
]; };
IsActiveRouteDirective.propDecorators = {
isActiveRoute: [{ type: core.Input }],
isActiveRouteEmitter: [{ type: core.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 {
* }
* ```
*/
var TreeModule = /** @class */ (function () {
function TreeModule(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');
}
}
return TreeModule;
}());
TreeModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, router.RouterModule],
declarations: [TreeComponent, IsActiveRouteDirective],
exports: [TreeComponent],
providers: [],
},] }
];
TreeModule.ctorParameters = function () { return [
{ type: TreeModule, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] },
{ type: http.HttpClient, decorators: [{ type: core.Optional }] }
]; };
/*
* Public API Surface of tree
*/
/**
* Generated bundle index. Do not edit.
*/
exports.IsActiveRouteDirective = IsActiveRouteDirective;
exports.TreeComponent = TreeComponent;
exports.TreeModule = TreeModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=logo-software-tree.umd.js.map