ngx-ui-hero/esm2020/lib/tree-view/tree-view.component.mjs

Simple, fast and reliable utilities for Angular.

import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
import { TREEVIEW_CONFIG } from './config/tree-view-config.contants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./tree-view-item/tree-view-item.component";
export class TreeViewComponent {
    constructor(defaultOptions) {
        this.emptyResultsMessage = 'No results found at this moment.';
        this.showIcons = true;
        this.enableLabelLinkStyle = false;
        this.normalItemIconClass = 'fa fa-file';
        this.collapsableClosedItemIconClass = 'fa fa-folder';
        this.collapsableOpennedItemIconClass = 'fa fa-folder-open';
        this.expandAllOnInit = true;
        this.OnItemExpanded = new EventEmitter();
        this.OnItemClicked = new EventEmitter();
        Object.assign(this, defaultOptions);
        if (defaultOptions.styles) {
            Object.assign(this, defaultOptions.styles);
        }
    }
    ngOnInit() {
    }
}
TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewComponent, deps: [{ token: TREEVIEW_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TreeViewComponent, selector: "ui-tree-view", inputs: { columns: "columns", data: "data", idProperty: "idProperty", labelProperty: "labelProperty", collectionProperty: "collectionProperty", emptyResultsMessage: "emptyResultsMessage", showIcons: "showIcons", enableLabelLinkStyle: "enableLabelLinkStyle", normalItemIconClass: "normalItemIconClass", collapsableClosedItemIconClass: "collapsableClosedItemIconClass", collapsableOpennedItemIconClass: "collapsableOpennedItemIconClass", expandAllOnInit: "expandAllOnInit" }, outputs: { OnItemExpanded: "OnItemExpanded", OnItemClicked: "OnItemClicked" }, ngImport: i0, template: "<div class=\"treeview-container\">\n  <div class=\"treeview-header d-flex align-items-center justify-content-end\" *ngIf=\"columns?.length > 0\">\n    <div class=\"column-header {{column.captionClasses}}\" *ngFor=\"let column of columns\" \n      [ngStyle]=\"{'width': column.width}\"\n      [ngClass]=\"{'text-center': column.captionAlignment == 1, 'text-right': column.captionAlignment == 2}\">\n      \n      {{column.caption}}\n    </div>\n  </div>\n  \n  <div class=\"treeview-content\" *ngIf=\"data?.length > 0\">\n    <ul>\n      <li *ngFor=\"let row of data; let first = first; let last = last;\" \n        ui-tree-view-item\n        [row]=\"row\"\n        [columns]=\"columns\"\n        [idProperty]=\"idProperty\"\n        [labelProperty]=\"labelProperty\"\n        [collectionProperty]=\"collectionProperty\"\n        [showIcons]=\"showIcons\"\n        [enableLabelLinkStyle]=\"enableLabelLinkStyle\"\n        [normalItemIconClass]=\"normalItemIconClass\"\n        [collapsableClosedItemIconClass]=\"collapsableClosedItemIconClass\"\n        [collapsableOpennedItemIconClass]=\"collapsableOpennedItemIconClass\"\n        [first]=\"first\"\n        [last]=\"last\"\n        [expandedOnInit]=\"expandAllOnInit\"\n        [rootItem]=\"true\"\n        (OnItemExpanded)=\"OnItemExpanded.emit($event)\"\n        (OnItemClicked)=\"OnItemClicked.emit($event)\"\n        >\n      </li>\n    </ul>\n  </div>\n\n  <p *ngIf=\"!data || data.length == 0\">{{emptyResultsMessage}}</p>\n</div>\n", styles: [".treeview-container .treeview-header{border-bottom:3px solid #CCC}.treeview-container .treeview-header .column-header{border:1px solid #CCC;border-bottom:0;padding:10px;margin-left:5px}.treeview-container .treeview-content ul{position:relative;padding:0;margin:0}.treeview-container .treeview-content ul li{list-style:none!important}@media (max-width: 860px){.treeview-header{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.TreeViewItemComponent, selector: "[ui-tree-view-item]", inputs: ["row", "idProperty", "labelProperty", "collectionProperty", "columns", "showIcons", "enableLabelLinkStyle", "normalItemIconClass", "collapsableClosedItemIconClass", "collapsableOpennedItemIconClass", "first", "last", "openned", "expandedOnInit", "rootItem"], outputs: ["OnItemExpanded", "OnItemClicked"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TreeViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ui-tree-view', template: "<div class=\"treeview-container\">\n  <div class=\"treeview-header d-flex align-items-center justify-content-end\" *ngIf=\"columns?.length > 0\">\n    <div class=\"column-header {{column.captionClasses}}\" *ngFor=\"let column of columns\" \n      [ngStyle]=\"{'width': column.width}\"\n      [ngClass]=\"{'text-center': column.captionAlignment == 1, 'text-right': column.captionAlignment == 2}\">\n      \n      {{column.caption}}\n    </div>\n  </div>\n  \n  <div class=\"treeview-content\" *ngIf=\"data?.length > 0\">\n    <ul>\n      <li *ngFor=\"let row of data; let first = first; let last = last;\" \n        ui-tree-view-item\n        [row]=\"row\"\n        [columns]=\"columns\"\n        [idProperty]=\"idProperty\"\n        [labelProperty]=\"labelProperty\"\n        [collectionProperty]=\"collectionProperty\"\n        [showIcons]=\"showIcons\"\n        [enableLabelLinkStyle]=\"enableLabelLinkStyle\"\n        [normalItemIconClass]=\"normalItemIconClass\"\n        [collapsableClosedItemIconClass]=\"collapsableClosedItemIconClass\"\n        [collapsableOpennedItemIconClass]=\"collapsableOpennedItemIconClass\"\n        [first]=\"first\"\n        [last]=\"last\"\n        [expandedOnInit]=\"expandAllOnInit\"\n        [rootItem]=\"true\"\n        (OnItemExpanded)=\"OnItemExpanded.emit($event)\"\n        (OnItemClicked)=\"OnItemClicked.emit($event)\"\n        >\n      </li>\n    </ul>\n  </div>\n\n  <p *ngIf=\"!data || data.length == 0\">{{emptyResultsMessage}}</p>\n</div>\n", styles: [".treeview-container .treeview-header{border-bottom:3px solid #CCC}.treeview-container .treeview-header .column-header{border:1px solid #CCC;border-bottom:0;padding:10px;margin-left:5px}.treeview-container .treeview-content ul{position:relative;padding:0;margin:0}.treeview-container .treeview-content ul li{list-style:none!important}@media (max-width: 860px){.treeview-header{display:none!important}}\n"] }]
        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [TREEVIEW_CONFIG]
                }, {
                    type: Optional
                }] }]; }, propDecorators: { columns: [{
                type: Input
            }], data: [{
                type: Input
            }], idProperty: [{
                type: Input
            }], labelProperty: [{
                type: Input
            }], collectionProperty: [{
                type: Input
            }], emptyResultsMessage: [{
                type: Input
            }], showIcons: [{
                type: Input
            }], enableLabelLinkStyle: [{
                type: Input
            }], normalItemIconClass: [{
                type: Input
            }], collapsableClosedItemIconClass: [{
                type: Input
            }], collapsableOpennedItemIconClass: [{
                type: Input
            }], expandAllOnInit: [{
                type: Input
            }], OnItemExpanded: [{
                type: Output
            }], OnItemClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC11aS1oZXJvL3NyYy9saWIvdHJlZS12aWV3L3RyZWUtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdWktaGVyby9zcmMvbGliL3RyZWUtdmlldy90cmVlLXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBVSxRQUFRLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBR2pHLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQVFyRSxNQUFNLE9BQU8saUJBQWlCO0lBZ0I1QixZQUN1QyxjQUE4QjtRQVg1RCx3QkFBbUIsR0FBWSxrQ0FBa0MsQ0FBQztRQUNsRSxjQUFTLEdBQWEsSUFBSSxDQUFDO1FBQzNCLHlCQUFvQixHQUFZLEtBQUssQ0FBQztRQUN0Qyx3QkFBbUIsR0FBWSxZQUFZLENBQUM7UUFDNUMsbUNBQThCLEdBQVksY0FBYyxDQUFDO1FBQ3pELG9DQUErQixHQUFZLG1CQUFtQixDQUFDO1FBQy9ELG9CQUFlLEdBQWEsSUFBSSxDQUFDO1FBQ2hDLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUN6QyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFLaEQsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsY0FBYyxDQUFDLENBQUM7UUFFcEMsSUFBSSxjQUFjLENBQUMsTUFBTSxFQUFFO1lBQ3pCLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUM1QztJQUNILENBQUM7SUFFRCxRQUFRO0lBQ1IsQ0FBQzs7K0dBM0JVLGlCQUFpQixrQkFpQmxCLGVBQWU7bUdBakJkLGlCQUFpQiw2bEJDWDlCLG85Q0FxQ0E7NEZEMUJhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxjQUFjOzswQkFxQnJCLE1BQU07MkJBQUMsZUFBZTs7MEJBQUcsUUFBUTs0Q0FoQjNCLE9BQU87c0JBQWYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSztnQkFDRyxtQkFBbUI7c0JBQTNCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBQ0csbUJBQW1CO3NCQUEzQixLQUFLO2dCQUNHLDhCQUE4QjtzQkFBdEMsS0FBSztnQkFDRywrQkFBK0I7c0JBQXZDLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDSSxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5qZWN0LCBJbnB1dCwgT25Jbml0LCBPcHRpb25hbCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFRyZWVWaWV3Q29uZmlnIH0gZnJvbSAnLi9jb25maWcvdHJlZS12aWV3LWNvbmZpZyc7XG5pbXBvcnQgeyBUUkVFVklFV19DT05GSUcgfSBmcm9tICcuL2NvbmZpZy90cmVlLXZpZXctY29uZmlnLmNvbnRhbnRzJztcbmltcG9ydCB7IFRyZWVWaWV3Q29sdW1uTW9kZWwgfSBmcm9tICcuL21vZGVscy90cmVlLXZpZXctY29sdW1uLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndWktdHJlZS12aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RyZWUtdmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RyZWUtdmlldy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFRyZWVWaWV3Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgY29sdW1uczogQXJyYXk8VHJlZVZpZXdDb2x1bW5Nb2RlbD47XG4gIEBJbnB1dCgpIGRhdGE6IEFycmF5PGFueT47XG4gIEBJbnB1dCgpIGlkUHJvcGVydHk6IHN0cmluZztcbiAgQElucHV0KCkgbGFiZWxQcm9wZXJ0eTogc3RyaW5nO1xuICBASW5wdXQoKSBjb2xsZWN0aW9uUHJvcGVydHk6IHN0cmluZztcbiAgQElucHV0KCkgZW1wdHlSZXN1bHRzTWVzc2FnZT86IHN0cmluZyA9ICdObyByZXN1bHRzIGZvdW5kIGF0IHRoaXMgbW9tZW50Lic7XG4gIEBJbnB1dCgpIHNob3dJY29ucz86IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBlbmFibGVMYWJlbExpbmtTdHlsZTogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBub3JtYWxJdGVtSWNvbkNsYXNzPzogc3RyaW5nID0gJ2ZhIGZhLWZpbGUnO1xuICBASW5wdXQoKSBjb2xsYXBzYWJsZUNsb3NlZEl0ZW1JY29uQ2xhc3M/OiBzdHJpbmcgPSAnZmEgZmEtZm9sZGVyJztcbiAgQElucHV0KCkgY29sbGFwc2FibGVPcGVubmVkSXRlbUljb25DbGFzcz86IHN0cmluZyA9ICdmYSBmYS1mb2xkZXItb3Blbic7XG4gIEBJbnB1dCgpIGV4cGFuZEFsbE9uSW5pdD86IGJvb2xlYW4gPSB0cnVlO1xuICBAT3V0cHV0KCkgT25JdGVtRXhwYW5kZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpIE9uSXRlbUNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBASW5qZWN0KFRSRUVWSUVXX0NPTkZJRykgQE9wdGlvbmFsKCkgZGVmYXVsdE9wdGlvbnM6IFRyZWVWaWV3Q29uZmlnLFxuICApIHtcbiAgICBPYmplY3QuYXNzaWduKHRoaXMsIGRlZmF1bHRPcHRpb25zKTtcblxuICAgIGlmIChkZWZhdWx0T3B0aW9ucy5zdHlsZXMpIHtcbiAgICAgIE9iamVjdC5hc3NpZ24odGhpcywgZGVmYXVsdE9wdGlvbnMuc3R5bGVzKTtcbiAgICB9XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwidHJlZXZpZXctY29udGFpbmVyXCI+XG4gIDxkaXYgY2xhc3M9XCJ0cmVldmlldy1oZWFkZXIgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNvbnRlbnQtZW5kXCIgKm5nSWY9XCJjb2x1bW5zPy5sZW5ndGggPiAwXCI+XG4gICAgPGRpdiBjbGFzcz1cImNvbHVtbi1oZWFkZXIge3tjb2x1bW4uY2FwdGlvbkNsYXNzZXN9fVwiICpuZ0Zvcj1cImxldCBjb2x1bW4gb2YgY29sdW1uc1wiIFxuICAgICAgW25nU3R5bGVdPVwieyd3aWR0aCc6IGNvbHVtbi53aWR0aH1cIlxuICAgICAgW25nQ2xhc3NdPVwieyd0ZXh0LWNlbnRlcic6IGNvbHVtbi5jYXB0aW9uQWxpZ25tZW50ID09IDEsICd0ZXh0LXJpZ2h0JzogY29sdW1uLmNhcHRpb25BbGlnbm1lbnQgPT0gMn1cIj5cbiAgICAgIFxuICAgICAge3tjb2x1bW4uY2FwdGlvbn19XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBcbiAgPGRpdiBjbGFzcz1cInRyZWV2aWV3LWNvbnRlbnRcIiAqbmdJZj1cImRhdGE/Lmxlbmd0aCA+IDBcIj5cbiAgICA8dWw+XG4gICAgICA8bGkgKm5nRm9yPVwibGV0IHJvdyBvZiBkYXRhOyBsZXQgZmlyc3QgPSBmaXJzdDsgbGV0IGxhc3QgPSBsYXN0O1wiIFxuICAgICAgICB1aS10cmVlLXZpZXctaXRlbVxuICAgICAgICBbcm93XT1cInJvd1wiXG4gICAgICAgIFtjb2x1bW5zXT1cImNvbHVtbnNcIlxuICAgICAgICBbaWRQcm9wZXJ0eV09XCJpZFByb3BlcnR5XCJcbiAgICAgICAgW2xhYmVsUHJvcGVydHldPVwibGFiZWxQcm9wZXJ0eVwiXG4gICAgICAgIFtjb2xsZWN0aW9uUHJvcGVydHldPVwiY29sbGVjdGlvblByb3BlcnR5XCJcbiAgICAgICAgW3Nob3dJY29uc109XCJzaG93SWNvbnNcIlxuICAgICAgICBbZW5hYmxlTGFiZWxMaW5rU3R5bGVdPVwiZW5hYmxlTGFiZWxMaW5rU3R5bGVcIlxuICAgICAgICBbbm9ybWFsSXRlbUljb25DbGFzc109XCJub3JtYWxJdGVtSWNvbkNsYXNzXCJcbiAgICAgICAgW2NvbGxhcHNhYmxlQ2xvc2VkSXRlbUljb25DbGFzc109XCJjb2xsYXBzYWJsZUNsb3NlZEl0ZW1JY29uQ2xhc3NcIlxuICAgICAgICBbY29sbGFwc2FibGVPcGVubmVkSXRlbUljb25DbGFzc109XCJjb2xsYXBzYWJsZU9wZW5uZWRJdGVtSWNvbkNsYXNzXCJcbiAgICAgICAgW2ZpcnN0XT1cImZpcnN0XCJcbiAgICAgICAgW2xhc3RdPVwibGFzdFwiXG4gICAgICAgIFtleHBhbmRlZE9uSW5pdF09XCJleHBhbmRBbGxPbkluaXRcIlxuICAgICAgICBbcm9vdEl0ZW1dPVwidHJ1ZVwiXG4gICAgICAgIChPbkl0ZW1FeHBhbmRlZCk9XCJPbkl0ZW1FeHBhbmRlZC5lbWl0KCRldmVudClcIlxuICAgICAgICAoT25JdGVtQ2xpY2tlZCk9XCJPbkl0ZW1DbGlja2VkLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgID5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbiAgPC9kaXY+XG5cbiAgPHAgKm5nSWY9XCIhZGF0YSB8fCBkYXRhLmxlbmd0aCA9PSAwXCI+e3tlbXB0eVJlc3VsdHNNZXNzYWdlfX08L3A+XG48L2Rpdj5cbiJdfQ==