@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
52 lines (48 loc) • 4.14 kB
JavaScript
import * as i0 from '@angular/core';
import { viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { randomString, KlString } from '@koalarx/utils/KlString';
class Dropdown {
dropdownTriggerElement = viewChild('dropdownTrigger', ...(ngDevMode ? [{ debugName: "dropdownTriggerElement" }] : []));
dropdownContentElement = viewChild('dropdownContent', ...(ngDevMode ? [{ debugName: "dropdownContentElement" }] : []));
id = randomString(10, { numbers: true, uppercase: false, lowercase: false });
anchorName = new KlString('--anchor-').concat(this.id);
constructor() {
effect(() => {
const triggerElement = this.dropdownTriggerElement()?.nativeElement;
const contentElement = this.dropdownContentElement()?.nativeElement;
if (triggerElement && contentElement) {
triggerElement.style = `anchor-name: ${this.anchorName};`;
contentElement.style = `position-anchor: ${this.anchorName};`;
}
});
}
ajustPosition() {
const triggerElement = this.dropdownTriggerElement()?.nativeElement;
const contentElement = this.dropdownContentElement()?.nativeElement;
if (triggerElement && contentElement) {
setTimeout(() => {
const position = contentElement.getBoundingClientRect();
const screenWidth = document.body.clientWidth;
const screenHeight = document.body.clientHeight;
if (position.right > screenWidth) {
contentElement.classList.add('dropdown-left');
contentElement.classList.add('dropdown-start');
}
if (position.bottom > screenHeight) {
contentElement.classList.add('dropdown-top');
}
});
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: Dropdown, isStandalone: true, selector: "kl-dropdown", viewQueries: [{ propertyName: "dropdownTriggerElement", first: true, predicate: ["dropdownTrigger"], descendants: true, isSignal: true }, { propertyName: "dropdownContentElement", first: true, predicate: ["dropdownContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #dropdownTrigger\n tabindex=\"0\"\n role=\"button\"\n [attr.popovertarget]=\"id\"\n (click)=\"ajustPosition()\">\n <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n tabindex=\"0\"\n popover\n [id]=\"id\"\n class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n <ng-content select=\"[options]\" />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Dropdown, decorators: [{
type: Component,
args: [{ selector: 'kl-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #dropdownTrigger\n tabindex=\"0\"\n role=\"button\"\n [attr.popovertarget]=\"id\"\n (click)=\"ajustPosition()\">\n <ng-content select=\"[trigger]\" />\n</button>\n\n<div #dropdownContent\n tabindex=\"0\"\n popover\n [id]=\"id\"\n class=\"dropdown bg-base-200 rounded-box mt-3 min-w-52 w-auto max-w-[30vw] max-h-[40vh] shadow-sm border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-y-auto\">\n <ng-content select=\"[options]\" />\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { dropdownTriggerElement: [{ type: i0.ViewChild, args: ['dropdownTrigger', { isSignal: true }] }], dropdownContentElement: [{ type: i0.ViewChild, args: ['dropdownContent', { isSignal: true }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { Dropdown };
//# sourceMappingURL=koalarx-ui-shared-components-dropdown.mjs.map