angular-custom-selector
Version:
```bash NOTE*** This library was generated using Angular CLI version 9.0.0. Therefore, it is recommended that you use a compatible version of Angular to ensure proper functionality ```
118 lines • 14.1 kB
JavaScript
import { __decorate } from "tslib";
import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
var SingleSelectorComponent = /** @class */ (function () {
function SingleSelectorComponent(elementRef) {
this.elementRef = elementRef;
this.expandedKeys = [];
this.selectorOpened = false;
this.disableSelector = false;
this.selectedName = "Select";
this.selectedId = 0;
this.isIncludeFloatLocation = true;
this.enableAllNodes = false;
this.selectableTypes = []; // an array of location types to be made selectable
this.selectorDisabled = false;
this.onChange = new EventEmitter();
this.onData = new EventEmitter();
}
SingleSelectorComponent.prototype.ngOnInit = function () {
var _this = this;
this.onData.emit(this.dataHierarchy);
if (this.dataHierarchy.data.length > 0 && this.dataHierarchy.data[0].items == null) {
this.disableSelector = true;
this.selectedName = "No branches available";
}
else if (this.selectedName == null && this.selectedId != null) {
// if a location name is not passed in as an input, we set it using the id
this.selectedName = this.dataHierarchy.flatData.find(function (l) { return l.id == _this.selectedId; }).locationName;
}
this.addExpandListItem(this.dataHierarchy.data);
this.setDropDownState();
};
SingleSelectorComponent.prototype.setDropDownState = function () {
this.disableSelector = this.selectorDisabled;
};
SingleSelectorComponent.prototype.onGlobalClick = function (event) {
if (!this.elementRef.nativeElement.contains(event.target)) {
// clicked outside => close dropdown list
this.selectorOpened = false;
}
};
SingleSelectorComponent.prototype.closeDropDown = function () {
this.selectorOpened = false;
};
SingleSelectorComponent.prototype.onItemSelected = function (data) {
this.selectorOpened = false;
this.onChange.emit(data);
this.selectedName = data.name;
};
SingleSelectorComponent.prototype.addExpandListItem = function (treeItem) {
var _this = this;
treeItem.forEach(function (item) {
if (item.items && item.items.length > 0) {
_this.expandedKeys.push(item.id);
_this.addExpandListItem(item.items);
}
});
};
SingleSelectorComponent.prototype.itemClick = function () {
if (!this.selectorDisabled) {
this.selectorOpened = !this.selectorOpened;
}
};
SingleSelectorComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
__decorate([
Input()
], SingleSelectorComponent.prototype, "selectedName", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "selectedId", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "displayName", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "searchKey", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "labelText", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "hoverText", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "isIncludeFloatLocation", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "enableAllNodes", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "selectableTypes", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "selectorDisabled", void 0);
__decorate([
Input()
], SingleSelectorComponent.prototype, "dataHierarchy", void 0);
__decorate([
Output()
], SingleSelectorComponent.prototype, "onChange", void 0);
__decorate([
Output()
], SingleSelectorComponent.prototype, "onData", void 0);
__decorate([
HostListener('document:mousedown', ['$event'])
], SingleSelectorComponent.prototype, "onGlobalClick", null);
SingleSelectorComponent = __decorate([
Component({
selector: 'single-selector',
template: "<div class=\"row align-items-center\" (click)=\"closeDropDown()\">\r\n <div class=\"col-md-12\">\r\n <label *ngIf=\"labelText?.length > 0\">{{labelText}}</label>\r\n\r\n <div #menu class=\"d-flex justify-content-between location-selector-form\"\r\n [ngClass]=\"{'disableSelector':selectorDisabled,'location-selector-focus' : selectorOpened}\" id=\"ddlLocationy\"\r\n (click)=\"itemClick()\" (click)=\"$event.stopPropagation()\" [title]=\"hoverText\">\r\n <div class=\"selected-location\">{{selectedName}}</div>\r\n <div><em class=\"fas fa-chevron-down\"></em></div>\r\n </div>\r\n <div class=\"location-tree-wrapper p-2\" *ngIf=\"selectorOpened\" (click)=\"$event.stopPropagation()\">\r\n <single-selector-tree-view [data]=\"dataHierarchy.data\" [expandedKeys]=\"expandedKeys\" [enableAllNodes]=\"enableAllNodes\"\r\n [selectedId]=\"selectedId\" (closeEvent)=\"onItemSelected($event)\" [displayName]=\"displayName\" [searchKey]=\"searchKey\" >\r\n </single-selector-tree-view>\r\n </div>\r\n </div>\r\n</div>",
styles: [":host ::ng-deep .location-selector-form{cursor:pointer;display:block;width:300px;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:.9rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}:host ::ng-deep .location-selector-focus{color:#495057;background-color:#fff;outline:0;box-shadow:0 0 0 .2rem rgba(0,81,81,.1)}:host ::ng-deep .location-tree-wrapper{position:absolute;z-index:10}:host ::ng-deep .disableSelector{opacity:.6;cursor:default}.selected-location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:350px}"]
})
], SingleSelectorComponent);
return SingleSelectorComponent;
}());
export { SingleSelectorComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2luZ2xlLXNlbGVjdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItY3VzdG9tLXNlbGVjdG9yLyIsInNvdXJjZXMiOlsibGliL3NpbmdsZS1zZWxlY3Rvci9zaW5nbGUtc2VsZWN0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU3pHO0lBbUJFLGlDQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBakJuQyxpQkFBWSxHQUFVLEVBQUUsQ0FBQztRQUN6QixtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxvQkFBZSxHQUFZLEtBQUssQ0FBQztRQUMvQixpQkFBWSxHQUFXLFFBQVEsQ0FBQztRQUNoQyxlQUFVLEdBQVcsQ0FBQyxDQUFDO1FBS3ZCLDJCQUFzQixHQUFZLElBQUksQ0FBQztRQUN2QyxtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxvQkFBZSxHQUFhLEVBQUUsQ0FBQyxDQUFDLG1EQUFtRDtRQUNuRixxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFFakMsYUFBUSxHQUE2QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3hELFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBRzNDLENBQUM7SUFFRCwwQ0FBUSxHQUFSO1FBQUEsaUJBV0M7UUFWQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDckMsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssSUFBSSxJQUFJLEVBQUU7WUFDbEYsSUFBSSxD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QUUsaUJBQWlCO1lBQzNCLGtqQ0FBK0M7O1NBRWhELENBQUM7T0FFVyx1QkFBdUIsQ0F5RW5DO0lBQUQsOEJBQUM7Q0FBQSxBQXpFRCxJQXlFQztTQXpFWSx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTXVsdGlTZWxlY3RvciB9IGZyb20gJy4uL21vZGVscy9zZWxlY3Rvci9tdWx0aS1zZWxlY3Rvci1tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NpbmdsZS1zZWxlY3RvcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NpbmdsZS1zZWxlY3Rvci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2luZ2xlLXNlbGVjdG9yLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBTaW5nbGVTZWxlY3RvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIHB1YmxpYyBleHBhbmRlZEtleXM6IGFueVtdID0gW107XHJcbiAgcHVibGljIHNlbGVjdG9yT3BlbmVkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgcHVibGljIGRpc2FibGVTZWxlY3RvcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHNlbGVjdGVkTmFtZTogc3RyaW5nID0gXCJTZWxlY3RcIjtcclxuICBASW5wdXQoKSBzZWxlY3RlZElkOiBudW1iZXIgPSAwO1xyXG4gIEBJbnB1dCgpIGRpc3BsYXlOYW1lOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc2VhcmNoS2V5OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWxUZXh0OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaG92ZXJUZXh0OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaXNJbmNsdWRlRmxvYXRMb2NhdGlvbjogYm9vbGVhbiA9IHRydWU7XHJcbiAgQElucHV0KCkgZW5hYmxlQWxsTm9kZXM6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBzZWxlY3RhYmxlVHlwZXM6IG51bWJlcltdID0gW107IC8vIGFuIGFycmF5IG9mIGxvY2F0aW9uIHR5cGVzIHRvIGJlIG1hZGUgc2VsZWN0YWJsZVxyXG4gIEBJbnB1dCgpIHNlbGVjdG9yRGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwdWJsaWMgZGF0YUhpZXJhcmNoeTogTXVsdGlTZWxlY3RvcjtcclxuICBAT3V0cHV0KCkgb25DaGFuZ2U6IEV2ZW50RW1pdHRlcjxBcnJheTxhbnk+PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgb25EYXRhID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uRGF0YS5lbWl0KHRoaXMuZGF0YUhpZXJhcmNoeSk7XHJcbiAgICBpZiAodGhpcy5kYXRhSGllcmFyY2h5LmRhdGEubGVuZ3RoID4gMCAmJiB0aGlzLmRhdGFIaWVyYXJjaHkuZGF0YVswXS5pdGVtcyA9PSBudWxsKSB7XHJcbiAgICAgIHRoaXMuZGlzYWJsZVNlbGVjdG9yID0gdHJ1ZTtcclxuICAgICAgdGhpcy5zZWxlY3RlZE5hbWUgPSBcIk5vIGJyYW5jaGVzIGF2YWlsYWJsZVwiO1xyXG4gICAgfSBlbHNlIGlmICh0aGlzLnNlbGVjdGVkTmFtZSA9PSBudWxsICYmIHRoaXMuc2VsZWN0ZWRJZCAhPSBudWxsKSB7XHJcbiAgICAgIC8vIGlmIGEgbG9jYXRpb24gbmFtZSBpcyBub3QgcGFzc2VkIGluIGFzIGFuIGlucHV0LCB3ZSBzZXQgaXQgdXNpbmcgdGhlIGlkXHJcbiAgICAgIHRoaXMuc2VsZWN0ZWROYW1lID0gdGhpcy5kYXRhSGllcmFyY2h5LmZsYXREYXRhLmZpbmQobCA9PiBsLmlkID09IHRoaXMuc2VsZWN0ZWRJZCkubG9jYXRpb25OYW1lO1xyXG4gICAgfVxyXG4gICAgdGhpcy5hZGRFeHBhbmRMaXN0SXRlbSh0aGlzLmRhdGFIaWVyYXJjaHkuZGF0YSk7XHJcbiAgICB0aGlzLnNldERyb3BEb3duU3RhdGUoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc2V0RHJvcERvd25TdGF0ZSgpIHtcclxuICAgIHRoaXMuZGlzYWJsZVNlbGVjdG9yID0gdGhpcy5zZWxlY3RvckRpc2FibGVkO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2Vkb3duJywgWyckZXZlbnQnXSlcclxuICBvbkdsb2JhbENsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgaWYgKCF0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC50YXJnZXQpKSB7XHJcbiAgICAgIC8vIGNsaWNrZWQgb3V0c2lkZSA9PiBjbG9zZSBkcm9wZG93biBsaXN0XHJcbiAgICAgIHRoaXMuc2VsZWN0b3JPcGVuZWQgPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBjbG9zZURyb3BEb3duKCkge1xyXG4gICAgdGhpcy5zZWxlY3Rvck9wZW5lZCA9IGZhbHNlO1xyXG5cclxuICB9XHJcblxyXG4gIHB1YmxpYyBvbkl0ZW1TZWxlY3RlZChkYXRhOiBhbnkpIHtcclxuICAgIHRoaXMuc2VsZWN0b3JPcGVuZWQgPSBmYWxzZTtcclxuICAgIHRoaXMub25DaGFuZ2UuZW1pdChkYXRhKTtcclxuICAgIHRoaXMuc2VsZWN0ZWROYW1lID0gZGF0YS5uYW1lO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhZGRFeHBhbmRMaXN0SXRlbSh0cmVlSXRlbTogYW55KSB7XHJcbiAgICB0cmVlSXRlbS5mb3JFYWNoKGl0ZW0gPT4ge1xyXG4gICAgICBpZiAoaXRlbS5pdGVtcyAmJiBpdGVtLml0ZW1zLmxlbmd0aCA+IDApIHtcclxuICAgICAgICB0aGlzLmV4cGFuZGVkS2V5cy5wdXNoKGl0ZW0uaWQpO1xyXG4gICAgICAgIHRoaXMuYWRkRXhwYW5kTGlzdEl0ZW0oaXRlbS5pdGVtcylcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgaXRlbUNsaWNrKCkge1xyXG4gICAgaWYgKCF0aGlzLnNlbGVjdG9yRGlzYWJsZWQpIHtcclxuICAgICAgdGhpcy5zZWxlY3Rvck9wZW5lZCA9ICF0aGlzLnNlbGVjdG9yT3BlbmVkO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuXHJcbiJdfQ==