@theseam/ui-common 0.4.13 → 0.4.14

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

@@ -1,3 +1,7 @@
+import { __awaiter, __decorate } from 'tslib';
+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';
@@ -10,16 +14,338 @@ import * as i1 from '@angular/cdk/a11y';
 import { FocusKeyManager, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import * as i3 from '@theseam/ui-common/icon';
 import { TheSeamIconModule } from '@theseam/ui-common/icon';
-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.
+ */
+function animatingWait() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const selectAnimating = () => document.querySelectorAll('.seam-menu-container .ng-animating');
+        if (selectAnimating().length === 0) {
+            return;
+        }
+        yield 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. */
+    getText() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).text();
+        });
+    }
+    /** Clicks the menu item. */
+    click() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).click().then(() => animatingWait());
+        });
+    }
+    /** Hovers the menu item. */
+    hover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield 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. */
+    click() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).click().then(() => animatingWait());
+        });
+    }
+    /** Hovers the menu item. */
+    hover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield 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. */
+    isDisabled() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const disabled = (yield this.host()).getAttribute('disabled');
+            return coerceBooleanProperty(yield disabled);
+        });
+    }
+    /** Whether the menu is open. */
+    isOpen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return !!(yield this._getMenuPanel());
+        });
+    }
+    /** Gets the text of the menu's trigger element. */
+    getTriggerText() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).text();
+        });
+    }
+    /** Focuses the menu. */
+    focus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).focus().then(() => animatingWait());
+        });
+    }
+    /** Blurs the menu. */
+    blur() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).blur().then(() => animatingWait());
+        });
+    }
+    /** Whether the menu is focused. */
+    isFocused() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).isFocused();
+        });
+    }
+    /** Opens the menu. */
+    open() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!(yield this.isOpen())) {
+                return (yield this.host()).click().then(() => animatingWait());
+            }
+        });
+    }
+    /** Closes the menu. */
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panel = yield 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.
+     */
+    getItems(filters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panelId = yield this._getPanelId();
+            if (panelId) {
+                return this._documentRootLocator.locatorForAll(TheSeamMenuItemHarness.with(Object.assign(Object.assign({}, (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.
+     */
+    clickItem(itemFilter, ...subItemFilters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.open();
+            const items = yield 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 = yield 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.
+     */
+    hoverItem(itemFilter, ...subItemFilters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.open();
+            const items = yield 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 = yield 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.
+     */
+    getHeader(filters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panelId = yield this._getPanelId();
+            if (panelId) {
+                return this._documentRootLocator.locatorForOptional(TheSeamMenuHeaderHarness.with(Object.assign(Object.assign({}, (filters || {})), { ancestor: `#${panelId}` })))();
+            }
+            return null;
+        });
+    }
+    /**
+     * Gets a `TheSeamMenuFooterHarness` representing the footer in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    getFooter(filters) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panelId = yield this._getPanelId();
+            if (panelId) {
+                return this._documentRootLocator.locatorForOptional(TheSeamMenuFooterHarness.with(Object.assign(Object.assign({}, (filters || {})), { ancestor: `#${panelId}` })))();
+            }
+            return null;
+        });
+    }
+    getRootHarnessLoader() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panelId = yield this._getPanelId();
+            return this.documentRootLocatorFactory().harnessLoaderFor(`#${panelId}`);
+        });
+    }
+    /** Gets the menu panel associated with this menu. */
+    _getMenuPanel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panelId = yield this._getPanelId();
+            return panelId ? this._documentRootLocator.locatorForOptional(`#${panelId}`)() : null;
+        });
+    }
+    /** Gets the id of the menu panel associated with this menu. */
+    _getPanelId() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const panelId = yield (yield 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, (harness, hasSubmenu) => __awaiter(this, void 0, void 0, function* () { return (yield harness.hasSubmenu()) === hasSubmenu; }));
+    }
+    /** Whether the menu is disabled. */
+    isDisabled() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const disabled = (yield this.host()).getAttribute('disabled');
+            return coerceBooleanProperty(yield disabled);
+        });
+    }
+    /** Gets the text of the menu item. */
+    getText() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).text();
+        });
+    }
+    /** Focuses the menu item. */
+    focus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).focus().then(() => animatingWait());
+        });
+    }
+    /** Blurs the menu item. */
+    blur() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).blur().then(() => animatingWait());
+        });
+    }
+    /** Whether the menu item is focused. */
+    isFocused() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).isFocused();
+        });
+    }
+    /** Clicks the menu item. */
+    click() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).click().then(() => animatingWait());
+        });
+    }
+    /** Hovers the menu item. */
+    hover() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).hover().then(() => animatingWait());
+        });
+    }
+    /** Whether this item has a submenu. */
+    hasSubmenu() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.host()).matchesSelector(TheSeamMenuHarness.hostSelector);
+        });
+    }
+    /** Gets the submenu associated with this menu item, or null if none. */
+    getSubmenu() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (yield 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,
@@ -1026,5 +1352,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