angular-select-dropdown
Version:
A highly customizable and flexible dropdown select component for Angular applications. Ideal for creating dynamic select menus with search, filtering.
47 lines • 7.02 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
export class ClickOutsideDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.excludeElements = [];
this.clickOutside = new EventEmitter();
}
onClick(event) {
const target = event.target;
if (!this.elementRef.nativeElement.contains(target) && !this.isExcludedElement(target, this.excludeElements)) {
this.clickOutside.emit();
}
}
isExcludedElement(target, excludeElements) {
return excludeElements.some(selectorOrClass => {
if (selectorOrClass.startsWith('.')) {
const className = selectorOrClass.slice(1);
return target.classList.contains(className) || this.isInsideExcludedElement(target, `.${className}`);
}
else {
const excludedElements = this.elementRef.nativeElement.ownerDocument.querySelectorAll(selectorOrClass);
return Array.from(excludedElements).some(el => el.contains(target) || el === target);
}
});
}
isInsideExcludedElement(target, selector) {
const excludedElements = Array.from(this.elementRef.nativeElement.ownerDocument.querySelectorAll(selector));
return excludedElements.some(excludedElement => excludedElement.contains(target));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { excludeElements: "excludeElements" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:mousedown": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
type: Directive,
args: [{
selector: '[clickOutside]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { excludeElements: [{
type: Input
}], clickOutside: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['document:mousedown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpY2stb3V0c2lkZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXNlbGVjdC1kcm9wZG93bi9zcmMvbGliL2RpcmVjdGl2ZXMvY2xpY2stb3V0c2lkZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBS2pHLE1BQU0sT0FBTyxxQkFBcUI7SUFLaEMsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUpqQyxvQkFBZSxHQUFhLEVBQUUsQ0FBQztRQUU5QixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFFTCxDQUFDO0lBRzlDLE9BQU8sQ0FBQyxLQUFZO1FBQ2xCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUFxQixDQUFDO1FBRTNDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsRUFBRTtZQUM1RyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQzFCO0lBQ0gsQ0FBQztJQUVPLGlCQUFpQixDQUFDLE1BQW1CLEVBQUUsZUFBeUI7UUFDdEUsT0FBTyxlQUFlLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxFQUFFO1lBQzVDLElBQUksZUFBZSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRTtnQkFDbkMsTUFBTSxTQUFTLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDM0MsT0FBTyxNQUFNLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxJQUFJLENBQUMsdUJBQXVCLENBQUMsTUFBTSxFQUFFLElBQUksU0FBUyxFQUFFLENBQUMsQ0FBQzthQUN0RztpQkFBTTtnQkFDTCxNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQTRCLENBQUM7Z0JBQ2xJLE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxLQUFLLE1BQU0sQ0FBQyxDQUFDO2FBQ3RGO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sdUJBQXVCLENBQUMsTUFBbUIsRUFBRSxRQUFnQjtRQUNuRSxNQUFNLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxDQUFrQixDQUFDO1FBQzdILE9BQU8sZ0JBQWdCLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxFQUFFLENBQUMsZUFBZSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO0lBQ3BGLENBQUM7K0dBL0JVLHFCQUFxQjttR0FBckIscUJBQXFCOzs0RkFBckIscUJBQXFCO2tCQUhqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7aUJBQzNCO2lHQUVVLGVBQWU7c0JBQXZCLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTTtnQkFLUCxPQUFPO3NCQUROLFlBQVk7dUJBQUMsb0JBQW9CLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tjbGlja091dHNpZGVdJ1xufSlcbmV4cG9ydCBjbGFzcyBDbGlja091dHNpZGVEaXJlY3RpdmUge1xuICBASW5wdXQoKSBleGNsdWRlRWxlbWVudHM6IHN0cmluZ1tdID0gW107XG5cbiAgQE91dHB1dCgpIGNsaWNrT3V0c2lkZSA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHt9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2Vkb3duJywgWyckZXZlbnQnXSlcbiAgb25DbGljayhldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG5cbiAgICBpZiAoIXRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKHRhcmdldCkgJiYgIXRoaXMuaXNFeGNsdWRlZEVsZW1lbnQodGFyZ2V0LCB0aGlzLmV4Y2x1ZGVFbGVtZW50cykpIHtcbiAgICAgIHRoaXMuY2xpY2tPdXRzaWRlLmVtaXQoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGlzRXhjbHVkZWRFbGVtZW50KHRhcmdldDogSFRNTEVsZW1lbnQsIGV4Y2x1ZGVFbGVtZW50czogc3RyaW5nW10pOiBib29sZWFuIHtcbiAgICByZXR1cm4gZXhjbHVkZUVsZW1lbnRzLnNvbWUoc2VsZWN0b3JPckNsYXNzID0+IHtcbiAgICAgIGlmIChzZWxlY3Rvck9yQ2xhc3Muc3RhcnRzV2l0aCgnLicpKSB7XG4gICAgICAgIGNvbnN0IGNsYXNzTmFtZSA9IHNlbGVjdG9yT3JDbGFzcy5zbGljZSgxKTtcbiAgICAgICAgcmV0dXJuIHRhcmdldC5jbGFzc0xpc3QuY29udGFpbnMoY2xhc3NOYW1lKSB8fCB0aGlzLmlzSW5zaWRlRXhjbHVkZWRFbGVtZW50KHRhcmdldCwgYC4ke2NsYXNzTmFtZX1gKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnN0IGV4Y2x1ZGVkRWxlbWVudHMgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5vd25lckRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoc2VsZWN0b3JPckNsYXNzKSBhcyBOb2RlTGlzdE9mPEhUTUxFbGVtZW50PjtcbiAgICAgICAgcmV0dXJuIEFycmF5LmZyb20oZXhjbHVkZWRFbGVtZW50cykuc29tZShlbCA9PiBlbC5jb250YWlucyh0YXJnZXQpIHx8IGVsID09PSB0YXJnZXQpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBpc0luc2lkZUV4Y2x1ZGVkRWxlbWVudCh0YXJnZXQ6IEhUTUxFbGVtZW50LCBzZWxlY3Rvcjogc3RyaW5nKTogYm9vbGVhbiB7XG4gICAgY29uc3QgZXhjbHVkZWRFbGVtZW50cyA9IEFycmF5LmZyb20odGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQub3duZXJEb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKHNlbGVjdG9yKSkgYXMgSFRNTEVsZW1lbnRbXTtcbiAgICByZXR1cm4gZXhjbHVkZWRFbGVtZW50cy5zb21lKGV4Y2x1ZGVkRWxlbWVudCA9PiBleGNsdWRlZEVsZW1lbnQuY29udGFpbnModGFyZ2V0KSk7XG4gIH1cbn1cbiJdfQ==