ngx-tree-select/src/components/tree-select-item.component.js

Angular component for select with tree items.

import { Component, Input } from '@angular/core';
import { SelectService } from '../services/select.service';
var TreeSelectItemComponent = /** @class */ (function () {
    /**
     * @param {?} svc
     */
    function TreeSelectItemComponent(svc) {
        this.svc = svc;
    }
    Object.defineProperty(TreeSelectItemComponent.prototype, "isOpen", {
        /**
         * @return {?}
         */
        get: function () {
            return this.item.isOpen;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} $event
     * @return {?}
     */
    TreeSelectItemComponent.prototype.toggleOpen = function ($event) {
        $event.stopPropagation();
        if (this.haveChildren) {
            this.item.isOpen = !this.item.isOpen;
        }
        else {
            this.select($event);
        }
    };
    Object.defineProperty(TreeSelectItemComponent.prototype, "allowParentSelection", {
        /**
         * @return {?}
         */
        get: function () {
            return this.svc.Configuration.allowParentSelection;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TreeSelectItemComponent.prototype, "restructureWhenChildSameName", {
        /**
         * @return {?}
         */
        get: function () {
            return this.svc.Configuration.restructureWhenChildSameName;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TreeSelectItemComponent.prototype, "needCheckBox", {
        /**
         * @return {?}
         */
        get: function () {
            return this.svc.Configuration.isHierarchy() && this.svc.Configuration.allowMultiple;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TreeSelectItemComponent.prototype, "haveChildren", {
        /**
         * @return {?}
         */
        get: function () {
            if (this.restructureWhenChildSameName && this.item && this.item.children
                && this.item.children.length === 1 && this.item.text === this.item.children[0].text) {
                this.item = this.item.children[0];
            }
            return this.item && this.item.children && this.item.children.length > 0;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} $event
     * @return {?}
     */
    TreeSelectItemComponent.prototype.select = function ($event) {
        $event.stopPropagation();
        if (this.svc.Configuration.allowMultiple ||
            !this.haveChildren ||
            this.svc.Configuration.allowParentSelection) {
            this.svc.toggleItemSelection(this.item);
        }
        this.onTouchedCallBack();
    };
    Object.defineProperty(TreeSelectItemComponent.prototype, "filter", {
        /**
         * @return {?}
         */
        get: function () {
            return this.svc.Configuration.filter;
        },
        enumerable: true,
        configurable: true
    });
    TreeSelectItemComponent.decorators = [
        { type: Component, args: [{
                    selector: 'tree-select-item',
                    template: "<div class='item' (click)=\"select($event)\"> <div class=\"item\" [class.active]=\"item.selected && !needCheckBox\"> <a href=\"javascript:void(0)\" (click)=\"toggleOpen($event)\"> <span> <i class=\"fa\" [class.fa-plus-square-o]=\"haveChildren && !isOpen\" [class.fa-minus-square-o]=\"haveChildren && isOpen\"></i> </span> <i class=\"fa\" *ngIf=\"needCheckBox\" [class.fa-check-square-o]=\"item.checked === true\" [class.fa-square-o]=\"item.checked === false\" [class.fa-square]=\"item.checked === null\" (click)=\"select($event)\"></i> <span *ngIf=\"allowParentSelection\" (click)=\"select($event)\"> {{item.text}}</span> <span *ngIf=\"!allowParentSelection\"> {{item.text}}</span> </a> </div> <ul *ngIf=\"haveChildren && isOpen\" class=\"ui-select-choices\" role=\"menu\"> <li *ngFor=\"let o of item.children | itemPipe:filter\" role=\"menuitem\"> <tree-select-item [item]=\"o\" [onTouchedCallBack]=\"onTouchedCallBack\"></tree-select-item> </li> </ul> </div> ",
                    styles: [".item { color: #333; } .item ul { list-style-type: none; } .item > a { clear: both; color: inherit; display: block; font-weight: 400; line-height: 1.42857143; padding: 3px 20px; padding-left: 10px; text-decoration: none; white-space: nowrap; } .item > a:hover { background-color: #357ebd; color: #fff; outline: 0; text-decoration: none; } .item.active { background-color: #428bca; color: #fff; outline: 0; text-decoration: none; } "]
                },] },
    ];
    /**
     * @nocollapse
     */
    TreeSelectItemComponent.ctorParameters = function () { return [
        { type: SelectService, },
    ]; };
    TreeSelectItemComponent.propDecorators = {
        'onTouchedCallBack': [{ type: Input },],
        'item': [{ type: Input },],
    };
    return TreeSelectItemComponent;
}());
export { TreeSelectItemComponent };
function TreeSelectItemComponent_tsickle_Closure_declarations() {
    /** @type {?} */
    TreeSelectItemComponent.decorators;
    /**
     * @nocollapse
     * @type {?}
     */
    TreeSelectItemComponent.ctorParameters;
    /** @type {?} */
    TreeSelectItemComponent.propDecorators;
    /** @type {?} */
    TreeSelectItemComponent.prototype.onTouchedCallBack;
    /** @type {?} */
    TreeSelectItemComponent.prototype.item;
    /** @type {?} */
    TreeSelectItemComponent.prototype.svc;
}
//# sourceMappingURL=tree-select-item.component.js.map