@theseam/ui-common 0.4.12 → 0.4.14

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]
@@ -1006,5 +1279,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