sv-tree-view
Version:
<p align="center"> <img style="text-align: center" src="https://angular-shortcode.web.app/assets/icons/logo-128.png"/> <h1 align="center">Angular Shortcode</h1> </p>
2 lines • 5.67 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/cdk/drag-drop"),require("@angular/material/icon"),require("@angular/material/checkbox"),require("@angular/common")):"function"==typeof define&&define.amd?define("sv-tree-view",["exports","@angular/core","@angular/cdk/drag-drop","@angular/material/icon","@angular/material/checkbox","@angular/common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["sv-tree-view"]={},e.ng.core,e.ng.cdk.dragDrop,e.ng.material.icon,e.ng.material.checkbox,e.ng.common)}(this,(function(e,t,n,r,i,o){"use strict";var c=function(){function e(e){this.cdr=e,this.fieldName="label",this.checkbox=!1,this.draggable=!1,this.autoCheck=!1,this.rowClick=new t.EventEmitter,this.rowExpand=new t.EventEmitter,this.rowSelect=new t.EventEmitter,this.changeRowIndeterminateStatus=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.ngAfterContentChecked=function(){this.cdr.detectChanges()},e.prototype.expandRow=function(e){e.expanded=!e.expanded,this.rowExpand.emit(e)},e.prototype.clickRow=function(e){this.checkbox||this.rowClick.emit(e)},e.prototype.drop=function(e){e.previousContainer===e.container?n.moveItemInArray(e.container.data,e.previousIndex,e.currentIndex):n.transferArrayItem(e.previousContainer.data,e.container.data,e.previousIndex,e.currentIndex)},e.prototype.rowSelected=function(e){var t;e.selected=!e.selected,(null===(t=e.children)||void 0===t?void 0:t.length)&&this.autoCheck&&this.checkNestedList(e.children,e.selected),this.autoCheck&&this.checkEntireList(this.treeList),this.rowSelect.emit(e)},e.prototype.checkNestedList=function(e,t){var n=this;e.forEach((function(e){var r;e.selected=t,(null===(r=e.children)||void 0===r?void 0:r.length)&&n.checkNestedList(e.children,t)}))},e.prototype.checkIndeterminate=function(e){this.autoCheck&&(this.checkEntireList(this.treeList),e.hasOwnProperty("indeterminate")&&this.changeRowIndeterminateStatus.emit(e))},e.prototype.checkEntireList=function(e){var t=this;e.forEach((function(e){var n;(null===(n=e.children)||void 0===n?void 0:n.length)&&(e.indeterminate=!e.children.every((function(e){return e.selected}))&&e.children.some((function(e){return e.selected})),e.selected=e.children.every((function(e){return e.selected})),t.checkEntireList(e.children))}))},e}();c.decorators=[{type:t.Component,args:[{selector:"sv-tree-view",template:'<div class="sv-tree" cdkDropListGroup>\n <ng-container [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{list: treeList}"></ng-container>\n</div>\n\n<ng-template #tree let-list="list">\n <div class="sv-tree-list"\n cdkDropList\n [cdkDropListData]="list"\n [cdkDropListDisabled]="!draggable"\n (cdkDropListDropped)="drop($event)">\n <div class="sv-tree-content"\n cdkDrag\n *ngFor="let item of list">\n <div class="sv-tree-content-row"\n [style.cursor]="checkbox ? null : \'pointer\'"\n (click)="clickRow(item)">\n <div class="sv-tree-content-row-expand" (click)="expandRow(item)">\n <mat-icon *ngIf="item.children?.length">{{item.expanded ? \'expand_less\' : \'expand_more\'}}</mat-icon>\n </div>\n <div class="sv-tree-content-row-checkbox" *ngIf="checkbox">\n <mat-checkbox\n [indeterminate]="item.indeterminate"\n [checked]="item.selected"\n [disabled]="item.disabled"\n (indeterminateChange)="checkIndeterminate(item)"\n (change)="rowSelected(item)">\n </mat-checkbox>\n </div>\n <ng-container *ngIf="!customTemplate">\n <label>{{item[fieldName]}}</label>\n </ng-container>\n <ng-container *ngIf="customTemplate">\n <ng-template [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{data: item}"></ng-template>\n </ng-container>\n </div>\n <div *ngIf="item?.children?.length && item.expanded" [style.marginLeft]="\'24px\'">\n <ng-container [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{list: item.children}"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n',styles:[".sv-tree{height:100%}.sv-tree,.sv-tree-content{width:100%;display:flex;flex-direction:column}.sv-tree-content-row{height:38px;display:flex;align-items:center;border-radius:4px}.sv-tree-content-row:hover{background-color:#ececec}.sv-tree-content-row-checkbox,.sv-tree-content-row-expand{width:24px;height:24px}.cdk-drag-preview{background-color:hsla(0,0%,98%,.8313725490196079);box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sv-tree-content:last-child{border:none}.sv-tree-list.cdk-drop-list-dragging .sv-tree-content:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],c.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},c.propDecorators={treeList:[{type:t.Input}],fieldName:[{type:t.Input}],checkbox:[{type:t.Input}],draggable:[{type:t.Input}],autoCheck:[{type:t.Input}],customTemplate:[{type:t.Input}],rowClick:[{type:t.Output}],rowExpand:[{type:t.Output}],rowSelect:[{type:t.Output}],changeRowIndeterminateStatus:[{type:t.Output}]};var a=function(){};a.decorators=[{type:t.NgModule,args:[{declarations:[c],imports:[o.CommonModule,r.MatIconModule,i.MatCheckboxModule,n.DragDropModule],exports:[c]}]}],e.SvTreeViewComponent=c,e.SvTreeViewModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=sv-tree-view.umd.min.js.map