@educarehq/solaris-ui 0.2.0 → 0.3.0

package/esm2022/lib/components/interaction/dropdown-menu/component/dropdown-submenu.component.js

@@ -0,0 +1,631 @@
+import { Component, ElementRef, Injector, ViewContainerRef, contentChild, computed, input, signal, inject, DestroyRef, } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Overlay, OverlayConfig, } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { SolarisPopoverPanelComponent } from '../../popover';
+import { SOLARIS_POPOVER_PANEL_DATA, } from '../../popover/token/popover.tokens';
+import { SolarisDropdownMenuComponent } from './dropdown-menu.component';
+import { SolarisDropdownSubmenuTriggerComponent } from './dropdown-submenu-trigger.component';
+import * as i0 from "@angular/core";
+export class SolarisDropdownSubmenuComponent {
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
+    injector = inject(Injector);
+    overlay = inject(Overlay);
+    openMode = input('hover-click', ...(ngDevMode ? [{ debugName: "openMode" }] : /* istanbul ignore next */ []));
+    placement = input('right-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    matchTriggerWidth = input(false, ...(ngDevMode ? [{ debugName: "matchTriggerWidth" }] : /* istanbul ignore next */ []));
+    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    openDelay = input(120, ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(160, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    nestedMenu = contentChild(SolarisDropdownMenuComponent, ...(ngDevMode ? [{ debugName: "nestedMenu" }] : /* istanbul ignore next */ []));
+    triggerChild = contentChild(SolarisDropdownSubmenuTriggerComponent, ...(ngDevMode ? [{ debugName: "triggerChild" }] : /* istanbul ignore next */ []));
+    nestedMenuPanelId = computed(() => {
+        return this.nestedMenu()?.panelId ?? null;
+    }, ...(ngDevMode ? [{ debugName: "nestedMenuPanelId" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    outsideClickCleanup = null;
+    keydownCleanup = null;
+    itemClickCleanup = null;
+    panelMouseEnterCleanup = null;
+    panelMouseLeaveCleanup = null;
+    openTimer = null;
+    closeTimer = null;
+    constructor() {
+        // SECURITY_EXCEPTION: nativeElement required to store submenu reference. SSR-safe via ElementRef.
+        this.elementRef.nativeElement['__solarisSubmenu'] = this;
+        // SECURITY_EXCEPTION: nativeElement.addEventListener required for custom events. SSR-safe.
+        this.elementRef.nativeElement.addEventListener('solaris-submenu-child-opened', () => this.clearCloseTimer());
+        // SECURITY_EXCEPTION: nativeElement.addEventListener required for custom events. SSR-safe.
+        this.elementRef.nativeElement.addEventListener('solaris-submenu-child-closed', () => {
+            if (this.isOpen() &&
+                !this.isPointerInside() &&
+                !this.hasOpenChildSubmenu()) {
+                this.close();
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.overlayRef) {
+                this.overlayRef = null;
+            }
+            this.clearTimers();
+        });
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isOpen() || this.disabled()) {
+            return;
+        }
+        this.closeSiblingSubmenus();
+        this.clearTimers();
+        this.createOverlay();
+        this.attachMenu();
+        this.addOutsideClickHandler();
+        this.addKeydownHandler();
+        this.addItemClickHandler();
+        this.addPanelMouseHandlers();
+        this.isOpen.set(true);
+        this.notifyParentKeepAlive();
+    }
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.detachMenu();
+        this.isOpen.set(false);
+        this.triggerChild()?.focus();
+        this.notifyParentChildClosed();
+    }
+    onTriggerHover() {
+        if (!this.openMode().includes('hover')) {
+            return;
+        }
+        this.clearCloseTimer();
+        if (!this.isOpen()) {
+            this.openTimer = setTimeout(() => {
+                this.open();
+            }, this.openDelay());
+        }
+    }
+    onTriggerLeave() {
+        if (!this.openMode().includes('hover')) {
+            return;
+        }
+        if (this.hasOpenChildSubmenu()) {
+            return;
+        }
+        this.clearOpenTimer();
+        this.closeTimer = setTimeout(() => {
+            if (!this.isPointerInside()) {
+                this.close();
+            }
+        }, this.closeDelay());
+    }
+    addPanelMouseHandlers() {
+        this.removePanelMouseHandlers();
+        if (!this.overlayRef)
+            return;
+        this.panelMouseEnterCleanup = this.rendererListen(this.overlayRef.overlayElement, 'mouseenter', () => this.clearCloseTimer());
+        this.panelMouseLeaveCleanup = this.rendererListen(this.overlayRef.overlayElement, 'mouseleave', () => {
+            if (!this.openMode().includes('hover'))
+                return;
+            if (this.hasOpenChildSubmenu())
+                return;
+            this.closeTimer = setTimeout(() => {
+                this.close();
+            }, this.closeDelay());
+        });
+    }
+    removePanelMouseHandlers() {
+        if (this.panelMouseEnterCleanup) {
+            this.panelMouseEnterCleanup();
+            this.panelMouseEnterCleanup = null;
+        }
+        if (this.panelMouseLeaveCleanup) {
+            this.panelMouseLeaveCleanup();
+            this.panelMouseLeaveCleanup = null;
+        }
+    }
+    isPointerInside() {
+        // SECURITY_EXCEPTION: nativeElement required for hover detection via ElementRef. Read-only, SSR-safe.
+        const triggerEl = this.elementRef.nativeElement;
+        const overlayEl = this.overlayRef?.overlayElement;
+        if (overlayEl) {
+            return triggerEl.matches(':hover') || overlayEl.matches(':hover');
+        }
+        return triggerEl.matches(':hover');
+    }
+    notifyParentKeepAlive() {
+        // SECURITY_EXCEPTION: nativeElement.dispatchEvent required for custom event. SSR-safe.
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('solaris-submenu-child-opened', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    notifyParentChildClosed() {
+        // SECURITY_EXCEPTION: nativeElement.dispatchEvent required for custom event. SSR-safe.
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('solaris-submenu-child-closed', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    hasOpenChildSubmenu() {
+        if (!this.overlayRef)
+            return false;
+        const overlayEl = this.overlayRef.overlayElement;
+        const childSubmenus = overlayEl.querySelectorAll('solaris-dropdown-submenu');
+        for (let i = 0; i < childSubmenus.length; i++) {
+            const child = childSubmenus[i];
+            const submenu = child['__solarisSubmenu'];
+            if (submenu?.isOpen())
+                return true;
+        }
+        return false;
+    }
+    closeSiblingSubmenus() {
+        // SECURITY_EXCEPTION: nativeElement.parentElement required to traverse DOM. Read-only, SSR-safe.
+        const parent = this.elementRef.nativeElement.parentElement;
+        if (!parent)
+            return;
+        const siblings = parent.querySelectorAll(':scope > solaris-dropdown-submenu');
+        for (let i = 0; i < siblings.length; i++) {
+            const sibling = siblings[i];
+            // SECURITY_EXCEPTION: nativeElement identity comparison. Read-only, SSR-safe.
+            if (sibling !== this.elementRef.nativeElement) {
+                const submenu = sibling['__solarisSubmenu'];
+                submenu?.close();
+            }
+        }
+    }
+    createOverlay() {
+        this.disposeOverlay();
+        const positionStrategy = this.createPositionStrategy();
+        const scrollStrategy = this.overlay.scrollStrategies.reposition();
+        const config = new OverlayConfig({
+            positionStrategy,
+            scrollStrategy,
+            disposeOnNavigation: true,
+            panelClass: 'solaris-dropdown-menu-overlay',
+        });
+        this.overlayRef = this.overlay.create(config);
+    }
+    createPositionStrategy() {
+        const positions = this.getPositions();
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(positions)
+            .withFlexibleDimensions(true)
+            .withPush(true);
+    }
+    getPositions() {
+        const placement = this.placement();
+        const offset = 16;
+        let primary;
+        let fallbacks;
+        switch (placement) {
+            case 'right-start':
+                primary = {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetX: offset,
+                };
+                fallbacks = [
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'end',
+                        overlayY: 'top',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'end',
+                        overlayY: 'bottom',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'center',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'center',
+                        overlayX: 'end',
+                        overlayY: 'center',
+                        offsetX: -offset,
+                    },
+                ];
+                break;
+            case 'right':
+                primary = {
+                    originX: 'end',
+                    originY: 'center',
+                    overlayX: 'start',
+                    overlayY: 'center',
+                    offsetX: offset,
+                };
+                fallbacks = [
+                    {
+                        originX: 'start',
+                        originY: 'center',
+                        overlayX: 'end',
+                        overlayY: 'center',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'end',
+                        overlayY: 'top',
+                        offsetX: -offset,
+                    },
+                ];
+                break;
+            case 'right-end':
+                primary = {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetX: offset,
+                };
+                fallbacks = [
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'end',
+                        overlayY: 'bottom',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'end',
+                        overlayY: 'top',
+                        offsetX: -offset,
+                    },
+                ];
+                break;
+            case 'left-start':
+                primary = {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetX: -offset,
+                };
+                fallbacks = [
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'end',
+                        overlayY: 'bottom',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                        offsetX: offset,
+                    },
+                ];
+                break;
+            case 'left':
+                primary = {
+                    originX: 'start',
+                    originY: 'center',
+                    overlayX: 'end',
+                    overlayY: 'center',
+                    offsetX: -offset,
+                };
+                fallbacks = [
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'center',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'end',
+                        overlayY: 'top',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                        offsetX: offset,
+                    },
+                ];
+                break;
+            case 'left-end':
+                primary = {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    offsetX: -offset,
+                };
+                fallbacks = [
+                    {
+                        originX: 'end',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                        offsetX: offset,
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'end',
+                        overlayY: 'top',
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                        offsetX: offset,
+                    },
+                ];
+                break;
+        }
+        return [primary, ...fallbacks];
+    }
+    attachMenu() {
+        if (!this.overlayRef)
+            return;
+        const menu = this.nestedMenu();
+        if (!menu)
+            return;
+        const data = {
+            contentTemplate: menu.contentTemplate(),
+            appearance: 'surface',
+            padding: 'none',
+            radius: 'md',
+            role: undefined,
+            panelId: menu.panelId,
+            autoFocus: false,
+        };
+        const panelInjector = Injector.create({
+            parent: this.injector,
+            providers: [{ provide: SOLARIS_POPOVER_PANEL_DATA, useValue: data }],
+        });
+        const portal = new ComponentPortal(SolarisPopoverPanelComponent, this.viewContainerRef, panelInjector);
+        this.overlayRef.attach(portal);
+        this.updateOverlaySize();
+        setTimeout(() => {
+            menu.focusFirstItem();
+        });
+    }
+    detachMenu() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.disposeOverlay();
+        }
+        this.removeOutsideClickHandler();
+        this.removeKeydownHandler();
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            try {
+                this.overlayRef.dispose();
+            }
+            catch {
+                // Injector may already be destroyed during test teardown
+            }
+            this.overlayRef = null;
+        }
+        this.removeOutsideClickHandler();
+        this.removeKeydownHandler();
+        this.removeItemClickHandler();
+        this.removePanelMouseHandlers();
+    }
+    addOutsideClickHandler() {
+        this.removeOutsideClickHandler();
+        this.outsideClickCleanup = this.rendererListen(this.document, 'click', this.handleOutsideClick);
+    }
+    removeOutsideClickHandler() {
+        if (this.outsideClickCleanup) {
+            this.outsideClickCleanup();
+            this.outsideClickCleanup = null;
+        }
+    }
+    handleOutsideClick = (event) => {
+        if (!this.overlayRef)
+            return;
+        const overlayElement = this.overlayRef.overlayElement;
+        // SECURITY_EXCEPTION: nativeElement needed for outside-click containment check. ElementRef SSR-safe.
+        const triggerElement = this.elementRef.nativeElement;
+        const target = event.target;
+        if (!target)
+            return;
+        if (overlayElement.contains(target) || triggerElement.contains(target))
+            return;
+        if (this.hasOpenChildSubmenu())
+            return;
+        this.close();
+    };
+    addItemClickHandler() {
+        this.removeItemClickHandler();
+        if (!this.overlayRef)
+            return;
+        this.itemClickCleanup = this.rendererListen(this.overlayRef.overlayElement, 'click', this.handleItemClick);
+    }
+    removeItemClickHandler() {
+        if (this.itemClickCleanup) {
+            this.itemClickCleanup();
+            this.itemClickCleanup = null;
+        }
+    }
+    handleItemClick = (event) => {
+        if (!this.overlayRef)
+            return;
+        const target = event.target;
+        if (target.closest('solaris-dropdown-menu-item')) {
+            this.close();
+        }
+    };
+    addKeydownHandler() {
+        this.removeKeydownHandler();
+        if (!this.overlayRef)
+            return;
+        this.keydownCleanup = this.rendererListen(this.overlayRef.overlayElement, 'keydown', this.handleOverlayKeydown);
+    }
+    removeKeydownHandler() {
+        if (this.keydownCleanup) {
+            this.keydownCleanup();
+            this.keydownCleanup = null;
+        }
+    }
+    handleOverlayKeydown = (event) => {
+        if (this.isOpen() && this.nestedMenu()) {
+            this.handleKeydown(event);
+        }
+    };
+    handleKeydown(event) {
+        const menu = this.nestedMenu();
+        if (!menu)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                menu.focusNextItem();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                menu.focusPreviousItem();
+                break;
+            case 'Home':
+                event.preventDefault();
+                menu.focusFirstItem();
+                break;
+            case 'End':
+                event.preventDefault();
+                menu.focusLastItem();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                menu.activateFocusedItem();
+                this.close();
+                break;
+            case 'ArrowLeft':
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            default:
+                if (event.key.length === 1 &&
+                    !event.ctrlKey &&
+                    !event.metaKey &&
+                    !event.altKey) {
+                    menu.focusItemByLabel(event.key);
+                }
+                break;
+        }
+    }
+    rendererListen(target, event, callback) {
+        target.addEventListener(event, callback);
+        return () => {
+            target.removeEventListener(event, callback);
+        };
+    }
+    updateOverlaySize() {
+        if (!this.overlayRef)
+            return;
+        const size = {};
+        const minW = this.minWidth();
+        const maxW = this.maxWidth();
+        if (minW !== null) {
+            size.minWidth = minW;
+        }
+        if (maxW !== null) {
+            size.maxWidth = maxW;
+        }
+        this.overlayRef.updateSize(size);
+    }
+    clearTimers() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+    }
+    clearOpenTimer() {
+        if (this.openTimer) {
+            clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    clearCloseTimer() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SolarisDropdownSubmenuComponent, isStandalone: true, selector: "solaris-dropdown-submenu", inputs: { openMode: { classPropertyName: "openMode", publicName: "openMode", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "solaris-dropdown-submenu" }, queries: [{ propertyName: "nestedMenu", first: true, predicate: SolarisDropdownMenuComponent, descendants: true, isSignal: true }, { propertyName: "triggerChild", first: true, predicate: SolarisDropdownSubmenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDropdownSubmenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'solaris-dropdown-submenu',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'solaris-dropdown-submenu',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { openMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "openMode", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nestedMenu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisDropdownMenuComponent), { isSignal: true }] }], triggerChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisDropdownSubmenuTriggerComponent), { isSignal: true }] }] } });
+//# sourceMappingURL=dropdown-submenu.component.js.map