@theseam/ui-common 0.3.10 → 0.4.0-beta.0

package/fesm2015/theseam-ui-common-menu.js

@@ -1,763 +0,0 @@
-import { animation, style, group, animate, query, useAnimation, trigger, transition } from '@angular/animations';
-import { Component, ChangeDetectionStrategy, InjectionToken, ElementRef, Inject, Optional, Input, HostListener, Directive, ViewContainerRef, forwardRef, EventEmitter, ViewChild, TemplateRef, Output, HostBinding, NgModule } from '@angular/core';
-import { FocusMonitor, isFakeMousedownFromScreenReader, FocusKeyManager } from '@angular/cdk/a11y';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { Subject, Subscription, of, merge, BehaviorSubject, fromEvent } from 'rxjs';
-import { mixinDisabled } from '@theseam/ui-common/core';
-import { UP_ARROW, DOWN_ARROW, ESCAPE, END, hasModifierKey, HOME } from '@angular/cdk/keycodes';
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { map, switchMap, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { TheSeamIconModule } from '@theseam/ui-common/icon';
-
-const menuDropdownPanelSlideIn = animation([
-    style({
-        opacity: 0,
-        transform: 'translateY(-70%)'
-    }),
-    group([
-        animate('170ms linear', style({ opacity: 1 })),
-        animate('220ms ease', style({ transform: 'translateY(0)' })),
-    ])
-]);
-const menuDropdownPanelSlideOut = animation([
-    style({
-        opacity: 1,
-        transform: 'translateY(0)'
-    }),
-    group([
-        animate('170ms linear', style({ opacity: 0 })),
-        animate('220ms ease', style({ transform: 'translateY(-70%)' })),
-    ])
-]);
-const menuDropdownPanelExpandIn = animation([
-    style({
-        opacity: 0,
-        transform: 'scale(0.8)'
-    }),
-    group([
-        animate('100ms linear', style({ opacity: 1 })),
-        animate('120ms ease', style({ transform: 'scale(1)' })),
-    ])
-]);
-const menuDropdownPanelExpandOut = animation([
-    style({
-        opacity: 1,
-        transform: 'scale(1)'
-    }),
-    group([
-        animate('100ms linear', style({ opacity: 0 })),
-        animate('120ms ease', style({ transform: 'scale(0.8)' })),
-    ])
-]);
-const menuDropdownPanelFadeIn = animation([
-    style({ transform: 'translateY(-30px)', opacity: '0' }),
-    animate('250ms', style({ transform: 'translateY(0)', opacity: '1' }))
-]);
-const menuDropdownPanelFadeOut = animation([
-    style({ transform: 'translateY(0)', opacity: '1' }),
-    animate('250ms', style({ transform: 'translateY(-30px)', opacity: '0' }))
-]);
-const menuDropdownPanelIn = animation([
-    query('.seam-menu-container.seam-menu-anim--slide .dropdown-menu', useAnimation(menuDropdownPanelSlideIn), { optional: true }),
-    query('.seam-menu-container.seam-menu-anim--fade .dropdown-menu', useAnimation(menuDropdownPanelFadeIn), { optional: true })
-]);
-const menuDropdownPanelOut = animation([
-    query('.seam-menu-container.seam-menu-anim--slide .dropdown-menu', useAnimation(menuDropdownPanelSlideOut), { optional: true }),
-    query('.seam-menu-container.seam-menu-anim--fade .dropdown-menu', useAnimation(menuDropdownPanelFadeOut), { optional: true })
-]);
-
-class MenuDividerComponent {
-}
-MenuDividerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-menu-divider',
-                template: ``,
-                // tslint:disable-next-line:use-host-property-decorator
-                host: {
-                    'class': 'dropdown-divider d-block'
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-
-/**
- * Injection token used to provide the parent menu to menu-specific components.
- */
-const THESEAM_MENU_PANEL = new InjectionToken('THESEAM_MENU_PANEL');
-
-class TheSeamMenuItemBase {
-}
-const _seamMenuItemMixinBase = mixinDisabled(TheSeamMenuItemBase);
-class MenuItemComponent extends _seamMenuItemMixinBase {
-    constructor(_elementRef, document, _focusMonitor, _parentMenu) {
-        super();
-        this._elementRef = _elementRef;
-        this.document = document;
-        this._focusMonitor = _focusMonitor;
-        this._parentMenu = _parentMenu;
-        /** ARIA role for the menu item. */
-        this.role = 'menuitem';
-        this.badgeTheme = 'danger';
-        /** Stream that emits when the menu item is hovered. */
-        this._hovered = new Subject();
-        /** Whether the menu item is highlighted. */
-        this._highlighted = false;
-        if (_focusMonitor) {
-            // Start monitoring the element so it gets the appropriate focused classes. We want
-            // to show the focus style for menu items only when the focus was not caused by a
-            // mouse or touch interaction.
-            _focusMonitor.monitor(this._elementRef, false);
-        }
-        // console.log(this._parentMenu)
-        if (_parentMenu && _parentMenu.addItem) {
-            _parentMenu.addItem(this);
-        }
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        if (this._focusMonitor) {
-            this._focusMonitor.stopMonitoring(this._elementRef);
-        }
-        if (this._parentMenu && this._parentMenu.removeItem) {
-            this._parentMenu.removeItem(this);
-        }
-        this._hovered.complete();
-    }
-    /** Focuses the menu item. */
-    focus(origin = 'program') {
-        if (this._focusMonitor) {
-            this._focusMonitor.focusVia(this._getHostElement(), origin);
-        }
-        else {
-            this._getHostElement().focus();
-        }
-    }
-    /** Used to set the `tabindex`. */
-    _getTabIndex() {
-        return this.disabled ? '-1' : '0';
-    }
-    /** Returns the host DOM element. */
-    _getHostElement() {
-        return this._elementRef.nativeElement;
-    }
-    /** Prevents the default element actions if it is disabled. */
-    _checkDisabled(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    /** Emits to the hover stream. */
-    _handleMouseEnter() {
-        this._hovered.next(this);
-    }
-    /** Gets the label to be used when determining whether the option should be focused. */
-    getLabel() {
-        const element = this._elementRef.nativeElement;
-        const textNodeType = this.document ? this.document.TEXT_NODE : 3;
-        let output = '';
-        if (element.childNodes) {
-            const length = element.childNodes.length;
-            // Go through all the top-level text nodes and extract their text.
-            // We skip anything that's not a text node to prevent the text from
-            // being thrown off by something like an icon.
-            for (let i = 0; i < length; i++) {
-                if (element.childNodes[i].nodeType === textNodeType) {
-                    output += element.childNodes[i].textContent;
-                }
-            }
-        }
-        return output.trim();
-    }
-}
-MenuItemComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line:component-selector
-                selector: '[seamMenuItem]',
-                template: "<div class=\"d-flex flex-row\">\n  <seam-icon *ngIf=\"icon\"\n    style=\"width: 30px; height: 20px; flex: 0 0 auto;\"\n    class=\"pr-2\"\n    [icon]=\"icon\"\n    [iconClass]=\"iconClass\"\n    iconType=\"image-fill\">\n  </seam-icon>\n  <!-- <span class=\"text-nowrap\">\n    <ng-content></ng-content>\n  </span> -->\n  <div class=\"text-truncate\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"badgeText\">\n    <span class=\"badge badge-pill{{ badgeTheme ? ' badge-' + badgeTheme : '' }} position-relative\"\n      style=\"top: -8px\"\n      >{{ badgeText }}</span>\n  </div>\n</div>\n",
-                exportAs: 'seamMenuItem',
-                // tslint:disable-next-line:use-input-property-decorator
-                inputs: ['disabled'],
-                // tslint:disable-next-line:use-host-property-decorator
-                host: {
-                    '[attr.role]': 'role',
-                    'class': 'dropdown-item',
-                    '[attr.tabindex]': '_getTabIndex()',
-                    '[attr.aria-disabled]': 'disabled.toString()',
-                    '[attr.disabled]': 'disabled || null',
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-MenuItemComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: FocusMonitor },
-    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_MENU_PANEL,] }, { type: Optional }] }
-];
-MenuItemComponent.propDecorators = {
-    role: [{ type: Input }],
-    icon: [{ type: Input }],
-    iconClass: [{ type: Input }],
-    badgeText: [{ type: Input }],
-    badgeTheme: [{ type: Input }],
-    _checkDisabled: [{ type: HostListener, args: ['click', ['$event'],] }],
-    _handleMouseEnter: [{ type: HostListener, args: ['mouseenter',] }]
-};
-
-/** Options for binding a passive event listener. */
-const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
-class MenuToggleDirective {
-    // @HostListener('document:mousedown', [ '$event' ])
-    // _onDocumentMouseDown(event: any) {
-    //   console.log('outside click')
-    // }
-    constructor(_elementRef, _viewContainerRef, _overlay, _focusMonitor) {
-        this._elementRef = _elementRef;
-        this._viewContainerRef = _viewContainerRef;
-        this._overlay = _overlay;
-        this._focusMonitor = _focusMonitor;
-        this._active = false;
-        this._menuClosedSubscription = Subscription.EMPTY;
-        this._closingActionsSubscription = Subscription.EMPTY;
-        this.restoreFocus = true;
-        // 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._positions = [
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-            },
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-            },
-        ];
-        /**
-         * 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';
-        this._elementRef.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-    }
-    set positions(val) {
-        var _a;
-        this._positions = val;
-        if (this.menuOpen()) {
-            (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.updatePositionStrategy(this.getOverlayPosition(this._elementRef.nativeElement));
-        }
-    }
-    get positions() { return this._positions; }
-    _onMouseDown(event) {
-        if (!isFakeMousedownFromScreenReader(event)) {
-            // 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()) {
-            //   event.preventDefault();
-            // }
-        }
-    }
-    _onKeydown(event) {
-        var _a;
-        this._openedBy = null;
-        // tslint:disable-next-line:deprecation
-        const keyCode = event.keyCode;
-        if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
-            if (this.menuOpen()) {
-                (_a = this.seamMenuToggle) === null || _a === void 0 ? void 0 : _a.focusFirstItem(this._openedBy || 'program');
-            }
-        }
-    }
-    _onClick(event) {
-        this.toggle();
-    }
-    _onDocumentKeydown(event) {
-        if (event.keyCode === ESCAPE) {
-            this.closeMenu();
-        }
-    }
-    ngOnDestroy() {
-        this.closeMenu();
-        this._elementRef.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        this._menuClosedSubscription.unsubscribe();
-        this._closingActionsSubscription.unsubscribe();
-    }
-    toggle() {
-        if (this._active) {
-            this.closeMenu();
-        }
-        else {
-            this.openMenu();
-        }
-    }
-    openMenu() {
-        if (this._active || !this.seamMenuToggle) {
-            return;
-        }
-        this._active = true;
-        this._overlayRef = this._overlay.create({
-            hasBackdrop: true,
-            backdropClass: 'transparent',
-            positionStrategy: this.getOverlayPosition(this._elementRef.nativeElement),
-        });
-        const tpl = this.seamMenuToggle.templateRef;
-        if (!tpl) {
-            throw Error(`Menu template not found.`);
-        }
-        this._overlayRef.attach(new TemplatePortal(tpl, this._viewContainerRef));
-        this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
-        this._initMenu();
-        this._menuClosedSubscription = this.seamMenuToggle.closed.subscribe(v => {
-            // console.log('closed', v)
-            this.closeMenu();
-        });
-        // this._overlayRef.backdropClick().subscribe(v => {
-        //   console.log('backdropClick', v)
-        // })
-    }
-    closeMenu() {
-        var _a, _b;
-        if (!this._active) {
-            return;
-        }
-        if ((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) {
-            (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
-        }
-        this._resetMenu();
-        this._elementRef.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions);
-        this._menuClosedSubscription.unsubscribe();
-        this._closingActionsSubscription.unsubscribe();
-        this._active = false;
-    }
-    menuOpen() {
-        var _a;
-        return (_a = (this._overlayRef && this._overlayRef.hasAttached())) !== null && _a !== void 0 ? _a : false;
-    }
-    getOverlayPosition(origin) {
-        const positionStrategy = this._overlay.position()
-            .flexibleConnectedTo(origin)
-            .withPositions(this.positions)
-            .withFlexibleDimensions(false)
-            .withPush(true);
-        return positionStrategy;
-    }
-    /**
-     * Focuses the menu trigger.
-     * @param origin Source of the menu trigger's focus.
-     */
-    focus(origin = 'program') {
-        if (this._focusMonitor) {
-            this._focusMonitor.focusVia(this._elementRef, origin);
-        }
-        else {
-            this._elementRef.nativeElement.focus();
-        }
-    }
-    /**
-     * This method sets the menu state to open and focuses the first item if
-     * the menu was opened via the keyboard.
-     */
-    _initMenu() {
-        // this.seamMenuToggle.parentMenu = this.triggersSubmenu() ? this._parentMenu : undefined
-        // this.seamMenuToggle.direction = this.dir
-        // this._setMenuElevation()
-        // this._setIsMenuOpen(true)
-        // this.seamMenuToggle.focusFirstItem(this._openedBy || 'program')
-    }
-    /**
-     * This method resets the menu when it's closed, most importantly restoring
-     * focus to the menu trigger if the menu was opened via the keyboard.
-     */
-    _resetMenu() {
-        // this._setIsMenuOpen(false)
-        // 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 on the backdrop.
-        if (this.restoreFocus) {
-            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;
-    }
-    /** Returns a stream that emits whenever an action that should close the menu occurs. */
-    _menuClosingActions() {
-        var _a, _b, _c, _d;
-        const backdrop = (_b = (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.backdropClick()) !== null && _b !== void 0 ? _b : of();
-        const detachments = (_d = (_c = this._overlayRef) === null || _c === void 0 ? void 0 : _c.detachments()) !== null && _d !== void 0 ? _d : of();
-        // const parentClose = this._parentMenu ? this._parentMenu.closed : of()
-        const parentClose = of();
-        // const hover = this._parentMenu ? this._parentMenu._hovered().pipe(
-        //   filter(active => active !== this._menuItemInstance),
-        //   filter(() => this._menuOpen)
-        // ) : of()
-        const hover = of();
-        return merge(backdrop, parentClose, hover, detachments);
-    }
-}
-MenuToggleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[seamMenuToggle]',
-                // tslint:disable-next-line:use-host-property-decorator
-                host: {
-                    'aria-haspopup': 'true',
-                    '[attr.aria-expanded]': 'menuOpen() || null'
-                },
-                exportAs: 'seamMenuToggle'
-            },] }
-];
-MenuToggleDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ViewContainerRef },
-    { type: Overlay },
-    { type: FocusMonitor }
-];
-MenuToggleDirective.propDecorators = {
-    seamMenuToggle: [{ type: Input }],
-    positions: [{ type: Input }],
-    _onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
-    _onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
-    _onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
-    _onDocumentKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
-};
-
-const LIB_MENU = {
-    provide: THESEAM_MENU_PANEL,
-    // tslint:disable-next-line:no-use-before-declare
-    useExisting: forwardRef(() => MenuComponent)
-};
-class MenuComponent {
-    constructor() {
-        this._ngUnsubscribe = new Subject();
-        this._footer = new BehaviorSubject(undefined);
-        this.hasFooter$ = this._footer.pipe(map(v => v !== null && v !== undefined));
-        this._header = new BehaviorSubject(undefined);
-        this.hasHeader$ = this._header.pipe(map(v => v !== null && v !== undefined));
-        /** Menu items inside the current menu. */
-        this._items = [];
-        /** Emits whenever the amount of menu items changes. */
-        this._itemChanges = new Subject();
-        /** Subscription to tab events on the menu panel */
-        this._tabSubscription = Subscription.EMPTY;
-        this.closed = new EventEmitter();
-        this._baseWidth = new BehaviorSubject(null);
-        this.animationType = 'slide';
-        this._menuWidth$ = this._baseWidth.pipe(switchMap(baseWidth => {
-            if (baseWidth) {
-                return fromEvent(window, 'resize').pipe(startWith(undefined), map(() => window.innerWidth < baseWidth ? `${window.innerWidth}px` : `${baseWidth}px`));
-            }
-            return of(undefined);
-        }), distinctUntilChanged(), takeUntil(this._ngUnsubscribe));
-    }
-    /**
-     * Defines a width for a menu that will scale down if the window innerWidth is
-     * smaller than the value.
-     */
-    get baseWidth() { return this._baseWidth.value; }
-    set baseWidth(value) {
-        const _val = coerceNumberProperty(value, null);
-        if (_val !== this._baseWidth.value) {
-            this._baseWidth.next(_val);
-        }
-    }
-    ngOnDestroy() {
-        this._tabSubscription.unsubscribe();
-        this.closed.complete();
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-    }
-    ngAfterContentInit() {
-        this._keyManager = new FocusKeyManager(this._items).withWrap().withTypeAhead();
-        this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
-    }
-    /** Stream that emits whenever the hovered menu item changes. */
-    _hovered() {
-        return this._itemChanges.pipe(startWith(this._items), switchMap(items => merge(...items.map(item => item._hovered))));
-    }
-    /** Handle a keyboard event from the menu, delegating to the appropriate action. */
-    _handleKeydown(event) {
-        // tslint:disable-next-line:deprecation
-        const keyCode = event.keyCode;
-        const manager = this._keyManager;
-        switch (keyCode) {
-            case ESCAPE:
-                if (!hasModifierKey(event)) {
-                    event.preventDefault();
-                    this.closed.emit('keydown');
-                }
-                break;
-            // case LEFT_ARROW:
-            //   if (this.parentMenu && this.direction === 'ltr') {
-            //     this.closed.emit('keydown')
-            //   }
-            //   break
-            // case RIGHT_ARROW:
-            //   if (this.parentMenu && this.direction === 'rtl') {
-            //     this.closed.emit('keydown')
-            //   }
-            //   break
-            case HOME:
-            case END:
-                if (!hasModifierKey(event)) {
-                    keyCode === HOME ? manager === null || manager === void 0 ? void 0 : manager.setFirstItemActive() : manager === null || manager === void 0 ? void 0 : manager.setLastItemActive();
-                    event.preventDefault();
-                }
-                break;
-            default:
-                if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
-                    manager === null || manager === void 0 ? void 0 : manager.setFocusOrigin('keyboard');
-                }
-                manager === null || manager === void 0 ? void 0 : manager.onKeydown(event);
-        }
-    }
-    /**
-     * Focus the first item in the menu.
-     * @param origin Action from which the focus originated. Used to set the correct styling.
-     */
-    focusFirstItem(origin = 'program') {
-        var _a;
-        (_a = this._keyManager) === null || _a === void 0 ? void 0 : _a.setFocusOrigin(origin).setFirstItemActive();
-    }
-    /**
-     * Resets the active item in the menu. This is used when the menu is opened, allowing
-     * the user to start from the first option when pressing the down arrow.
-     */
-    resetActiveItem() {
-        var _a;
-        (_a = this._keyManager) === null || _a === void 0 ? void 0 : _a.setActiveItem(-1);
-    }
-    /** Registers a menu item with the menu. */
-    addItem(item) {
-        // We register the items through this method, rather than picking them up through
-        // `ContentChildren`, because we need the items to be picked up by their closest
-        // `seam-menu` ancestor. If we used `@ContentChildren(MenuItemComponent, {descendants: true})`,
-        // all descendant items will bleed into the top-level menu in the case where the consumer
-        // has `seam-menu` instances nested inside each other.
-        if (this._items.indexOf(item) === -1) {
-            this._items.push(item);
-            this._itemChanges.next(this._items);
-        }
-    }
-    /** Removes an item from the menu. */
-    removeItem(item) {
-        const index = this._items.indexOf(item);
-        if (this._items.indexOf(item) > -1) {
-            this._items.splice(index, 1);
-            this._itemChanges.next(this._items);
-        }
-    }
-    /** Sets the footer component. */
-    setFooter(footer) {
-        this._footer.next(footer);
-    }
-    /** Sets the header component. */
-    setHeader(header) {
-        this._header.next(header);
-    }
-    _dropdownMenuClick(event) {
-        // This is needed, because some menu's will get stuck open if the component
-        // managing the menu is destroyed before the menu finishes its cleanup. I
-        // may look for a fix to that eventually.
-        this.closed.emit('click');
-    }
-}
-MenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-menu',
-                template: "<ng-template>\n  <div class=\"seam-menu-container\" @slideDown\n    [class.seam-menu-anim--slide]=\"animationType==='slide'\"\n    [class.seam-menu-anim--fade]=\"animationType==='fade'\">\n    <div class=\"dropdown-menu show position-static{{ menuClass ? ' ' + menuClass : '' }}\"\n      [style.width]=\"_menuWidth$ | async\"\n      [class.pt-0]=\"hasHeader$ | async\"\n      [class.pb-0]=\"hasFooter$ | async\"\n      (keydown)=\"_handleKeydown($event)\"\n      (click)=\"_dropdownMenuClick($event)\"\n      tabindex=\"-1\"\n      role=\"menu\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
-                providers: [LIB_MENU],
-                animations: [
-                    trigger('slideDown', [
-                        transition(':enter', useAnimation(menuDropdownPanelIn)),
-                        transition(':leave', useAnimation(menuDropdownPanelOut)),
-                    ])
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                exportAs: 'seamMenu',
-                styles: [".seam-menu-container.seam-menu-anim--slide{overflow:hidden}.seam-menu-container.ng-animating,.dropdown-menu.ng-animating{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}\n"]
-            },] }
-];
-MenuComponent.ctorParameters = () => [];
-MenuComponent.propDecorators = {
-    templateRef: [{ type: ViewChild, args: [TemplateRef,] }],
-    closed: [{ type: Output }],
-    menuClass: [{ type: Input }],
-    baseWidth: [{ type: Input }],
-    animationType: [{ type: Input }]
-};
-
-// TODO: Split up the button and anchor classes.
-class MenuFooterActionComponent {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-    get _attrType() { return this.type; }
-    /** ARIA type for the button. */
-    get type() { return this._isButton() ? this._type || 'button' : undefined; }
-    set type(value) {
-        this._type = value;
-    }
-    get _classBtn() { return this._isButton(); }
-    get _classBtnLink() { return this._isButton(); }
-    get _stylePadding() { return this._isButton() && 0; }
-    get _styleBorder() { return this._isButton() && 0; }
-    get _styleDisplay() { return this._isButton() && 'inline'; }
-    /** Determines if the component host is a button. */
-    _isButton() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'button';
-    }
-    /** Determines if the component host is an anchor. */
-    _isAnchor() {
-        return this._elementRef.nativeElement.nodeName.toLowerCase() === 'a';
-    }
-}
-MenuFooterActionComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line:component-selector
-                selector: 'button[seamMenuFooterAction],a[seamMenuFooterAction]',
-                template: "<ng-content></ng-content>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-MenuFooterActionComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-MenuFooterActionComponent.propDecorators = {
-    _attrType: [{ type: HostBinding, args: ['attr.type',] }],
-    type: [{ type: Input }],
-    _classBtn: [{ type: HostBinding, args: ['class.btn',] }],
-    _classBtnLink: [{ type: HostBinding, args: ['class.btn-link',] }],
-    _stylePadding: [{ type: HostBinding, args: ['style.padding.px',] }],
-    _styleBorder: [{ type: HostBinding, args: ['style.border.px',] }],
-    _styleDisplay: [{ type: HostBinding, args: ['style.display.px',] }]
-};
-
-class MenuFooterComponent {
-    constructor(_parentMenu) {
-        this._parentMenu = _parentMenu;
-    }
-    ngOnInit() {
-        if (this._parentMenu && this._parentMenu.setFooter) {
-            this._parentMenu.setFooter(this);
-        }
-    }
-    ngOnDestroy() {
-        if (this._parentMenu && this._parentMenu.setFooter) {
-            this._parentMenu.setFooter(undefined);
-        }
-    }
-}
-MenuFooterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-menu-footer',
-                template: "<ng-content select=\"a[seamMenuFooterAction],button[seamMenuFooterAction]\"></ng-content>\n",
-                host: {
-                    'class': 'd-flex flex-column text-center bg-light border-top rounded-bottom py-2'
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-MenuFooterComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_MENU_PANEL,] }, { type: Optional }] }
-];
-
-class MenuHeaderComponent {
-    constructor(_parentMenu) {
-        this._parentMenu = _parentMenu;
-    }
-    ngOnInit() {
-        if (this._parentMenu && this._parentMenu.setHeader) {
-            this._parentMenu.setHeader(this);
-        }
-    }
-    ngOnDestroy() {
-        if (this._parentMenu && this._parentMenu.setHeader) {
-            this._parentMenu.setHeader(undefined);
-        }
-    }
-}
-MenuHeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'seam-menu-header',
-                template: "<ng-content></ng-content>\n",
-                host: {
-                    'class': 'd-flex flex-column bg-light border-bottom rounded-top py-2 mb-2'
-                },
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-MenuHeaderComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [THESEAM_MENU_PANEL,] }, { type: Optional }] }
-];
-
-class TheSeamMenuModule {
-}
-TheSeamMenuModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    MenuComponent,
-                    MenuToggleDirective,
-                    MenuItemComponent,
-                    MenuDividerComponent,
-                    MenuFooterComponent,
-                    MenuFooterActionComponent,
-                    MenuHeaderComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    OverlayModule,
-                    TheSeamIconModule
-                ],
-                exports: [
-                    MenuComponent,
-                    MenuToggleDirective,
-                    MenuItemComponent,
-                    MenuDividerComponent,
-                    TheSeamIconModule,
-                    OverlayModule,
-                    MenuFooterComponent,
-                    MenuFooterActionComponent,
-                    MenuHeaderComponent
-                ]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { LIB_MENU, MenuComponent, MenuDividerComponent, MenuFooterActionComponent, MenuFooterComponent, MenuHeaderComponent, MenuItemComponent, MenuToggleDirective, THESEAM_MENU_PANEL, TheSeamMenuModule, menuDropdownPanelExpandIn, menuDropdownPanelExpandOut, menuDropdownPanelFadeIn, menuDropdownPanelFadeOut, menuDropdownPanelIn, menuDropdownPanelOut, menuDropdownPanelSlideIn, menuDropdownPanelSlideOut };
-//# sourceMappingURL=theseam-ui-common-menu.js.map