@theseam/ui-common 0.4.11 → 0.4.12-beta.1

package/fesm2020/theseam-ui-common-layout.mjs

@@ -3,7 +3,8 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable } from '@angular/core';
 import * as i1 from '@angular/flex-layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { map, startWith, distinctUntilChanged, shareReplay } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { map, startWith, distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
 
 // TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap
 // breakpoints work the same.
@@ -79,11 +80,19 @@ function observeMediaQuery(mediaObserver, alias) {
 class TheSeamLayoutService {
     constructor(_media) {
         this._media = _media;
-        this.isMobile$ = this.observe('lt-sm');
+        this._mobileBreakpoint = new BehaviorSubject('lt-sm');
+        this.mobileBreakpoint$ = this._mobileBreakpoint.asObservable();
+        this.isMobile$ = this.mobileBreakpoint$.pipe(switchMap(breakpoint => this.observe(breakpoint)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     observe(alias) {
         return observeMediaQuery(this._media, alias);
     }
+    /**
+     * Update breakpoint observed by isMobile$
+     */
+    setMobileBreakpoint(alias) {
+        this._mobileBreakpoint.next(alias);
+    }
 }
 TheSeamLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamLayoutService, deps: [{ token: i1.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable });
 TheSeamLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamLayoutService, providedIn: 'root' });

package/fesm2020/theseam-ui-common-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theseam-ui-common-layout.mjs","sources":["../../../projects/ui-common/layout/breakpoint-aliases.ts","../../../projects/ui-common/layout/layout.module.ts","../../../projects/ui-common/layout/observe-media-query.ts","../../../projects/ui-common/layout/layout.service.ts","../../../projects/ui-common/layout/theseam-ui-common-layout.ts"],"sourcesContent":["// TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap\n// breakpoints work the same.\n//\n// I like the more spread-out ranges in '@angular/flex-layout', but since our\n// styles are mostly based on bootstrap it may be worth it to drop down closer\n// to the bootstrap breakpoints.\n//\n// Another option is to create new aliases to blend a mix between them, if it\n// doesn't add to much complexity.\n\n/**\n * | breakpoint | mediaQuery                                              |\n * |------------|---------------------------------------------------------|\n * | xs         | 'screen and (max-width: 599px)'                         |\n * | sm         | 'screen and (min-width: 600px) and (max-width: 959px)'  |\n * | md         | 'screen and (min-width: 960px) and (max-width: 1279px)' |\n * | lg         | 'screen and (min-width: 1280px) and (max-width: 1919px)'|\n * | xl         | 'screen and (min-width: 1920px) and (max-width: 5000px)'|\n * |            |                                                         |\n * | lt-sm      | 'screen and (max-width: 599px)'                         |\n * | lt-md      | 'screen and (max-width: 959px)'                         |\n * | lt-lg      | 'screen and (max-width: 1279px)'                        |\n * | lt-xl      | 'screen and (max-width: 1919px)'                        |\n * |            |                                                         |\n * | gt-xs      | 'screen and (min-width: 600px)'                         |\n * | gt-sm      | 'screen and (min-width: 960px)'                         |\n * | gt-md      | 'screen and (min-width: 1280px)'                        |\n * | gt-lg      | 'screen and (min-width: 1920px)'                        |\n */\nexport type MediaQueryAliases =\n  // Breakpoint      MediaQuery\n    'xs' //         'screen and (max-width: 599px)'\n  | 'sm' //         'screen and (min-width: 600px) and (max-width: 959px)'\n  | 'md' //         'screen and (min-width: 960px) and (max-width: 1279px)'\n  | 'lg' //         'screen and (min-width: 1280px) and (max-width: 1919px)'\n  | 'xl' //         'screen and (min-width: 1920px) and (max-width: 5000px)'\n  | 'lt-sm' //      'screen and (max-width: 599px)'\n  | 'lt-md' //      'screen and (max-width: 959px)'\n  | 'lt-lg' //      'screen and (max-width: 1279px)'\n  | 'lt-xl' //      'screen and (max-width: 1919px)'\n  | 'gt-xs' //      'screen and (min-width: 600px)'\n  | 'gt-sm' //      'screen and (min-width: 960px)'\n  | 'gt-md' //      'screen and (min-width: 1280px)'\n  | 'gt-lg' //      'screen and (min-width: 1920px)'\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FlexLayoutModule } from '@angular/flex-layout'\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    FlexLayoutModule\n  ],\n  exports: [\n    FlexLayoutModule\n  ]\n})\nexport class TheSeamLayoutModule { }\n","import { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\nimport { distinctUntilChanged, map, shareReplay, startWith, tap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\n\nconst mediaQueriesMap: { [breakpoint: string]: string } = {\n  'xs': 'screen and (max-width: 599px)',\n  'sm': 'screen and (min-width: 600px) and (max-width: 959px)',\n  'md': 'screen and (min-width: 960px) and (max-width: 1279px)',\n  'lg': 'screen and (min-width: 1280px) and (max-width: 1919px)',\n  'xl': 'screen and (min-width: 1920px) and (max-width: 5000px)',\n  'lt-sm': 'screen and (max-width: 599px)',\n  'lt-md': 'screen and (max-width: 959px)',\n  'lt-lg': 'screen and (max-width: 1279px)',\n  'lt-xl': 'screen and (max-width: 1919px)',\n  'gt-xs': 'screen and (min-width: 600px)',\n  'gt-sm': 'screen and (min-width: 960px)',\n  'gt-md': 'screen and (min-width: 1280px)',\n  'gt-lg': 'screen and (min-width: 1920px)'\n}\n\n/**\n * TODO: Find out if the MediaObserver can return an immediate result on load\n * accurately like the native matchMedia. If not switch to another that can or\n * just implement it myself. I would rather use a well tested library for\n * something like that, since it could have a lot of affect on performance.\n */\nfunction isMediaQueryActive(query: string, fallback: MediaObserver) {\n  if (window && window.matchMedia) {\n    const x = window.matchMedia(mediaQueriesMap[query])\n    return x.matches\n  }\n  return fallback.isActive(query)\n}\n\n/**\n * Observable helper for observing a single breakpoint alias with\n * `@angular/flex-layout` MediaObserver.\n */\nexport function observeMediaQuery(\n  mediaObserver: MediaObserver,\n  alias: MediaQueryAliases\n): Observable<boolean> {\n  // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))\n  return mediaObserver.asObservable()\n    .pipe(\n      map(_ => mediaObserver.isActive(alias)),\n      // startWith(mediaObserver.isActive(alias)),\n      startWith(isMediaQueryActive(alias, mediaObserver)),\n      distinctUntilChanged(),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    )\n}\n","import { inject, Injectable, InjectionToken } from '@angular/core'\nimport { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\nimport { observeMediaQuery } from './observe-media-query'\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TheSeamLayoutService {\n\n  /**\n   * Is app a mobile-like size.\n   */\n  public isMobile$: Observable<boolean>\n\n  constructor(\n    private _media: MediaObserver\n  ) {\n    this.isMobile$ = this.observe('lt-sm')\n  }\n\n  public observe(alias: MediaQueryAliases): Observable<boolean> {\n    return observeMediaQuery(this._media, alias)\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"theseam-ui-common-layout.mjs","sources":["../../../projects/ui-common/layout/breakpoint-aliases.ts","../../../projects/ui-common/layout/layout.module.ts","../../../projects/ui-common/layout/observe-media-query.ts","../../../projects/ui-common/layout/layout.service.ts","../../../projects/ui-common/layout/theseam-ui-common-layout.ts"],"sourcesContent":["// TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap\n// breakpoints work the same.\n//\n// I like the more spread-out ranges in '@angular/flex-layout', but since our\n// styles are mostly based on bootstrap it may be worth it to drop down closer\n// to the bootstrap breakpoints.\n//\n// Another option is to create new aliases to blend a mix between them, if it\n// doesn't add to much complexity.\n\n/**\n * | breakpoint | mediaQuery                                              |\n * |------------|---------------------------------------------------------|\n * | xs         | 'screen and (max-width: 599px)'                         |\n * | sm         | 'screen and (min-width: 600px) and (max-width: 959px)'  |\n * | md         | 'screen and (min-width: 960px) and (max-width: 1279px)' |\n * | lg         | 'screen and (min-width: 1280px) and (max-width: 1919px)'|\n * | xl         | 'screen and (min-width: 1920px) and (max-width: 5000px)'|\n * |            |                                                         |\n * | lt-sm      | 'screen and (max-width: 599px)'                         |\n * | lt-md      | 'screen and (max-width: 959px)'                         |\n * | lt-lg      | 'screen and (max-width: 1279px)'                        |\n * | lt-xl      | 'screen and (max-width: 1919px)'                        |\n * |            |                                                         |\n * | gt-xs      | 'screen and (min-width: 600px)'                         |\n * | gt-sm      | 'screen and (min-width: 960px)'                         |\n * | gt-md      | 'screen and (min-width: 1280px)'                        |\n * | gt-lg      | 'screen and (min-width: 1920px)'                        |\n */\nexport type MediaQueryAliases =\n  // Breakpoint      MediaQuery\n    'xs' //         'screen and (max-width: 599px)'\n  | 'sm' //         'screen and (min-width: 600px) and (max-width: 959px)'\n  | 'md' //         'screen and (min-width: 960px) and (max-width: 1279px)'\n  | 'lg' //         'screen and (min-width: 1280px) and (max-width: 1919px)'\n  | 'xl' //         'screen and (min-width: 1920px) and (max-width: 5000px)'\n  | 'lt-sm' //      'screen and (max-width: 599px)'\n  | 'lt-md' //      'screen and (max-width: 959px)'\n  | 'lt-lg' //      'screen and (max-width: 1279px)'\n  | 'lt-xl' //      'screen and (max-width: 1919px)'\n  | 'gt-xs' //      'screen and (min-width: 600px)'\n  | 'gt-sm' //      'screen and (min-width: 960px)'\n  | 'gt-md' //      'screen and (min-width: 1280px)'\n  | 'gt-lg' //      'screen and (min-width: 1920px)'\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FlexLayoutModule } from '@angular/flex-layout'\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    FlexLayoutModule\n  ],\n  exports: [\n    FlexLayoutModule\n  ]\n})\nexport class TheSeamLayoutModule { }\n","import { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\nimport { distinctUntilChanged, map, shareReplay, startWith, tap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\n\nconst mediaQueriesMap: { [breakpoint: string]: string } = {\n  'xs': 'screen and (max-width: 599px)',\n  'sm': 'screen and (min-width: 600px) and (max-width: 959px)',\n  'md': 'screen and (min-width: 960px) and (max-width: 1279px)',\n  'lg': 'screen and (min-width: 1280px) and (max-width: 1919px)',\n  'xl': 'screen and (min-width: 1920px) and (max-width: 5000px)',\n  'lt-sm': 'screen and (max-width: 599px)',\n  'lt-md': 'screen and (max-width: 959px)',\n  'lt-lg': 'screen and (max-width: 1279px)',\n  'lt-xl': 'screen and (max-width: 1919px)',\n  'gt-xs': 'screen and (min-width: 600px)',\n  'gt-sm': 'screen and (min-width: 960px)',\n  'gt-md': 'screen and (min-width: 1280px)',\n  'gt-lg': 'screen and (min-width: 1920px)'\n}\n\n/**\n * TODO: Find out if the MediaObserver can return an immediate result on load\n * accurately like the native matchMedia. If not switch to another that can or\n * just implement it myself. I would rather use a well tested library for\n * something like that, since it could have a lot of affect on performance.\n */\nfunction isMediaQueryActive(query: string, fallback: MediaObserver) {\n  if (window && window.matchMedia) {\n    const x = window.matchMedia(mediaQueriesMap[query])\n    return x.matches\n  }\n  return fallback.isActive(query)\n}\n\n/**\n * Observable helper for observing a single breakpoint alias with\n * `@angular/flex-layout` MediaObserver.\n */\nexport function observeMediaQuery(\n  mediaObserver: MediaObserver,\n  alias: MediaQueryAliases\n): Observable<boolean> {\n  // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))\n  return mediaObserver.asObservable()\n    .pipe(\n      map(_ => mediaObserver.isActive(alias)),\n      // startWith(mediaObserver.isActive(alias)),\n      startWith(isMediaQueryActive(alias, mediaObserver)),\n      distinctUntilChanged(),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    )\n}\n","import { Injectable } from '@angular/core'\nimport { MediaObserver } from '@angular/flex-layout'\nimport { BehaviorSubject, Observable } from 'rxjs'\nimport { shareReplay, switchMap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\nimport { observeMediaQuery } from './observe-media-query'\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TheSeamLayoutService {\n\n  /**\n   * Observes if app is a mobile-like size.\n   * Default mobile breakpoint is <= 599px,\n   * use setMobileBreakpoint() to change size.\n   */\n  public isMobile$: Observable<boolean>\n\n  private _mobileBreakpoint = new BehaviorSubject<MediaQueryAliases>('lt-sm')\n  public mobileBreakpoint$ = this._mobileBreakpoint.asObservable()\n\n  constructor(\n    private _media: MediaObserver\n  ) {\n    this.isMobile$ = this.mobileBreakpoint$.pipe(\n      switchMap(breakpoint => this.observe(breakpoint)),\n      shareReplay({ bufferSize: 1, refCount: true })\n    )\n  }\n\n  public observe(alias: MediaQueryAliases): Observable<boolean> {\n    return observeMediaQuery(this._media, alias)\n  }\n\n  /**\n   * Update breakpoint observed by isMobile$\n   */\n  public setMobileBreakpoint(alias: MediaQueryAliases) {\n    this._mobileBreakpoint.next(alias)\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,6 @@
+import { ContentContainerComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+import { waitOnConditionAsync } from '@theseam/ui-common/utils';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 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, forwardRef, EventEmitter, TemplateRef, ViewChild, Output, inject, ChangeDetectorRef, Directive, Self, HostBinding, NgModule } from '@angular/core';
@@ -14,12 +17,282 @@ import { __decorate } from 'tslib';
 import { UP_ARROW, DOWN_ARROW, END, hasModifierKey, HOME, RIGHT_ARROW, LEFT_ARROW, ESCAPE, ENTER, SPACE } from '@angular/cdk/keycodes';
 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 * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i4 from '@angular/cdk/bidi';
 
+/**
+ * Workaround to wait on the animation to finish in browser, until a generic
+ * broswer-based solution is added, for Storybook interactions.
+ */
+async function animatingWait() {
+    const selectAnimating = () => document.querySelectorAll('.seam-menu-container .ng-animating');
+    if (selectAnimating().length === 0) {
+        return;
+    }
+    await waitOnConditionAsync(() => selectAnimating().length === 0, 1000);
+}
+
+class TheSeamMenuFooterHarness extends ContentContainerComponentHarness {
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
+     * @param options Options for filtering which menu item instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    }
+    /** Gets the text of the menu item. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /** Clicks the menu item. */
+    async click() {
+        return (await this.host()).click().then(() => animatingWait());
+    }
+    /** Hovers the menu item. */
+    async hover() {
+        return (await this.host()).hover().then(() => animatingWait());
+    }
+}
+/** The selector for the host element of a `MenuFooterComponent` instance. */
+TheSeamMenuFooterHarness.hostSelector = 'seam-menu-footer';
+
+class TheSeamMenuHeaderHarness extends ContentContainerComponentHarness {
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
+     * @param options Options for filtering which menu item instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options);
+    }
+    /** Clicks the menu item. */
+    async click() {
+        return (await this.host()).click().then(() => animatingWait());
+    }
+    /** Hovers the menu item. */
+    async hover() {
+        return (await this.host()).hover().then(() => animatingWait());
+    }
+}
+/** The selector for the host element of a `MenuHeaderComponent` instance. */
+TheSeamMenuHeaderHarness.hostSelector = 'seam-menu-header';
+
+class TheSeamMenuHarness extends ContentContainerComponentHarness {
+    constructor() {
+        super(...arguments);
+        this._documentRootLocator = this.documentRootLocatorFactory();
+    }
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
+     * @param options Options for filtering which menu instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options).addOption('triggerText', options.triggerText, (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
+    }
+    /** Whether the menu is disabled. */
+    async isDisabled() {
+        const disabled = (await this.host()).getAttribute('disabled');
+        return coerceBooleanProperty(await disabled);
+    }
+    /** Whether the menu is open. */
+    async isOpen() {
+        return !!(await this._getMenuPanel());
+    }
+    /** Gets the text of the menu's trigger element. */
+    async getTriggerText() {
+        return (await this.host()).text();
+    }
+    /** Focuses the menu. */
+    async focus() {
+        return (await this.host()).focus().then(() => animatingWait());
+    }
+    /** Blurs the menu. */
+    async blur() {
+        return (await this.host()).blur().then(() => animatingWait());
+    }
+    /** Whether the menu is focused. */
+    async isFocused() {
+        return (await this.host()).isFocused();
+    }
+    /** Opens the menu. */
+    async open() {
+        if (!(await this.isOpen())) {
+            return (await this.host()).click().then(() => animatingWait());
+        }
+    }
+    /** Closes the menu. */
+    async close() {
+        const panel = await this._getMenuPanel();
+        if (panel) {
+            return panel.sendKeys(TestKey.ESCAPE).then(() => animatingWait());
+        }
+    }
+    /**
+     * Gets a list of `TheSeamMenuItemHarness` representing the items in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    async getItems(filters) {
+        const panelId = await this._getPanelId();
+        if (panelId) {
+            return this._documentRootLocator.locatorForAll(TheSeamMenuItemHarness.with({
+                ...(filters || {}),
+                ancestor: `#${panelId}`,
+            }))();
+        }
+        return [];
+    }
+    /**
+     * Clicks an item in the menu, and optionally continues clicking items in subsequent sub-menus.
+     * @param itemFilter A filter used to represent which item in the menu should be clicked. The
+     *     first matching menu item will be clicked.
+     * @param subItemFilters A list of filters representing the items to click in any subsequent
+     *     sub-menus. The first item in the sub-menu matching the corresponding filter in
+     *     `subItemFilters` will be clicked.
+     */
+    async clickItem(itemFilter, ...subItemFilters) {
+        await this.open();
+        const items = await this.getItems(itemFilter);
+        if (!items.length) {
+            throw Error(`Could not find item matching ${JSON.stringify(itemFilter)}`);
+        }
+        if (!subItemFilters.length) {
+            return items[0].click();
+        }
+        const menu = await items[0].getSubmenu();
+        if (!menu) {
+            throw Error(`Item matching ${JSON.stringify(itemFilter)} does not have a submenu`);
+        }
+        return menu.clickItem(...subItemFilters);
+    }
+    /**
+     * Hovers an item in the menu, and optionally continues hovering items in subsequent sub-menus.
+     * @param itemFilter A filter used to represent which item in the menu should be hovered. The
+     *     first matching menu item will be hovered.
+     * @param subItemFilters A list of filters representing the items to hover in any subsequent
+     *     sub-menus. The first item in the sub-menu matching the corresponding filter in
+     *     `subItemFilters` will be hovered.
+     */
+    async hoverItem(itemFilter, ...subItemFilters) {
+        await this.open();
+        const items = await this.getItems(itemFilter);
+        if (!items.length) {
+            throw Error(`Could not find item matching ${JSON.stringify(itemFilter)}`);
+        }
+        if (!subItemFilters.length) {
+            return items[0].hover();
+        }
+        const menu = await items[0].getSubmenu();
+        if (!menu) {
+            throw Error(`Item matching ${JSON.stringify(itemFilter)} does not have a submenu`);
+        }
+        return menu.hoverItem(...subItemFilters);
+    }
+    /**
+     * Gets a `TheSeamMenuHeaderHarness` representing the header in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    async getHeader(filters) {
+        const panelId = await this._getPanelId();
+        if (panelId) {
+            return this._documentRootLocator.locatorForOptional(TheSeamMenuHeaderHarness.with({
+                ...(filters || {}),
+                ancestor: `#${panelId}`,
+            }))();
+        }
+        return null;
+    }
+    /**
+     * Gets a `TheSeamMenuFooterHarness` representing the footer in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    async getFooter(filters) {
+        const panelId = await this._getPanelId();
+        if (panelId) {
+            return this._documentRootLocator.locatorForOptional(TheSeamMenuFooterHarness.with({
+                ...(filters || {}),
+                ancestor: `#${panelId}`,
+            }))();
+        }
+        return null;
+    }
+    async getRootHarnessLoader() {
+        const panelId = await this._getPanelId();
+        return this.documentRootLocatorFactory().harnessLoaderFor(`#${panelId}`);
+    }
+    /** Gets the menu panel associated with this menu. */
+    async _getMenuPanel() {
+        const panelId = await this._getPanelId();
+        return panelId ? this._documentRootLocator.locatorForOptional(`#${panelId}`)() : null;
+    }
+    /** Gets the id of the menu panel associated with this menu. */
+    async _getPanelId() {
+        const panelId = await (await this.host()).getAttribute('aria-controls');
+        return panelId || null;
+    }
+}
+/** The selector for the host element of a `MenuComponent` instance. */
+TheSeamMenuHarness.hostSelector = '.seam-menu-toggle';
+
+class TheSeamMenuItemHarness extends ContentContainerComponentHarness {
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
+     * @param options Options for filtering which menu item instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('hasSubmenu', options.hasSubmenu, async (harness, hasSubmenu) => (await harness.hasSubmenu()) === hasSubmenu);
+    }
+    /** Whether the menu is disabled. */
+    async isDisabled() {
+        const disabled = (await this.host()).getAttribute('disabled');
+        return coerceBooleanProperty(await disabled);
+    }
+    /** Gets the text of the menu item. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /** Focuses the menu item. */
+    async focus() {
+        return (await this.host()).focus().then(() => animatingWait());
+    }
+    /** Blurs the menu item. */
+    async blur() {
+        return (await this.host()).blur().then(() => animatingWait());
+    }
+    /** Whether the menu item is focused. */
+    async isFocused() {
+        return (await this.host()).isFocused();
+    }
+    /** Clicks the menu item. */
+    async click() {
+        return (await this.host()).click().then(() => animatingWait());
+    }
+    /** Hovers the menu item. */
+    async hover() {
+        return (await this.host()).hover().then(() => animatingWait());
+    }
+    /** Whether this item has a submenu. */
+    async hasSubmenu() {
+        return (await this.host()).matchesSelector(TheSeamMenuHarness.hostSelector);
+    }
+    /** Gets the submenu associated with this menu item, or null if none. */
+    async getSubmenu() {
+        if (await this.hasSubmenu()) {
+            return new TheSeamMenuHarness(this.locatorFactory);
+        }
+        return null;
+    }
+}
+/** The selector for the host element of a `MenuItemComponent` instance. */
+TheSeamMenuItemHarness.hostSelector = '.seam-menu-item';
+
 const menuDropdownPanelSlideIn = animation([
     style({
         opacity: 0,
@@ -199,7 +472,7 @@ class MenuItemComponent extends _seamMenuItemMixinBase {
     }
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: MenuItemComponent, selector: "[seamMenuItem]", inputs: { disabled: "disabled", role: "role", icon: "icon", iconClass: "iconClass", sublevelIcon: "sublevelIcon", subLevelIconClass: "subLevelIconClass", badgeText: "badgeText", badgeTheme: "badgeTheme" }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.seam-menu-item-highlighted": "_highlighted", "class.seam-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null" }, classAttribute: "seam-menu-item 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  <div class=\"flex-fill\">\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  <seam-icon *ngIf=\"_triggersSubmenu\"\n    style=\"width: 30px; height: 20px; flex: 0 0 auto;\"\n    class=\"pl-2\"\n    [icon]=\"sublevelIcon\"\n    [iconClass]=\"subLevelIconClass\"\n    iconType=\"image-fill\">\n  </seam-icon>\n</div>\n", styles: [":host.cdk-mouse-focused:not(:hover){background:transparent}:host[aria-expanded]{color:#16181b;text-decoration:none;background-color:#e9ecef}\n"], 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 });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: MenuItemComponent, selector: "[seamMenuItem]", inputs: { disabled: "disabled", role: "role", icon: "icon", iconClass: "iconClass", sublevelIcon: "sublevelIcon", subLevelIconClass: "subLevelIconClass", badgeText: "badgeText", badgeTheme: "badgeTheme" }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.seam-menu-item-highlighted": "_highlighted", "class.seam-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null" }, classAttribute: "seam-menu-item 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\n  <div class=\"text-truncate\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"badgeText\" class=\"ml-2\">\n    <span class=\"badge badge-pill{{ badgeTheme ? ' badge-' + badgeTheme : '' }} position-relative\"\n      style=\"top: -2px\"\n      >{{ badgeText }}</span>\n  </div>\n\n  <div class=\"d-flex flex-grow-1 justify-content-end\">\n    <seam-icon *ngIf=\"_triggersSubmenu\"\n      style=\"width: 30px; height: 20px; flex: 0 0 auto;\"\n      class=\"pl-2\"\n      [icon]=\"sublevelIcon\"\n      [iconClass]=\"subLevelIconClass\"\n      iconType=\"image-fill\">\n    </seam-icon>\n  </div>\n</div>\n", styles: [":host.cdk-mouse-focused:not(:hover){background:transparent}:host[aria-expanded]{color:#16181b;text-decoration:none;background-color:#e9ecef}\n"], 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.7", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: '[seamMenuItem]', exportAs: 'seamMenuItem', inputs: ['disabled'], host: {
@@ -210,7 +483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         '[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  <div class=\"flex-fill\">\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  <seam-icon *ngIf=\"_triggersSubmenu\"\n    style=\"width: 30px; height: 20px; flex: 0 0 auto;\"\n    class=\"pl-2\"\n    [icon]=\"sublevelIcon\"\n    [iconClass]=\"subLevelIconClass\"\n    iconType=\"image-fill\">\n  </seam-icon>\n</div>\n", styles: [":host.cdk-mouse-focused:not(:hover){background:transparent}:host[aria-expanded]{color:#16181b;text-decoration:none;background-color:#e9ecef}\n"] }]
+                    }, 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\n  <div class=\"text-truncate\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"badgeText\" class=\"ml-2\">\n    <span class=\"badge badge-pill{{ badgeTheme ? ' badge-' + badgeTheme : '' }} position-relative\"\n      style=\"top: -2px\"\n      >{{ badgeText }}</span>\n  </div>\n\n  <div class=\"d-flex flex-grow-1 justify-content-end\">\n    <seam-icon *ngIf=\"_triggersSubmenu\"\n      style=\"width: 30px; height: 20px; flex: 0 0 auto;\"\n      class=\"pl-2\"\n      [icon]=\"sublevelIcon\"\n      [iconClass]=\"subLevelIconClass\"\n      iconType=\"image-fill\">\n    </seam-icon>\n  </div>\n</div>\n", styles: [":host.cdk-mouse-focused:not(:hover){background:transparent}:host[aria-expanded]{color:#16181b;text-decoration:none;background-color:#e9ecef}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -591,6 +864,7 @@ class MenuToggleDirective {
                 overlayY: 'bottom',
             },
         ];
+        this.menuToggle = new EventEmitter();
         // TODO: Figure out how to automatically handle this. I think the offset can
         // be calculated using the first item's offsetTop and borderTop. The problem
         // is that I was only able to calculate it after the animation had started, so
@@ -650,6 +924,7 @@ class MenuToggleDirective {
         // this._overlayRef.backdropClick().subscribe(v => {
         //   console.log('backdropClick', v)
         // })
+        this.menuToggle.emit(true);
     }
     /** The text direction of the containing app. */
     get dir() {
@@ -678,6 +953,7 @@ class MenuToggleDirective {
             this.menu?.closed.emit();
         }
         this._active = false;
+        this.menuToggle.emit(false);
     }
     menuOpen() {
         return (this._overlayRef && this._overlayRef.hasAttached()) ?? false;
@@ -784,7 +1060,7 @@ class MenuToggleDirective {
     }
 }
 MenuToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1.FocusMonitor }, { token: THESEAM_MENU_PANEL, optional: true }, { token: MenuItemComponent, optional: true, self: true }, { token: i4.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MenuToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MenuToggleDirective, selector: "[seamMenuToggle]", inputs: { menu: ["seamMenuToggle", "menu"], positions: "positions", seamMenuTogglePositionsOffsetY: "seamMenuTogglePositionsOffsetY" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, 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", "attr.aria-controls": "menuOpen() ? menu.panelId : null" }, classAttribute: "seam-menu-toggle" }, exportAs: ["seamMenuToggle"], ngImport: i0 });
+MenuToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MenuToggleDirective, selector: "[seamMenuToggle]", inputs: { menu: ["seamMenuToggle", "menu"], positions: "positions", seamMenuTogglePositionsOffsetY: "seamMenuTogglePositionsOffsetY" }, outputs: { menuToggle: "menuToggle", menuOpened: "menuOpened", menuClosed: "menuClosed" }, 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", "attr.aria-controls": "menuOpen() ? menu.panelId : null" }, classAttribute: "seam-menu-toggle" }, exportAs: ["seamMenuToggle"], ngImport: i0 });
 __decorate([
     InputNumber(0)
 ], MenuToggleDirective.prototype, "seamMenuTogglePositionsOffsetY", void 0);
@@ -817,6 +1093,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['seamMenuToggle']
             }], positions: [{
                 type: Input
+            }], menuToggle: [{
+                type: Output
             }], seamMenuTogglePositionsOffsetY: [{
                 type: Input
             }], menuOpened: [{
@@ -1006,5 +1284,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * 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 };
+export { LIB_MENU, MenuComponent, MenuDividerComponent, MenuFooterActionComponent, MenuFooterComponent, MenuHeaderComponent, MenuItemComponent, MenuToggleDirective, THESEAM_MENU_PANEL, TheSeamMenuFooterHarness, TheSeamMenuHarness, TheSeamMenuHeaderHarness, TheSeamMenuItemHarness, TheSeamMenuModule, menuDropdownPanelExpandIn, menuDropdownPanelExpandOut, menuDropdownPanelFadeIn, menuDropdownPanelFadeOut, menuDropdownPanelIn, menuDropdownPanelOut, menuDropdownPanelSlideIn, menuDropdownPanelSlideOut };
 //# sourceMappingURL=theseam-ui-common-menu.mjs.map