@doku-dev/doku-fragment/esm2020/lib/dropdown/dropdown-menu.directive.mjs

A new Angular UI library that moving away from Bootstrap and built from scratch.

import { Directive, Host, HostBinding, Inject, Optional, } from '@angular/core';
import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom';
import { DOKU_DROPDOWN, DOKU_DROPDOWN_MENU } from './dropdown.token';
import * as i0 from "@angular/core";
import * as i1 from "./dropdown-menu-item.directive";
import * as i2 from "./dropdown.directive";
export class DokuDropdownMenu {
    constructor(elementRef, ngZone, dropdown, menuItem) {
        this.elementRef = elementRef;
        this.ngZone = ngZone;
        this.dropdown = dropdown;
        this.menuItem = menuItem;
        this.classes = ['d-dropdown-menu'];
        this.placement = this.dropdown?.placement || 'bottom-start';
        this.nativeElement = this.elementRef.nativeElement;
    }
    ngOnDestroy() {
        this.hide();
    }
    toggle() {
        if (this.isOpen()) {
            this.hide();
        }
        else {
            this.show();
        }
    }
    show() {
        this.nativeElement.style.display = 'block';
        this.dropdown?.['applyContainer']();
        this.doAutoUpdatePosition();
    }
    hide() {
        if (!this.isOpen())
            return;
        this.nativeElement.style.display = '';
        this.dropdown?.['resetContainer']();
        this.dropdown?.['closeDropdown'].emit();
        this.cleanup?.();
    }
    isOpen() {
        return this.nativeElement.style.display === 'block';
    }
    getTogglerElement() {
        return (this.menuItem?.['elementRef'] ||
            this.dropdown?.['dropdownToggle']?.['elementRef']);
    }
    updatePosition() {
        const toggleElement = this.getTogglerElement();
        if (!toggleElement || !this.elementRef)
            return;
        computePosition(toggleElement.nativeElement, this.elementRef.nativeElement, {
            placement: this.placement,
            middleware: [flip(), shift()],
        }).then(({ x, y }) => {
            Object.assign(this.elementRef.nativeElement.style, {
                top: `${y}px`,
                left: `${x}px`,
            });
        });
    }
    doAutoUpdatePosition() {
        this.ngZone.runOutsideAngular(() => {
            const toggleElement = this.getTogglerElement();
            if (!toggleElement || !this.elementRef)
                return;
            this.cleanup = autoUpdate(toggleElement.nativeElement, this.elementRef.nativeElement, () => {
                this.updatePosition();
            });
        });
    }
}
DokuDropdownMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenu, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: DOKU_DROPDOWN, optional: true }, { token: i1.DokuDropdownMenuItem, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
DokuDropdownMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DokuDropdownMenu, isStandalone: true, selector: "[doku-dropdown-menu]", host: { properties: { "class": "this.classes" } }, providers: [{ provide: DOKU_DROPDOWN_MENU, useExisting: DokuDropdownMenu }], exportAs: ["dokuDropdownMenu"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuDropdownMenu, decorators: [{
            type: Directive,
            args: [{
                    selector: '[doku-dropdown-menu]',
                    exportAs: 'dokuDropdownMenu',
                    standalone: true,
                    providers: [{ provide: DOKU_DROPDOWN_MENU, useExisting: DokuDropdownMenu }],
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.DokuDropdown, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DOKU_DROPDOWN]
                }] }, { type: i1.DokuDropdownMenuItem, decorators: [{
                    type: Optional
                }, {
                    type: Host
                }] }]; }, propDecorators: { classes: [{
                type: HostBinding,
                args: ['class']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2t1LWZyYWdtZW50L3NyYy9saWIvZHJvcGRvd24vZHJvcGRvd24tbWVudS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUNMLFNBQVMsRUFFVCxJQUFJLEVBQ0osV0FBVyxFQUNYLE1BQU0sRUFHTixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFVBQVUsRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBSTVFLE9BQU8sRUFBRSxhQUFhLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7OztBQVFyRSxNQUFNLE9BQU8sZ0JBQWdCO0lBUzNCLFlBQ1UsVUFBc0IsRUFDdEIsTUFBYyxFQUNxQixRQUF1QixFQUN0QyxRQUErQjtRQUhuRCxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDcUIsYUFBUSxHQUFSLFFBQVEsQ0FBZTtRQUN0QyxhQUFRLEdBQVIsUUFBUSxDQUF1QjtRQVgxQyxZQUFPLEdBQXVCLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUUzRCxjQUFTLEdBQTBCLElBQUksQ0FBQyxRQUFRLEVBQUUsU0FBUyxJQUFJLGNBQWMsQ0FBQztRQUVoRixrQkFBYSxHQUFnQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztJQVFoRSxDQUFDO0lBRUosV0FBVztRQUNULElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNkLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDakIsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2I7YUFBTTtZQUNMLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztT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O2lCQUM1RTs7MEJBYUksUUFBUTs7MEJBQUksTUFBTTsyQkFBQyxhQUFhOzswQkFDaEMsUUFBUTs7MEJBQUksSUFBSTs0Q0FYQSxPQUFPO3NCQUR6QixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgSG9zdCxcbiAgSG9zdEJpbmRpbmcsXG4gIEluamVjdCxcbiAgTmdab25lLFxuICBPbkRlc3Ryb3ksXG4gIE9wdGlvbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGF1dG9VcGRhdGUsIGNvbXB1dGVQb3NpdGlvbiwgZmxpcCwgc2hpZnQgfSBmcm9tICdAZmxvYXRpbmctdWkvZG9tJztcbmltcG9ydCB7IERva3VEcm9wZG93bk1lbnVJdGVtIH0gZnJvbSAnLi9kcm9wZG93bi1tZW51LWl0ZW0uZGlyZWN0aXZlJztcbmltcG9ydCB7IERva3VEcm9wZG93biB9IGZyb20gJy4vZHJvcGRvd24uZGlyZWN0aXZlJztcbmltcG9ydCB7IERva3VEcm9wZG93blBsYWNlbWVudCB9IGZyb20gJy4vZHJvcGRvd24uaW50ZXJmYWNlJztcbmltcG9ydCB7IERPS1VfRFJPUERPV04sIERPS1VfRFJPUERPV05fTUVOVSB9IGZyb20gJy4vZHJvcGRvd24udG9rZW4nO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZG9rdS1kcm9wZG93bi1tZW51XScsXG4gIGV4cG9ydEFzOiAnZG9rdURyb3Bkb3duTWVudScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHByb3ZpZGVyczogW3sgcHJvdmlkZTogRE9LVV9EUk9QRE9XTl9NRU5VLCB1c2VFeGlzdGluZzogRG9rdURyb3Bkb3duTWVudSB9XSxcbn0pXG5leHBvcnQgY2xhc3MgRG9rdURyb3Bkb3duTWVudSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgY2xhc3NlczogTmdDbGFzc1snbmdDbGFzcyddID0gWydkLWRyb3Bkb3duLW1lbnUnXTtcblxuICBwcm90ZWN0ZWQgcGxhY2VtZW50OiBEb2t1RHJvcGRvd25QbGFjZW1lbnQgPSB0aGlzLmRyb3Bkb3duPy5wbGFjZW1lbnQgfHwgJ2JvdHRvbS1zdGFydCc7XG5cbiAgcHJpdmF0ZSBuYXRpdmVFbGVtZW50OiBIVE1MRWxlbWVudCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICBwcml2YXRlIGNsZWFudXA/OiAoKSA9PiB2b2lkO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIG5nWm9uZTogTmdab25lLFxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoRE9LVV9EUk9QRE9XTikgcHJpdmF0ZSBkcm9wZG93bj86IERva3VEcm9wZG93bixcbiAgICBAT3B0aW9uYWwoKSBASG9zdCgpIHByaXZhdGUgbWVudUl0ZW0/OiBEb2t1RHJvcGRvd25NZW51SXRlbVxuICApIHt9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5oaWRlKCk7XG4gIH1cblxuICB0b2dnbGUoKSB7XG4gICAgaWYgKHRoaXMuaXNPcGVuKCkpIHtcbiAgICAgIHRoaXMuaGlkZSgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNob3coKTtcbiAgICB9XG4gIH1cblxuICBzaG93KCkge1xuICAgIHRoaXMubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJztcbiAgICB0aGlzLmRyb3Bkb3duPy5bJ2FwcGx5Q29udGFpbmVyJ10oKTtcbiAgICB0aGlzLmRvQXV0b1VwZGF0ZVBvc2l0aW9uKCk7XG4gIH1cblxuICBoaWRlKCkge1xuICAgIGlmICghdGhpcy5pc09wZW4oKSkgcmV0dXJuO1xuICAgIHRoaXMubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJyc7XG4gICAgdGhpcy5kcm9wZG93bj8uWydyZXNldENvbnRhaW5lciddKCk7XG4gICAgdGhpcy5kcm9wZG93bj8uWydjbG9zZURyb3Bkb3duJ10uZW1pdCgpO1xuICAgIHRoaXMuY2xlYW51cD8uKCk7XG4gIH1cblxuICBpc09wZW4oKSB7XG4gICAgcmV0dXJuIHRoaXMubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID09PSAnYmxvY2snO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUb2dnbGVyRWxlbWVudCgpOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gKFxuICAgICAgdGhpcy5tZW51SXRlbT8uWydlbGVtZW50UmVmJ10gfHxcbiAgICAgICh0aGlzLmRyb3Bkb3duPy5bJ2Ryb3Bkb3duVG9nZ2xlJ10/LlsnZWxlbWVudFJlZiddIGFzIEVsZW1lbnRSZWYpXG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlUG9zaXRpb24oKSB7XG4gICAgY29uc3QgdG9nZ2xlRWxlbWVudCA9IHRoaXMuZ2V0VG9nZ2xlckVsZW1lbnQoKTtcbiAgICBpZiAoIXRvZ2dsZUVsZW1lbnQgfHwgIXRoaXMuZWxlbWVudFJlZikgcmV0dXJuO1xuXG4gICAgY29tcHV0ZVBvc2l0aW9uKHRvZ2dsZUVsZW1lbnQubmF0aXZlRWxlbWVudCwgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHtcbiAgICAgIHBsYWNlbWVudDogdGhpcy5wbGFjZW1lbnQsXG4gICAgICBtaWRkbGV3YXJlOiBbZmxpcCgpLCBzaGlmdCgpXSxcbiAgICB9KS50aGVuKCh7IHgsIHkgfSkgPT4ge1xuICAgICAgT2JqZWN0LmFzc2lnbih0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zdHlsZSwge1xuICAgICAgICB0b3A6IGAke3l9cHhgLFxuICAgICAgICBsZWZ0OiBgJHt4fXB4YCxcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBkb0F1dG9VcGRhdGVQb3NpdGlvbigpIHtcbiAgICB0aGlzLm5nWm9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICBjb25zdCB0b2dnbGVFbGVtZW50ID0gdGhpcy5nZXRUb2dnbGVyRWxlbWVudCgpO1xuICAgICAgaWYgKCF0b2dnbGVFbGVtZW50IHx8ICF0aGlzLmVsZW1lbnRSZWYpIHJldHVybjtcblxuICAgICAgdGhpcy5jbGVhbnVwID0gYXV0b1VwZGF0ZSh0b2dnbGVFbGVtZW50Lm5hdGl2ZUVsZW1lbnQsIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAoKSA9PiB7XG4gICAgICAgIHRoaXMudXBkYXRlUG9zaXRpb24oKTtcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG59XG4iXX0=