@educarehq/solaris-ui 0.3.0 → 0.3.2

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

@@ -1,631 +0,0 @@
-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