primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 10.7 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/api"),require("rxjs")):"function"==typeof define&&define.amd?define("primeng/organizationchart",["exports","@angular/core","@angular/animations","@angular/common","primeng/api","rxjs"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.organizationchart={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.api,e.rxjs)}(this,(function(e,t,n,o,i,a){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */Object.create;function r(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,i,a=n.call(e),r=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)r.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(i)throw i.error}}return r}Object.create;var l=function(){function e(e,t){var n=this;this.cd=t,this.chart=e,this.subscription=this.chart.selectionSource$.subscribe((function(){n.cd.markForCheck()}))}return Object.defineProperty(e.prototype,"leaf",{get:function(){return 0!=this.node.leaf&&!(this.node.children&&this.node.children.length)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"colspan",{get:function(){return this.node.children&&this.node.children.length?2*this.node.children.length:null},enumerable:!1,configurable:!0}),e.prototype.onNodeClick=function(e,t){this.chart.onNodeClick(e,t)},e.prototype.toggleNode=function(e,t){t.expanded=!t.expanded,t.expanded?this.chart.onNodeExpand.emit({originalEvent:e,node:this.node}):this.chart.onNodeCollapse.emit({originalEvent:e,node:this.node}),e.preventDefault()},e.prototype.isSelected=function(){return this.chart.isSelected(this.node)},e.prototype.ngOnDestroy=function(){this.subscription.unsubscribe()},e}();l.decorators=[{type:t.Component,args:[{selector:"[pOrganizationChartNode]",template:'\n <tbody *ngIf="node">\n <tr>\n <td [attr.colspan]="colspan">\n <div [class]="node.styleClass" [ngClass]="{\'p-organizationchart-node-content\': true, \'p-organizationchart-selectable-node\': chart.selectionMode && node.selectable !== false,\'p-highlight\':isSelected()}"\n (click)="onNodeClick($event,node)">\n <div *ngIf="!chart.getTemplateForNode(node)">{{node.label}}</div>\n <div *ngIf="chart.getTemplateForNode(node)">\n <ng-container *ngTemplateOutlet="chart.getTemplateForNode(node); context: {$implicit: node}"></ng-container>\n </div>\n <a *ngIf="!leaf" tabindex="0" class="p-node-toggler" (click)="toggleNode($event, node)" (keydown.enter)="toggleNode($event, node)">\n <i class="p-node-toggler-icon pi" [ngClass]="{\'pi-chevron-down\': node.expanded, \'pi-chevron-up\': !node.expanded}"></i>\n </a>\n </div>\n </td>\n </tr>\n <tr [ngClass]="!leaf&&node.expanded ? \'p-organizationchart-node-visible\' : \'p-organizationchart-node-hidden\'" class="p-organizationchart-lines" [@childState]="\'in\'">\n <td [attr.colspan]="colspan">\n <div class="p-organizationchart-line-down"></div>\n </td>\n </tr>\n <tr [ngClass]="!leaf&&node.expanded ? \'p-organizationchart-node-visible\' : \'p-organizationchart-node-hidden\'" class="p-organizationchart-lines" [@childState]="\'in\'">\n <ng-container *ngIf="node.children && node.children.length === 1">\n <td [attr.colspan]="colspan">\n <div class="p-organizationchart-line-down"></div>\n </td>\n </ng-container>\n <ng-container *ngIf="node.children && node.children.length > 1">\n <ng-template ngFor let-child [ngForOf]="node.children" let-first="first" let-last="last">\n <td class="p-organizationchart-line-left" [ngClass]="{\'p-organizationchart-line-top\':!first}"> </td>\n <td class="p-organizationchart-line-right" [ngClass]="{\'p-organizationchart-line-top\':!last}"> </td>\n </ng-template>\n </ng-container>\n </tr>\n <tr [ngClass]="!leaf&&node.expanded ? \'p-organizationchart-node-visible\' : \'p-organizationchart-node-hidden\'" class="p-organizationchart-nodes" [@childState]="\'in\'">\n <td *ngFor="let child of node.children" colspan="2">\n <table class="p-organizationchart-table" pOrganizationChartNode [node]="child"></table>\n </td>\n </tr>\n </tbody>\n ',animations:[n.trigger("childState",[n.state("in",n.style({opacity:1})),n.transition("void => *",[n.style({opacity:0}),n.animate(150)]),n.transition("* => void",[n.animate(150,n.style({opacity:0}))])])],encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".p-organizationchart-table{border-collapse:separate;border-spacing:0;margin:0 auto}.p-organizationchart-table>tbody>tr>td{padding:0 .75rem;text-align:center;vertical-align:top}.p-organizationchart-node-content{display:inline-block;position:relative}.p-organizationchart-node-content .p-node-toggler{-ms-user-select:none;-webkit-user-select:none;bottom:-.75rem;cursor:pointer;height:1.5rem;left:50%;margin-left:-.75rem;position:absolute;user-select:none;width:1.5rem;z-index:2}.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{position:relative;top:.25rem}.p-organizationchart-line-down{height:20px;margin:0 auto;width:1px}.p-organizationchart-line-left,.p-organizationchart-line-right{border-radius:0}.p-organizationchart-selectable-node{cursor:pointer}.p-organizationchart .p-organizationchart-node-hidden{display:none}.p-organizationchart-preservespace .p-organizationchart-node-hidden{display:inherit;visibility:hidden}"]}]}],l.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[t.forwardRef((function(){return s}))]}]},{type:t.ChangeDetectorRef}]},l.propDecorators={node:[{type:t.Input}],root:[{type:t.Input}],first:[{type:t.Input}],last:[{type:t.Input}]};var s=function(){function e(e,n){this.el=e,this.cd=n,this.preserveSpace=!0,this.selectionChange=new t.EventEmitter,this.onNodeSelect=new t.EventEmitter,this.onNodeUnselect=new t.EventEmitter,this.onNodeExpand=new t.EventEmitter,this.onNodeCollapse=new t.EventEmitter,this.selectionSource=new a.Subject,this.selectionSource$=this.selectionSource.asObservable()}return Object.defineProperty(e.prototype,"selection",{get:function(){return this._selection},set:function(e){this._selection=e,this.initialized&&this.selectionSource.next()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"root",{get:function(){return this.value&&this.value.length?this.value[0]:null},enumerable:!1,configurable:!0}),e.prototype.ngAfterContentInit=function(){var e=this;this.templates.length&&(this.templateMap={}),this.templates.forEach((function(t){e.templateMap[t.getType()]=t.template})),this.initialized=!0},e.prototype.getTemplateForNode=function(e){return this.templateMap?e.type?this.templateMap[e.type]:this.templateMap.default:null},e.prototype.onNodeClick=function(e,t){var n=e.target;if((!n.className||-1===n.className.indexOf("p-node-toggler")&&-1===n.className.indexOf("p-node-toggler-icon"))&&this.selectionMode){if(!1===t.selectable)return;var o=this.findIndexInSelection(t),i=o>=0;"single"===this.selectionMode?i?(this.selection=null,this.onNodeUnselect.emit({originalEvent:e,node:t})):(this.selection=t,this.onNodeSelect.emit({originalEvent:e,node:t})):"multiple"===this.selectionMode&&(i?(this.selection=this.selection.filter((function(e,t){return t!=o})),this.onNodeUnselect.emit({originalEvent:e,node:t})):(this.selection=function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}(this.selection||[],[t]),this.onNodeSelect.emit({originalEvent:e,node:t}))),this.selectionChange.emit(this.selection),this.selectionSource.next()}},e.prototype.findIndexInSelection=function(e){var t=-1;if(this.selectionMode&&this.selection)if("single"===this.selectionMode)t=this.selection==e?0:-1;else if("multiple"===this.selectionMode)for(var n=0;n<this.selection.length;n++)if(this.selection[n]==e){t=n;break}return t},e.prototype.isSelected=function(e){return-1!=this.findIndexInSelection(e)},e}();s.decorators=[{type:t.Component,args:[{selector:"p-organizationChart",template:'\n <div [ngStyle]="style" [class]="styleClass" [ngClass]="{\'p-organizationchart p-component\': true, \'p-organizationchart-preservespace\': preserveSpace}">\n <table class="p-organizationchart-table" pOrganizationChartNode [node]="root" *ngIf="root"></table>\n </div>\n ',changeDetection:t.ChangeDetectionStrategy.OnPush}]}],s.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ChangeDetectorRef}]},s.propDecorators={value:[{type:t.Input}],style:[{type:t.Input}],styleClass:[{type:t.Input}],selectionMode:[{type:t.Input}],preserveSpace:[{type:t.Input}],selection:[{type:t.Input}],selectionChange:[{type:t.Output}],onNodeSelect:[{type:t.Output}],onNodeUnselect:[{type:t.Output}],onNodeExpand:[{type:t.Output}],onNodeCollapse:[{type:t.Output}],templates:[{type:t.ContentChildren,args:[i.PrimeTemplate]}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule],exports:[s,i.SharedModule],declarations:[s,l]}]}],e.OrganizationChart=s,e.OrganizationChartModule=c,e.OrganizationChartNode=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-organizationchart.umd.min.js.map