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

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

@@ -0,0 +1,806 @@
+import { animation, style, group, animate, query, useAnimation, trigger, transition } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, InjectionToken, Inject, Optional, Input, HostListener, Directive, forwardRef, EventEmitter, TemplateRef, ViewChild, Output, HostBinding, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { Subject, Subscription, of, merge, BehaviorSubject, fromEvent } from 'rxjs';
+import { mixinDisabled } from '@theseam/ui-common/core';
+import * as i1 from '@angular/cdk/a11y';
+import { isFakeMousedownFromScreenReader, FocusKeyManager } from '@angular/cdk/a11y';
+import * as i3 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import { UP_ARROW, DOWN_ARROW, ESCAPE, END, hasModifierKey, HOME } from '@angular/cdk/keycodes';
+import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { map, switchMap, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MenuDividerComponent, selector: "seam-menu-divider", host: { classAttribute: "dropdown-divider d-block" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-menu-divider', template: ``, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1.FocusMonitor }, { token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MenuItemComponent, selector: "[seamMenuItem]", inputs: { disabled: "disabled", role: "role", icon: "icon", iconClass: "iconClass", badgeText: "badgeText", badgeTheme: "badgeTheme" }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null" }, classAttribute: "dropdown-item" }, exportAs: ["seamMenuItem"], usesInheritance: true, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[seamMenuItem]', exportAs: 'seamMenuItem', inputs: ['disabled'], host: {
+                        '[attr.role]': 'role',
+                        'class': 'dropdown-item',
+                        '[attr.tabindex]': '_getTabIndex()',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.disabled]': 'disabled || null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [THESEAM_MENU_PANEL]
+                    }, {
+                        type: Optional
+                    }] }];
+    }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive });
+MenuToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: MenuToggleDirective, selector: "[seamMenuToggle]", inputs: { seamMenuToggle: "seamMenuToggle", positions: "positions" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "keydown": "_onKeydown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "menuOpen() || null" } }, exportAs: ["seamMenuToggle"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: 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'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i1.FocusMonitor }]; }, 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(undefined);
+        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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MenuComponent, selector: "seam-menu", inputs: { menuClass: "menuClass", baseWidth: "baseWidth", animationType: "animationType" }, outputs: { closed: "closed" }, providers: [LIB_MENU], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["seamMenu"], ngImport: i0, 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", 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"], dependencies: [{ kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+        trigger('slideDown', [
+            transition(':enter', useAnimation(menuDropdownPanelIn)),
+            transition(':leave', useAnimation(menuDropdownPanelOut)),
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-menu', providers: [LIB_MENU], animations: [
+                        trigger('slideDown', [
+                            transition(':enter', useAnimation(menuDropdownPanelIn)),
+                            transition(':leave', useAnimation(menuDropdownPanelOut)),
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamMenu', 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", 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"] }]
+        }], ctorParameters: function () { return []; }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuFooterActionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MenuFooterActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MenuFooterActionComponent, selector: "button[seamMenuFooterAction],a[seamMenuFooterAction]", inputs: { type: "type" }, host: { properties: { "attr.type": "this._attrType", "class.btn": "this._classBtn", "class.btn-link": "this._classBtnLink", "style.padding.px": "this._stylePadding", "style.border.px": "this._styleBorder", "style.display.px": "this._styleDisplay" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuFooterActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seamMenuFooterAction],a[seamMenuFooterAction]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuFooterComponent, deps: [{ token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MenuFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MenuFooterComponent, selector: "seam-menu-footer", host: { classAttribute: "d-flex flex-column text-center bg-light border-top rounded-bottom py-2" }, ngImport: i0, template: "<ng-content select=\"a[seamMenuFooterAction],button[seamMenuFooterAction]\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-menu-footer', host: {
+                        'class': 'd-flex flex-column text-center bg-light border-top rounded-bottom py-2'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"a[seamMenuFooterAction],button[seamMenuFooterAction]\"></ng-content>\n" }]
+        }], ctorParameters: function () {
+        return [{ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuHeaderComponent, deps: [{ token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MenuHeaderComponent, selector: "seam-menu-header", host: { classAttribute: "d-flex flex-column bg-light border-bottom rounded-top py-2 mb-2" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MenuHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-menu-header', host: {
+                        'class': 'd-flex flex-column bg-light border-bottom rounded-top py-2 mb-2'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [THESEAM_MENU_PANEL]
+                    }, {
+                        type: Optional
+                    }] }];
+    } });
+
+class TheSeamMenuModule {
+}
+TheSeamMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheSeamMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: TheSeamMenuModule, declarations: [MenuComponent,
+        MenuToggleDirective,
+        MenuItemComponent,
+        MenuDividerComponent,
+        MenuFooterComponent,
+        MenuFooterActionComponent,
+        MenuHeaderComponent], imports: [CommonModule,
+        OverlayModule,
+        TheSeamIconModule], exports: [MenuComponent,
+        MenuToggleDirective,
+        MenuItemComponent,
+        MenuDividerComponent,
+        TheSeamIconModule,
+        OverlayModule,
+        MenuFooterComponent,
+        MenuFooterActionComponent,
+        MenuHeaderComponent] });
+TheSeamMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: TheSeamMenuModule, imports: [CommonModule,
+        OverlayModule,
+        TheSeamIconModule, TheSeamIconModule,
+        OverlayModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: 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.mjs.map