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>
143 lines (135 loc) • 8.62 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/cdk/drag-drop'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('sv-tree-view', ['exports', '/core', '@angular/cdk/drag-drop', '@angular/material/icon', '@angular/material/checkbox', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['sv-tree-view'] = {}, global.ng.core, global.ng.cdk.dragDrop, global.ng.material.icon, global.ng.material.checkbox, global.ng.common));
}(this, (function (exports, core, dragDrop, icon, checkbox, common) { 'use strict';
var SvTreeViewComponent = /** @class */ (function () {
function SvTreeViewComponent(cdr) {
this.cdr = cdr;
this.fieldName = 'label';
this.checkbox = false;
this.draggable = false;
this.autoCheck = false;
this.rowClick = new core.EventEmitter();
this.rowExpand = new core.EventEmitter();
this.rowSelect = new core.EventEmitter();
this.changeRowIndeterminateStatus = new core.EventEmitter();
}
SvTreeViewComponent.prototype.ngOnInit = function () {
};
SvTreeViewComponent.prototype.ngAfterContentChecked = function () {
this.cdr.detectChanges();
};
SvTreeViewComponent.prototype.expandRow = function (row) {
row.expanded = !row.expanded;
this.rowExpand.emit(row);
};
SvTreeViewComponent.prototype.clickRow = function (row) {
if (!this.checkbox) {
this.rowClick.emit(row);
}
};
SvTreeViewComponent.prototype.drop = function (event) {
if (event.previousContainer === event.container) {
dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
dragDrop.transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
}
};
SvTreeViewComponent.prototype.rowSelected = function (row) {
var _a;
row.selected = !row.selected;
if (((_a = row.children) === null || _a === void 0 ? void 0 : _a.length) && this.autoCheck) {
this.checkNestedList(row.children, row.selected);
}
if (this.autoCheck) {
this.checkEntireList(this.treeList);
}
this.rowSelect.emit(row);
};
SvTreeViewComponent.prototype.checkNestedList = function (list, value) {
var _this = this;
list.forEach(function (x) {
var _a;
x.selected = value;
if ((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) {
_this.checkNestedList(x.children, value);
}
});
};
SvTreeViewComponent.prototype.checkIndeterminate = function (row) {
if (this.autoCheck) {
this.checkEntireList(this.treeList);
if (row.hasOwnProperty('indeterminate')) {
this.changeRowIndeterminateStatus.emit(row);
}
}
};
SvTreeViewComponent.prototype.checkEntireList = function (list) {
var _this = this;
list.forEach(function (item) {
var _a;
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
item.indeterminate = !item.children.every(function (i) { return i.selected; }) && item.children.some(function (i) { return i.selected; });
item.selected = item.children.every(function (x) { return x.selected; });
_this.checkEntireList(item.children);
}
});
};
return SvTreeViewComponent;
}());
SvTreeViewComponent.decorators = [
{ type: core.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)}"]
},] }
];
SvTreeViewComponent.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef }
]; };
SvTreeViewComponent.propDecorators = {
treeList: [{ type: core.Input }],
fieldName: [{ type: core.Input }],
checkbox: [{ type: core.Input }],
draggable: [{ type: core.Input }],
autoCheck: [{ type: core.Input }],
customTemplate: [{ type: core.Input }],
rowClick: [{ type: core.Output }],
rowExpand: [{ type: core.Output }],
rowSelect: [{ type: core.Output }],
changeRowIndeterminateStatus: [{ type: core.Output }]
};
var SvTreeViewModule = /** @class */ (function () {
function SvTreeViewModule() {
}
return SvTreeViewModule;
}());
SvTreeViewModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
SvTreeViewComponent
],
imports: [
common.CommonModule,
icon.MatIconModule,
checkbox.MatCheckboxModule,
dragDrop.DragDropModule
],
exports: [
SvTreeViewComponent
]
},] }
];
/*
* Public API Surface of sv-tree-view
*/
/**
* Generated bundle index. Do not edit.
*/
exports.SvTreeViewComponent = SvTreeViewComponent;
exports.SvTreeViewModule = SvTreeViewModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=sv-tree-view.umd.js.map