@ifsworld/granite-components 4.4.0 → 5.0.1

package/esm2015/lib/menu/menu-trigger-for.directive.js

@@ -1,684 +0,0 @@
-import { Directive, ElementRef, Inject, Input, Optional, Self, ViewContainerRef, } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { FocusMonitor, isFakeMousedownFromScreenReader, } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { Overlay, OverlayConfig, } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { asapScheduler, fromEvent, merge, of as observableOf, Subscription, } from 'rxjs';
-import { delay, filter, take, takeUntil } from 'rxjs/operators';
-import { _MenuBaseComponent } from './menu.component';
-import { GraniteMenuItemComponent } from './menu-item.component';
-import { GRANITE_MENU_PANEL } from './menu-panel';
-//#region --- Touch device customizations ---
-import { GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, } from '../core/client-environment';
-import { throwGraniteMenuMissingError } from './menu-errors';
-/** Options for binding a passive event listener. */
-const passiveEventListenerOptions = normalizePassiveListenerOptions({
-    passive: true,
-});
-//#endregion --- Touch device customizations ---
-/**
- * Directive used to turn a button element into a (popup) menu trigger
- *
- * Stripped-down version of Angular Material's menu trigger directive (.../menu/menu-trigger.ts)
- */
-export class GraniteMenuTriggerForDirective {
-    constructor(_overlay, _element, _viewContainerRef, 
-    /** If this is a _submenu_ trigger, it will have a parent menu */
-    _parentMenu, 
-    //#region --- Touch device customizations ---
-    /** Client input device information */
-    _clientInput, 
-    /** Client output device information */
-    _clientOutput, 
-    //#endregion --- Touch device customizations ---
-    /**
-     * If this is a _submenu_ trigger, there should be a corresponding menu
-     * item directive present as well:
-     *
-     *     <button graniteMenuItem [graniteMenuTriggerFor]="...">
-     *                   ^-- This one
-     */
-    _menuItemInstance, _dir, _focusMonitor, 
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    document) {
-        this._overlay = _overlay;
-        this._element = _element;
-        this._viewContainerRef = _viewContainerRef;
-        this._parentMenu = _parentMenu;
-        this._clientInput = _clientInput;
-        this._clientOutput = _clientOutput;
-        this._menuItemInstance = _menuItemInstance;
-        this._dir = _dir;
-        this._focusMonitor = _focusMonitor;
-        /** Whether the associated menu is open */
-        this._isMenuOpen = false;
-        // Tracking input type is necessary so it's possible to only auto-focus
-        // the first item of the list when the menu is opened via the keyboard
-        this._openedBy = null;
-        this._hoverSubscription = Subscription.EMPTY;
-        this._menuCloseSubscription = Subscription.EMPTY;
-        this._closingActionsSubscription = Subscription.EMPTY;
-        this._portal = null;
-        this._overlayRef = null;
-        this._touchTouchingElement = false;
-        /**
-         * Handles touch start events on the trigger.
-         * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
-         */
-        this._handleTouchStart = () => {
-            this._openedBy = 'touch';
-        };
-        // ----------------------------------------- //
-        // --- Here be poor man's touch gestures --- //
-        // ----------------------------------------- //
-        // TODO: Replace with Hammer or other gesture library
-        /**
-         * Handles touch start events on the overlay host element (wrapper).
-         * Needs to be an arrow function so we can easily use addEventListener and removeEventListener.
-         */
-        this._handleOverlayTouchStart = (event) => {
-            if (this.menu._isAnimating) {
-                return;
-            }
-            this._touchStartTime = new Date().getTime();
-            this._touchStartX = event.changedTouches[0].clientX;
-            this._touchStartY = event.changedTouches[0].clientY;
-            this._touchCurrentX = this._touchStartX;
-            this._touchCurrentY = this._touchStartY;
-            this._touchTranslateX = 0;
-            this._touchMaxX = this._overlayRef.hostElement.getBoundingClientRect().width;
-            this._touchLockedX = null;
-            this._touchTouchingElement = true;
-        };
-        this._handleOverlayTouchMove = (event) => {
-            if (!this._touchTouchingElement || this.menu._isAnimating) {
-                return;
-            }
-            if (this._touchLockedX) {
-                return;
-            }
-            this._touchCurrentX = event.changedTouches[0].clientX;
-            this._touchCurrentY = event.changedTouches[0].clientY;
-            // Lock X-axis pan if initiating pan on Y-axis
-            if (this._touchLockedX === null) {
-                const dy = Math.abs(this._touchCurrentY - this._touchStartY);
-                const dx = Math.abs(this._touchCurrentX - this._touchStartX);
-                if (dx > 10 || dy > 10) {
-                    this._touchLockedX = dy > dx;
-                    return;
-                }
-            }
-            // Restrict to right pan/swipe and make menu movement extremely slow when
-            // moved past allowed limits.
-            const menuMargin = 16;
-            this._touchTranslateX = this._touchCurrentX - this._touchStartX;
-            if (this._touchTranslateX < 0) {
-                this._touchTranslateX = this.easeOutExpo(this._touchTranslateX, 0, -menuMargin / 2, this._touchMaxX * -4);
-            }
-            else if (!this._parentMenu) {
-                this._touchTranslateX = this.easeOutExpo(this._touchTranslateX, 0, menuMargin / 2, this._touchMaxX * 4);
-            }
-            else if (this._touchTranslateX > this._touchMaxX) {
-                this._touchTranslateX = this.easeOutExpo(this._touchTranslateX - this._touchMaxX, this._touchMaxX, menuMargin / 2, this._touchMaxX * 4);
-            }
-            // Set new sub menu position and tell any parent to follow;
-            this.animateSetMenuPosition(this._touchTranslateX);
-        };
-        this._handleOverlayTouchEnd = () => {
-            if (!this._touchTouchingElement || this.menu._isAnimating) {
-                return;
-            }
-            this._touchTranslateX = this._touchCurrentX - this._touchStartX;
-            if (this._touchTranslateX === 0) {
-                return;
-            }
-            this._touchTouchingElement = false;
-            this._touchTimeTaken = new Date().getTime() - this._touchStartTime;
-            const swipeMinDistance = 10;
-            const swipeMinTime = 50;
-            const swipeMaxTime = 300;
-            const pannedHalfwayRight = this._touchTranslateX > this._touchMaxX / 2;
-            const swipedRight = this._touchTranslateX > this._touchMaxX / swipeMinDistance &&
-                this._touchTimeTaken > swipeMinTime &&
-                this._touchTimeTaken < swipeMaxTime;
-            if (!!this._parentMenu && (swipedRight || pannedHalfwayRight)) {
-                // Close submenu keydown-style: close only this menu and leave parents open
-                this.menu.closed.emit('keydown');
-            }
-            else {
-                // Pan ended but the menu was not moved far enough. Reset menus to
-                // where they were before panning stared.
-                this.animateOpenMenu();
-            }
-        };
-        _element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        if (_menuItemInstance) {
-            _menuItemInstance._triggersSubmenu = this.triggersSubmenu();
-        }
-        this._document = document;
-    }
-    ngOnChanges(changes) {
-        if (changes.menu) {
-            this._handleMenuChange();
-        }
-    }
-    ngAfterContentInit() {
-        // removed checkMenu here to avoid errors in dynamically genarated menus
-        // menu is checked when opening the menu
-        // this._checkMenu();
-        this._handleHover();
-    }
-    ngOnDestroy() {
-        if (this._overlayRef) {
-            //#region --- Touch device customizations ---
-            this.removeOverlayListeners();
-            //#endregion --- Touch device customizations ---
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-        this._element.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        this._hoverSubscription.unsubscribe();
-        this._menuCloseSubscription.unsubscribe();
-        this._closingActionsSubscription.unsubscribe();
-    }
-    /** Handles change of associated menu */
-    _handleMenuChange() {
-        this._menuCloseSubscription.unsubscribe();
-        // Close the menu overlay when the menu itself says it wants to be closed
-        if (this.menu) {
-            const closed = this.menu.closed;
-            this._menuCloseSubscription = closed.subscribe((reason) => {
-                //#region --- Touch device customizations ---
-                if (this.menu._isClosing) {
-                    return;
-                }
-                this.menu._isClosing = true;
-                // Get rid of the menu and tell any parent to restore its position
-                if (this._clientOutput.device === 'touch') {
-                    // First we wait for any running animation to complete
-                    const runningAnimationDone = this.menu._isAnimating
-                        ? this.menu._animationDone
-                        : observableOf([null]);
-                    runningAnimationDone
-                        .pipe(take(1), delay(0, asapScheduler))
-                        // eslint-disable-next-line rxjs/no-nested-subscribe
-                        .subscribe(() => {
-                        this.animateCloseMenu(reason !== 'keydown', reason === 'click');
-                        this.menu._animationDone
-                            .pipe(take(1), delay(0, asapScheduler))
-                            // eslint-disable-next-line rxjs/no-nested-subscribe
-                            .subscribe(() => this._destroyMenu());
-                    });
-                }
-                else {
-                    //#endregion --- Touch device customizations ---
-                    this._destroyMenu();
-                }
-                // If a click closed the menu, we should close the entire chain of nested menus.
-                if ((reason === 'click' || reason === 'tab') && this._parentMenu) {
-                    this._parentMenu.closed.emit(reason);
-                }
-            });
-        }
-    }
-    isOpen() {
-        return this._isMenuOpen;
-    }
-    /** Open the associated menu */
-    openMenu() {
-        var _a;
-        if (this._isMenuOpen) {
-            return;
-        }
-        this._checkMenu();
-        this.menu.parentMenu = this.triggersSubmenu()
-            ? this._parentMenu
-            : undefined;
-        this.menu.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-        if (this._parentMenu) {
-            // Menu triggers inherit target device types from their parent.
-            // Ultimately it is the root trigger that determines device types for
-            // the whole menu hierarchy.
-            this._clientInput = this._parentMenu._clientInput;
-            this._clientOutput = this._parentMenu._clientOutput;
-        }
-        //#region --- Touch device customizations ---
-        // Make the menu we're about to open use the same devices as the trigger
-        this.menu._setDevice(this._clientInput, this._clientOutput);
-        if (this._clientOutput.device === 'touch') {
-            this.menu.showBackButton = !!this._parentMenu;
-            this.menu._updateShowTitle();
-            if (!this.menu.closeLabel) {
-                this.menu.closeLabel = (_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a.closeLabel;
-            }
-            this.menu.showCloseButton = !!this.menu.closeLabel;
-        }
-        this.menu._isClosing = false;
-        const panelClass = [];
-        if (this._clientOutput.device === 'touch') {
-            panelClass.push('granite-overlay-pane-fill-width-bottom');
-        }
-        const scrollStrategy = this._clientOutput.device !== 'touch'
-            ? this._overlay.scrollStrategies.reposition()
-            : undefined;
-        const hasBackdrop = this._clientOutput.device === 'touch' && !this.triggersSubmenu();
-        //#endregion --- Touch device customizations ---
-        // Create an overlay to stuff the menu (portal) into below
-        if (!this._overlayRef) {
-            const config = new OverlayConfig({
-                positionStrategy: this._positionStrategy(),
-                backdropClass: 'granite-overlay-dark-glass-backdrop',
-                scrollStrategy,
-                direction: this._dir,
-                panelClass,
-                hasBackdrop,
-            });
-            this._overlayRef = this._overlay.create(config);
-            //#region --- Touch device customizations ---
-            // Add touch listener for submenu back pan/swipe
-            if (this._clientOutput.device === 'touch') {
-                this.addOverlayListeners();
-            }
-            //#endregion --- Touch device customizations ---
-        }
-        else {
-            // Reset animation state for reused overlays
-            if (this._clientOutput.device === 'touch') {
-                this.menu._panelAnimationState = 'void';
-            }
-        }
-        // Create portal from associated menu's template
-        if (!this._portal || this._portal.templateRef !== this.menu.templateRef) {
-            this._portal = new TemplatePortal(this.menu.templateRef, this._viewContainerRef);
-        }
-        // Attach menu portal to overlay ref (which is a portal outlet)
-        this._overlayRef.attach(this._portal);
-        // Subscribe to stream that emits whenever an action that should close the menu occurs
-        this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
-        this.animateOpenMenu();
-        this._setIsMenuOpen(true);
-        this.menu.focusFirstItem(this._openedBy || 'program');
-    }
-    /** Whether the menu triggers a sub-menu or a top-level one. */
-    triggersSubmenu() {
-        return !!(this._menuItemInstance && this._parentMenu);
-    }
-    /** Toggles the menu between the open and closed states. */
-    toggleMenu() {
-        if (this._isMenuOpen) {
-            this.closeMenu();
-        }
-        else {
-            this.openMenu();
-        }
-    }
-    /** Close the associated menu */
-    closeMenu() {
-        this.menu.closed.emit();
-    }
-    /**
-     * Focuses the menu trigger.
-     * @param origin Source of the menu trigger's focus.
-     */
-    focus(origin = 'program', options) {
-        if (this._focusMonitor) {
-            this._focusMonitor.focusVia(this._element, origin, options);
-        }
-        else {
-            this._element.nativeElement.focus(options);
-        }
-    }
-    /** Detach menu portal from overlay and update open state */
-    _destroyMenu() {
-        if (!this._overlayRef || !this._isMenuOpen) {
-            return;
-        }
-        this._closingActionsSubscription.unsubscribe();
-        this._overlayRef.detach();
-        this._restoreFocus();
-        this.menu._resetAnimation();
-        this._setIsMenuOpen(false);
-    }
-    /** Handles mouse presses on the trigger. */
-    _handleMousedown(event) {
-        if (!isFakeMousedownFromScreenReader(event)) {
-            if (this._openedBy !== 'touch') {
-                // Since right or middle button clicks won't trigger the `click` event,
-                // we shouldn't consider the menu as opened by mouse in those cases.
-                this._openedBy = event.button === 0 ? 'mouse' : null;
-            }
-            // Since clicking on the trigger won't close the menu if it opens a sub-menu,
-            // we should prevent focus from moving onto it via click to avoid the
-            // highlight from lingering on the menu item.
-            if (this.triggersSubmenu() && !this._toggleOnSubmenuClick()) {
-                event.preventDefault();
-            }
-        }
-    }
-    /** Handles key presses on the trigger. */
-    _handleKeydown(event) {
-        const key = event.key;
-        if (this.triggersSubmenu() &&
-            ((key === 'ArrowRight' && this._dir.value === 'ltr') ||
-                (key === 'ArrowLeft' && this._dir.value === 'rtl'))) {
-            this.openMenu();
-        }
-    }
-    /** Handles click events on the trigger. */
-    _handleClick(event) {
-        if (this.triggersSubmenu()) {
-            // Stop event propagation to avoid closing the parent menu.
-            event.stopPropagation();
-            this._toggleOnSubmenuClick() ? this.toggleMenu() : this.openMenu();
-        }
-        else {
-            this.toggleMenu();
-        }
-    }
-    /** Handles the cases where the user hovers over the trigger. */
-    _handleHover() {
-        // Subscribe to changes in the hovered item in order to toggle the panel.
-        if (!this.triggersSubmenu() || !this._parentMenu) {
-            return;
-        }
-        this._hoverSubscription = this._parentMenu
-            ._hovered()
-            .pipe(filter(() => this._openOnHover()), 
-        // Since we might have multiple competing triggers for the same menu (e.g. a sub-menu
-        // with different data and triggers), we have to delay it by a tick to ensure that
-        // it won't be closed immediately after it is opened.
-        filter((active) => active === this._menuItemInstance /*&& !active.disabled*/), delay(0, asapScheduler))
-            .subscribe(() => {
-            this._openedBy = 'mouse';
-            // If the same menu is used between multiple triggers, it might still be animating
-            // while the new trigger tries to re-open it. Wait for the animation to finish
-            // before doing so. Also interrupt if the user moves to another item.
-            if (this.menu instanceof _MenuBaseComponent && this.menu._isAnimating) {
-                // We need the `delay(0)` here in order to avoid
-                // 'changed after checked' errors in some cases. See Angular Material #12194.
-                this.menu._animationDone
-                    .pipe(take(1), delay(0, asapScheduler), takeUntil(this._parentMenu._hovered()))
-                    // eslint-disable-next-line rxjs/no-nested-subscribe
-                    .subscribe(() => this.openMenu());
-            }
-            else {
-                this.openMenu();
-            }
-        });
-    }
-    /**
-     * Restores focus to the element that was focused before the menu was open.
-     * Could be the root trigger button or a submenu trigger item
-     */
-    _restoreFocus() {
-        // We should reset focus if the user is navigating using a keyboard or
-        // if we have a top-level trigger which might cause focus to be lost
-        // when clicking outside of the menu.
-        if (!this._openedBy) {
-            // Note that the focus style will show up both for `program` and
-            // `keyboard` so we don't have to specify which one it is.
-            this.focus();
-        }
-        else if (!this.triggersSubmenu()) {
-            this.focus(this._openedBy);
-        }
-        this._openedBy = null;
-    }
-    // Set state rather than toggle to support triggers sharing a menu
-    _setIsMenuOpen(isOpen) {
-        this._isMenuOpen = isOpen;
-        if (this.triggersSubmenu()) {
-            this._menuItemInstance._highlighted =
-                isOpen && this._clientOutput.device !== 'touch';
-        }
-    }
-    /**
-     * This method checks that a valid instance of MenuComponent has been passed into
-     * graniteMenuTriggerFor. If not, an exception is thrown.
-     */
-    _checkMenu() {
-        if (!this.menu) {
-            throwGraniteMenuMissingError();
-        }
-    }
-    /**
-     * Returns strategy for positioning the overlay for desktop devices:
-     * Place adjacent to the trigger button (preferably immediately below)
-     * in order to show as much of the menu as possible.
-     */
-    _desktopPositionStrategy() {
-        const positionStrategy = this._overlay
-            .position()
-            .flexibleConnectedTo(this._element)
-            .withLockedPosition()
-            .withTransformOriginOn('.granite-menu')
-            .withPush(false);
-        this._setPosition(positionStrategy);
-        return positionStrategy;
-    }
-    /**
-     * Sets the appropriate positions on a position strategy
-     * so the overlay connects with the trigger correctly.
-     * @param positionStrategy Strategy whose position to update.
-     */
-    _setPosition(positionStrategy) {
-        const MENU_PANEL_TOP_PADDING = 0;
-        let [originX, originFallbackX] = this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
-        const [overlayY, overlayFallbackY] = this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
-        let [originY, originFallbackY] = [overlayY, overlayFallbackY];
-        let [overlayX, overlayFallbackX] = [originX, originFallbackX];
-        let offsetY = 0;
-        if (this.triggersSubmenu()) {
-            // When the menu is a sub-menu, it should always align itself
-            // to the edges of the trigger, instead of overlapping it.
-            overlayFallbackX = originX =
-                this.menu.xPosition === 'before' ? 'start' : 'end';
-            originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
-            offsetY =
-                overlayY === 'bottom'
-                    ? MENU_PANEL_TOP_PADDING
-                    : -MENU_PANEL_TOP_PADDING;
-        }
-        else {
-            originY = overlayY === 'top' ? 'bottom' : 'top';
-            originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
-        }
-        positionStrategy.withPositions([
-            { originX, originY, overlayX, overlayY, offsetY },
-            {
-                originX: originFallbackX,
-                originY,
-                overlayX: overlayFallbackX,
-                overlayY,
-                offsetY,
-            },
-            {
-                originX,
-                originY: originFallbackY,
-                overlayX,
-                overlayY: overlayFallbackY,
-                offsetY: -offsetY,
-            },
-            {
-                originX: originFallbackX,
-                originY: originFallbackY,
-                overlayX: overlayFallbackX,
-                overlayY: overlayFallbackY,
-                offsetY: -offsetY,
-            },
-        ]);
-    }
-    /** Returns a stream that emits whenever an action that should close the menu occurs. */
-    _menuClosingActions() {
-        var _a;
-        const detachments = (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detachments();
-        const parentClose = this._parentMenu
-            ? this._parentMenu.closed
-            : observableOf();
-        const hover = this._clientOutput.device === 'desktop' && this._parentMenu
-            ? this._parentMenu._hovered().pipe(filter((item) => item !== this._menuItemInstance), filter(() => this._isMenuOpen))
-            : observableOf();
-        // Note: Quick fix. Feature reportedly exists in CDK for Angular 10
-        // Filter to prevent closing when animating added though. Applied to
-        // root menu only.
-        const outsideClick = !this._parentMenu
-            ? fromEvent(this._document, 'click').pipe(filter((e) => e.target !== this._element.nativeElement &&
-                e.target.closest('.granite-menu') === null), filter(() => !this.menu._isAnimating))
-            : observableOf();
-        return merge(detachments, hover, parentClose, outsideClick);
-    }
-    /**
-     * Whether to automatically open submenus on hover. This is true when showing
-     * desktop menus and having mouse support.
-     */
-    _openOnHover() {
-        var _a, _b;
-        return ((this.triggersSubmenu()
-            ? this._parentMenu.openOnHover
-            : this.menu.openOnHover) &&
-            ((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' && ((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse')));
-    }
-    /**
-     * Whether to toggle submenus on click. This is true when showing desktop menus
-     * without mouse support. Which, by the way, is not a great idea to begin with.
-     */
-    _toggleOnSubmenuClick() {
-        var _a, _b;
-        return (!(this.triggersSubmenu()
-            ? this._parentMenu.openOnHover
-            : this.menu.openOnHover) ||
-            (((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' &&
-                !((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse'))));
-    }
-    // ------------------------------------------- //
-    // --- Here be touch device customizations --- //
-    // ------------------------------------------- //
-    /** Set animation state to bring a newly opened menu into view */
-    animateOpenMenu() {
-        this._clientOutput.device === 'touch'
-            ? this.animateTouchOpenMenu()
-            : this.menu._startAnimation();
-    }
-    animateTouchOpenMenu() {
-        if (this.triggersSubmenu()) {
-            // Slide newly opened sub menu into view from the side,
-            // pushing any parent menu out of view on the other side
-            this.menu._startTouchSubmenuEnterAnimation();
-            this._parentMenu._startTouchHideAnimation();
-        }
-        else {
-            // Slide root menu into view from below
-            this.menu._startTouchRootEnterAnimation();
-        }
-    }
-    /** Set animation state to close the active menu */
-    animateCloseMenu(toBelow, withDelay) {
-        this._clientOutput.device === 'touch'
-            ? this._animateTouchCloseMenu(toBelow, withDelay)
-            : this._parentMenu._resetAnimation();
-    }
-    _animateTouchCloseMenu(toBelow, withDelay) {
-        var _a;
-        if (toBelow) {
-            // Slide menu out of view below the viewport
-            withDelay
-                ? this.menu._startTouchCloseDownAnimationWithDelay()
-                : this.menu._startTouchCloseDownAnimation();
-        }
-        else {
-            // Slide the closed menu out of view to the side
-            // and slide any parent menu back into view
-            this.menu._startTouchCloseSideAnimation();
-            (_a = this._parentMenu) === null || _a === void 0 ? void 0 : _a._startTouchSubmenuEnterAnimation();
-        }
-    }
-    /**
-     * Set animation state to place the menu and any parent at the given
-     * horizontal position, i.e. following touch pan movement.
-     *
-     * @param xOffset Horizontal offset
-     */
-    animateSetMenuPosition(xOffset) {
-        this.menu._startTouchPanAnimation(xOffset);
-        if (this._parentMenu) {
-            this._parentMenu._startTouchHidePanAnimation(xOffset);
-        }
-    }
-    /**
-     * Returns strategy for positioning the overlay depending on what type of
-     * device the menu is being shown on
-     */
-    _positionStrategy() {
-        return this._clientOutput.device === 'touch'
-            ? this._touchPositionStrategy()
-            : this._desktopPositionStrategy();
-    }
-    /**
-     * Returns strategy for positioning the overlay for touch devices:
-     * Place centered at the bottom of the screen.
-     */
-    _touchPositionStrategy() {
-        return this._overlay.position().global();
-    }
-    /**
-     * Remove touch device pan/swipe listeners from overlay host element
-     */
-    addOverlayListeners() {
-        this._overlayRef.hostElement.addEventListener('touchstart', this._handleOverlayTouchStart, passiveEventListenerOptions);
-        this._overlayRef.hostElement.addEventListener('touchmove', this._handleOverlayTouchMove, passiveEventListenerOptions);
-        this._overlayRef.hostElement.addEventListener('touchend', this._handleOverlayTouchEnd, passiveEventListenerOptions);
-    }
-    /**
-     * Remove touch device pan/swipe listeners from overlay host element
-     */
-    removeOverlayListeners() {
-        this._overlayRef.hostElement.removeEventListener('touchstart', this._handleOverlayTouchStart, passiveEventListenerOptions);
-        this._overlayRef.hostElement.removeEventListener('touchmove', this._handleOverlayTouchMove, passiveEventListenerOptions);
-        this._overlayRef.hostElement.removeEventListener('touchend', this._handleOverlayTouchEnd, passiveEventListenerOptions);
-    }
-    /**
-     * Standard exponential ease out function
-     *
-     * @param current Current value
-     * @param offset Offset value, to which calculated value will be added
-     * @param target The target value
-     * @param end Value to which current value is compared
-     */
-    easeOutExpo(current, offset, target, end) {
-        return current === end
-            ? offset + target
-            : target * (-Math.pow(2, (-10 * current) / end) + 1) + offset;
-    }
-}
-GraniteMenuTriggerForDirective.decorators = [
-    { type: Directive, args: [{
-                selector: `[graniteMenuTriggerFor]`,
-                host: {
-                    class: 'granite-menu-trigger',
-                    'aria-haspopup': 'true',
-                    '[attr.aria-expanded]': '_isMenuOpen || null',
-                    '[attr.aria-controls]': '_isMenuOpen ? menu.panelId : null',
-                    '(mousedown)': '_handleMousedown($event)',
-                    '(keydown)': '_handleKeydown($event)',
-                    '(click)': '_handleClick($event)',
-                },
-            },] }
-];
-GraniteMenuTriggerForDirective.ctorParameters = () => [
-    { type: Overlay },
-    { type: ElementRef },
-    { type: ViewContainerRef },
-    { type: _MenuBaseComponent, decorators: [{ type: Inject, args: [GRANITE_MENU_PANEL,] }, { type: Optional }] },
-    { type: undefined, decorators: [{ type: Inject, args: [GRANITE_CLIENT_INPUT,] }, { type: Optional }] },
-    { type: undefined, decorators: [{ type: Inject, args: [GRANITE_CLIENT_OUTPUT,] }, { type: Optional }] },
-    { type: GraniteMenuItemComponent, decorators: [{ type: Optional }, { type: Self }] },
-    { type: Directionality, decorators: [{ type: Optional }] },
-    { type: FocusMonitor },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-GraniteMenuTriggerForDirective.propDecorators = {
-    menu: [{ type: Input, args: ['graniteMenuTriggerFor',] }]
-};
-//# sourceMappingURL=menu-trigger-for.directive.js.map