@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.nativeElement.style.display === 'block') {
            this.hide();
        }
        else {
            this.show();
        }
    }
    show() {
        this.nativeElement.style.display = 'block';
        this.dropdown?.['applyContainer']();
        this.doAutoUpdatePosition();
    }
    hide() {
        this.nativeElement.style.display = '';
        this.dropdown?.['resetContainer']();
        this.cleanup?.();
    }
    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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2t1LWZyYWdtZW50L3NyYy9saWIvZHJvcGRvd24vZHJvcGRvd24tbWVudS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUNMLFNBQVMsRUFFVCxJQUFJLEVBQ0osV0FBVyxFQUNYLE1BQU0sRUFHTixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFVBQVUsRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBSTVFLE9BQU8sRUFBRSxhQUFhLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7OztBQVFyRSxNQUFNLE9BQU8sZ0JBQWdCO0lBUzNCLFlBQ1UsVUFBc0IsRUFDdEIsTUFBYyxFQUNxQixRQUF1QixFQUN0QyxRQUErQjtRQUhuRCxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDcUIsYUFBUSxHQUFSLFFBQVEsQ0FBZTtRQUN0QyxhQUFRLEdBQVIsUUFBUSxDQUF1QjtRQVgxQyxZQUFPLEdBQXVCLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUUzRCxjQUFTLEdBQTBCLElBQUksQ0FBQyxRQUFRLEVBQUUsU0FBUyxJQUFJLGNBQWMsQ0FBQztRQUVoRixrQkFBYSxHQUFnQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztJQVFoRSxDQUFDO0lBRUosV0FBVztRQUNULElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNkLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEtBQUssT0FBTyxFQUFFO1lBQ2hELElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNiO2FBQU07WUFDTCxJ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O1xuaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBIb3N0LFxuICBIb3N0QmluZGluZyxcbiAgSW5qZWN0LFxuICBOZ1pvbmUsXG4gIE9uRGVzdHJveSxcbiAgT3B0aW9uYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgYXV0b1VwZGF0ZSwgY29tcHV0ZVBvc2l0aW9uLCBmbGlwLCBzaGlmdCB9IGZyb20gJ0BmbG9hdGluZy11aS9kb20nO1xuaW1wb3J0IHsgRG9rdURyb3Bkb3duTWVudUl0ZW0gfSBmcm9tICcuL2Ryb3Bkb3duLW1lbnUtaXRlbS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRG9rdURyb3Bkb3duIH0gZnJvbSAnLi9kcm9wZG93bi5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRG9rdURyb3Bkb3duUGxhY2VtZW50IH0gZnJvbSAnLi9kcm9wZG93bi5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgRE9LVV9EUk9QRE9XTiwgRE9LVV9EUk9QRE9XTl9NRU5VIH0gZnJvbSAnLi9kcm9wZG93bi50b2tlbic7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tkb2t1LWRyb3Bkb3duLW1lbnVdJyxcbiAgZXhwb3J0QXM6ICdkb2t1RHJvcGRvd25NZW51JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgcHJvdmlkZXJzOiBbeyBwcm92aWRlOiBET0tVX0RST1BET1dOX01FTlUsIHVzZUV4aXN0aW5nOiBEb2t1RHJvcGRvd25NZW51IH1dLFxufSlcbmV4cG9ydCBjbGFzcyBEb2t1RHJvcGRvd25NZW51IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByb3RlY3RlZCByZWFkb25seSBjbGFzc2VzOiBOZ0NsYXNzWyduZ0NsYXNzJ10gPSBbJ2QtZHJvcGRvd24tbWVudSddO1xuXG4gIHByb3RlY3RlZCBwbGFjZW1lbnQ6IERva3VEcm9wZG93blBsYWNlbWVudCA9IHRoaXMuZHJvcGRvd24/LnBsYWNlbWVudCB8fCAnYm90dG9tLXN0YXJ0JztcblxuICBwcml2YXRlIG5hdGl2ZUVsZW1lbnQ6IEhUTUxFbGVtZW50ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIHByaXZhdGUgY2xlYW51cD86ICgpID0+IHZvaWQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgbmdab25lOiBOZ1pvbmUsXG4gICAgQE9wdGlvbmFsKCkgQEluamVjdChET0tVX0RST1BET1dOKSBwcml2YXRlIGRyb3Bkb3duPzogRG9rdURyb3Bkb3duLFxuICAgIEBPcHRpb25hbCgpIEBIb3N0KCkgcHJpdmF0ZSBtZW51SXRlbT86IERva3VEcm9wZG93bk1lbnVJdGVtXG4gICkge31cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmhpZGUoKTtcbiAgfVxuXG4gIHRvZ2dsZSgpIHtcbiAgICBpZiAodGhpcy5uYXRpdmVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPT09ICdibG9jaycpIHtcbiAgICAgIHRoaXMuaGlkZSgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNob3coKTtcbiAgICB9XG4gIH1cblxuICBzaG93KCkge1xuICAgIHRoaXMubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJztcbiAgICB0aGlzLmRyb3Bkb3duPy5bJ2FwcGx5Q29udGFpbmVyJ10oKTtcbiAgICB0aGlzLmRvQXV0b1VwZGF0ZVBvc2l0aW9uKCk7XG4gIH1cblxuICBoaWRlKCkge1xuICAgIHRoaXMubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJyc7XG4gICAgdGhpcy5kcm9wZG93bj8uWydyZXNldENvbnRhaW5lciddKCk7XG4gICAgdGhpcy5jbGVhbnVwPy4oKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0VG9nZ2xlckVsZW1lbnQoKTogRWxlbWVudFJlZiB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMubWVudUl0ZW0/LlsnZWxlbWVudFJlZiddIHx8XG4gICAgICAodGhpcy5kcm9wZG93bj8uWydkcm9wZG93blRvZ2dsZSddPy5bJ2VsZW1lbnRSZWYnXSBhcyBFbGVtZW50UmVmKVxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZVBvc2l0aW9uKCkge1xuICAgIGNvbnN0IHRvZ2dsZUVsZW1lbnQgPSB0aGlzLmdldFRvZ2dsZXJFbGVtZW50KCk7XG4gICAgaWYgKCF0b2dnbGVFbGVtZW50IHx8ICF0aGlzLmVsZW1lbnRSZWYpIHJldHVybjtcblxuICAgIGNvbXB1dGVQb3NpdGlvbih0b2dnbGVFbGVtZW50Lm5hdGl2ZUVsZW1lbnQsIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCB7XG4gICAgICBwbGFjZW1lbnQ6IHRoaXMucGxhY2VtZW50LFxuICAgICAgbWlkZGxld2FyZTogW2ZsaXAoKSwgc2hpZnQoKV0sXG4gICAgfSkudGhlbigoeyB4LCB5IH0pID0+IHtcbiAgICAgIE9iamVjdC5hc3NpZ24odGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuc3R5bGUsIHtcbiAgICAgICAgdG9wOiBgJHt5fXB4YCxcbiAgICAgICAgbGVmdDogYCR7eH1weGAsXG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgZG9BdXRvVXBkYXRlUG9zaXRpb24oKSB7XG4gICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgY29uc3QgdG9nZ2xlRWxlbWVudCA9IHRoaXMuZ2V0VG9nZ2xlckVsZW1lbnQoKTtcbiAgICAgIGlmICghdG9nZ2xlRWxlbWVudCB8fCAhdGhpcy5lbGVtZW50UmVmKSByZXR1cm47XG5cbiAgICAgIHRoaXMuY2xlYW51cCA9IGF1dG9VcGRhdGUodG9nZ2xlRWxlbWVudC5uYXRpdmVFbGVtZW50LCB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgKCkgPT4ge1xuICAgICAgICB0aGlzLnVwZGF0ZVBvc2l0aW9uKCk7XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxufVxuIl19