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 ```
115 lines • 13.3 kB
JavaScript
import { __decorate } from "tslib";
import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
let SingleSelectorComponent = class SingleSelectorComponent {
constructor(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();
}
ngOnInit() {
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(l => l.id == this.selectedId).locationName;
}
this.addExpandListItem(this.dataHierarchy.data);
this.setDropDownState();
}
setDropDownState() {
this.disableSelector = this.selectorDisabled;
}
onGlobalClick(event) {
if (!this.elementRef.nativeElement.contains(event.target)) {
// clicked outside => close dropdown list
this.selectorOpened = false;
}
}
closeDropDown() {
this.selectorOpened = false;
}
onItemSelected(data) {
this.selectorOpened = false;
this.onChange.emit(data);
this.selectedName = data.name;
}
addExpandListItem(treeItem) {
treeItem.forEach(item => {
if (item.items && item.items.length > 0) {
this.expandedKeys.push(item.id);
this.addExpandListItem(item.items);
}
});
}
itemClick() {
if (!this.selectorDisabled) {
this.selectorOpened = !this.selectorOpened;
}
}
};
SingleSelectorComponent.ctorParameters = () => [
{ 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);
export { SingleSelectorComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2luZ2xlLXNlbGVjdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItY3VzdG9tLXNlbGVjdG9yLyIsInNvdXJjZXMiOlsibGliL3NpbmdsZS1zZWxlY3Rvci9zaW5nbGUtc2VsZWN0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU3pHLElBQWEsdUJBQXVCLEdBQXBDLE1BQWEsdUJBQXVCO0lBbUJsQyxZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBakJuQyxpQkFBWSxHQUFVLEVBQUUsQ0FBQztRQUN6QixtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxvQkFBZSxHQUFZLEtBQUssQ0FBQztRQUMvQixpQkFBWSxHQUFXLFFBQVEsQ0FBQztRQUNoQyxlQUFVLEdBQVcsQ0FBQyxDQUFDO1FBS3ZCLDJCQUFzQixHQUFZLElBQUksQ0FBQztRQUN2QyxtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxvQkFBZSxHQUFhLEVBQUUsQ0FBQyxDQUFDLG1EQUFtRDtRQUNuRixxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFFakMsYUFBUSxHQUE2QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3hELFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBRzNDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLElBQUksSUFBSSxFQUFF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O0dBRVcsdUJBQXVCLENBeUVuQztTQXpFWSx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTXVsdGlTZWxlY3RvciB9IGZyb20gJy4uL21vZGVscy9zZWxlY3Rvci9tdWx0aS1zZWxlY3Rvci1tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NpbmdsZS1zZWxlY3RvcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NpbmdsZS1zZWxlY3Rvci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2luZ2xlLXNlbGVjdG9yLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBTaW5nbGVTZWxlY3RvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIHB1YmxpYyBleHBhbmRlZEtleXM6IGFueVtdID0gW107XHJcbiAgcHVibGljIHNlbGVjdG9yT3BlbmVkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgcHVibGljIGRpc2FibGVTZWxlY3RvcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHNlbGVjdGVkTmFtZTogc3RyaW5nID0gXCJTZWxlY3RcIjtcclxuICBASW5wdXQoKSBzZWxlY3RlZElkOiBudW1iZXIgPSAwO1xyXG4gIEBJbnB1dCgpIGRpc3BsYXlOYW1lOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc2VhcmNoS2V5OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWxUZXh0OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaG92ZXJUZXh0OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaXNJbmNsdWRlRmxvYXRMb2NhdGlvbjogYm9vbGVhbiA9IHRydWU7XHJcbiAgQElucHV0KCkgZW5hYmxlQWxsTm9kZXM6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBzZWxlY3RhYmxlVHlwZXM6IG51bWJlcltdID0gW107IC8vIGFuIGFycmF5IG9mIGxvY2F0aW9uIHR5cGVzIHRvIGJlIG1hZGUgc2VsZWN0YWJsZVxyXG4gIEBJbnB1dCgpIHNlbGVjdG9yRGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwdWJsaWMgZGF0YUhpZXJhcmNoeTogTXVsdGlTZWxlY3RvcjtcclxuICBAT3V0cHV0KCkgb25DaGFuZ2U6IEV2ZW50RW1pdHRlcjxBcnJheTxhbnk+PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgb25EYXRhID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uRGF0YS5lbWl0KHRoaXMuZGF0YUhpZXJhcmNoeSk7XHJcbiAgICBpZiAodGhpcy5kYXRhSGllcmFyY2h5LmRhdGEubGVuZ3RoID4gMCAmJiB0aGlzLmRhdGFIaWVyYXJjaHkuZGF0YVswXS5pdGVtcyA9PSBudWxsKSB7XHJcbiAgICAgIHRoaXMuZGlzYWJsZVNlbGVjdG9yID0gdHJ1ZTtcclxuICAgICAgdGhpcy5zZWxlY3RlZE5hbWUgPSBcIk5vIGJyYW5jaGVzIGF2YWlsYWJsZVwiO1xyXG4gICAgfSBlbHNlIGlmICh0aGlzLnNlbGVjdGVkTmFtZSA9PSBudWxsICYmIHRoaXMuc2VsZWN0ZWRJZCAhPSBudWxsKSB7XHJcbiAgICAgIC8vIGlmIGEgbG9jYXRpb24gbmFtZSBpcyBub3QgcGFzc2VkIGluIGFzIGFuIGlucHV0LCB3ZSBzZXQgaXQgdXNpbmcgdGhlIGlkXHJcbiAgICAgIHRoaXMuc2VsZWN0ZWROYW1lID0gdGhpcy5kYXRhSGllcmFyY2h5LmZsYXREYXRhLmZpbmQobCA9PiBsLmlkID09IHRoaXMuc2VsZWN0ZWRJZCkubG9jYXRpb25OYW1lO1xyXG4gICAgfVxyXG4gICAgdGhpcy5hZGRFeHBhbmRMaXN0SXRlbSh0aGlzLmRhdGFIaWVyYXJjaHkuZGF0YSk7XHJcbiAgICB0aGlzLnNldERyb3BEb3duU3RhdGUoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc2V0RHJvcERvd25TdGF0ZSgpIHtcclxuICAgIHRoaXMuZGlzYWJsZVNlbGVjdG9yID0gdGhpcy5zZWxlY3RvckRpc2FibGVkO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2Vkb3duJywgWyckZXZlbnQnXSlcclxuICBvbkdsb2JhbENsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgaWYgKCF0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC50YXJnZXQpKSB7XHJcbiAgICAgIC8vIGNsaWNrZWQgb3V0c2lkZSA9PiBjbG9zZSBkcm9wZG93biBsaXN0XHJcbiAgICAgIHRoaXMuc2VsZWN0b3JPcGVuZWQgPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBjbG9zZURyb3BEb3duKCkge1xyXG4gICAgdGhpcy5zZWxlY3Rvck9wZW5lZCA9IGZhbHNlO1xyXG5cclxuICB9XHJcblxyXG4gIHB1YmxpYyBvbkl0ZW1TZWxlY3RlZChkYXRhOiBhbnkpIHtcclxuICAgIHRoaXMuc2VsZWN0b3JPcGVuZWQgPSBmYWxzZTtcclxuICAgIHRoaXMub25DaGFuZ2UuZW1pdChkYXRhKTtcclxuICAgIHRoaXMuc2VsZWN0ZWROYW1lID0gZGF0YS5uYW1lO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhZGRFeHBhbmRMaXN0SXRlbSh0cmVlSXRlbTogYW55KSB7XHJcbiAgICB0cmVlSXRlbS5mb3JFYWNoKGl0ZW0gPT4ge1xyXG4gICAgICBpZiAoaXRlbS5pdGVtcyAmJiBpdGVtLml0ZW1zLmxlbmd0aCA+IDApIHtcclxuICAgICAgICB0aGlzLmV4cGFuZGVkS2V5cy5wdXNoKGl0ZW0uaWQpO1xyXG4gICAgICAgIHRoaXMuYWRkRXhwYW5kTGlzdEl0ZW0oaXRlbS5pdGVtcylcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgaXRlbUNsaWNrKCkge1xyXG4gICAgaWYgKCF0aGlzLnNlbGVjdG9yRGlzYWJsZWQpIHtcclxuICAgICAgdGhpcy5zZWxlY3Rvck9wZW5lZCA9ICF0aGlzLnNlbGVjdG9yT3BlbmVkO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuXHJcbiJdfQ==