@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/componentlibrary/priv-navigator-button.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-d5997567.js';
-
-const privNavigatorButtonCss = ":host *,priv-navigator-button *{box-sizing:border-box}:host .navigator,priv-navigator-button .navigator{color:#575195;padding:0 1.25rem;position:static !important;height:100%;background:transparent;border:none;min-height:3.75rem;cursor:pointer;border-radius:0;top:50%}:host .navigator img,priv-navigator-button .navigator img{height:2.25rem;width:2.25rem;vertical-align:middle}:host .navigator:hover,priv-navigator-button .navigator:hover{background:#dcdbde}:host .navigator:active,:host .navigator:focus,priv-navigator-button .navigator:active,priv-navigator-button .navigator:focus{outline:none}:host .navigator.user-is-tabbing:focus,priv-navigator-button .navigator.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .navigator.user-is-tabbing:focus::-moz-focus-inner,priv-navigator-button .navigator.user-is-tabbing:focus::-moz-focus-inner{border:0}:host button:after,priv-navigator-button button:after{vertical-align:middle;height:2.25rem;width:2.25rem;background-size:36px;display:inline-block;background-image:url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);content:\"\"}";
-
-const PrivNavigatorButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.buttonActivated = createEvent(this, "buttonActivated", 7);
-    this.expanded = false;
-    this.altText = "";
-    this.isTabbing = false;
-  }
-  handleClick() {
-    this.buttonActivated.emit();
-  }
-  render() {
-    const { handleClick, altText } = this;
-    const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
-    return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
-  }
-  get el() { return getElement(this); }
-};
-PrivNavigatorButton.style = privNavigatorButtonCss;
-
-export { PrivNavigatorButton as priv_navigator_button };

package/dist/componentlibrary/priv-navigator-item.entry.js

@@ -1,30 +0,0 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-d5997567.js';
-
-const privNavigatorItemCss = ":host,priv-navigator-item{list-style:none;border-bottom:1px solid #e0dde4;width:100%;display:block;cursor:pointer}:host .navoption,priv-navigator-item .navoption{color:#404248;padding:0.9375rem 1.25rem;background:#fff;font-size:0.875rem}:host .navoption.selected,:host .navoption:hover,priv-navigator-item .navoption.selected,priv-navigator-item .navoption:hover{background:#e5e5e5}:host .navoption.focused:not(.selected),priv-navigator-item .navoption.focused:not(.selected){background:#f4f4f4;opacity:1}";
-
-const PrivNavigatorItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.keydownOnNavItem = createEvent(this, "keydownOnNavItem", 7);
-    this.selected = false;
-    this.focused = false;
-    this.link = "";
-  }
-  handleKeyDown(ev) {
-    const key = ev.key;
-    const el = this.el;
-    if (key !== "Tab") {
-      ev.preventDefault();
-    }
-    this.keydownOnNavItem.emit({ navItem: el, key: key });
-  }
-  render() {
-    const selectedClass = this.selected ? "selected" : "";
-    const focusedClass = this.focused ? "focused" : "";
-    return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-PrivNavigatorItem.style = privNavigatorItemCss;
-
-export { PrivNavigatorItem as priv_navigator_item };

package/dist/componentlibrary/shadow-css-67b66845.js

@@ -1,389 +0,0 @@
-/*
- Stencil Client Platform v2.8.0 | MIT Licensed | https://stenciljs.com
- */
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- *
- * This file is a port of shadowCSS from webcomponents.js to TypeScript.
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
- */
-const safeSelector = (selector) => {
-    const placeholders = [];
-    let index = 0;
-    let content;
-    // Replaces attribute selectors with placeholders.
-    // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
-    selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
-        const replaceBy = `__ph-${index}__`;
-        placeholders.push(keep);
-        index++;
-        return replaceBy;
-    });
-    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
-    // WS and "+" would otherwise be interpreted as selector separators.
-    content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
-        const replaceBy = `__ph-${index}__`;
-        placeholders.push(exp);
-        index++;
-        return pseudo + replaceBy;
-    });
-    const ss = {
-        content,
-        placeholders,
-    };
-    return ss;
-};
-const restoreSafeSelector = (placeholders, content) => {
-    return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
-};
-const _polyfillHost = '-shadowcsshost';
-const _polyfillSlotted = '-shadowcssslotted';
-// note: :host-context pre-processed to -shadowcsshostcontext.
-const _polyfillHostContext = '-shadowcsscontext';
-const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)';
-const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
-const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
-const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
-const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
-const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
-const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
-const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
-const _polyfillHostRe = /-shadowcsshost/gim;
-const _colonHostRe = /:host/gim;
-const _colonSlottedRe = /::slotted/gim;
-const _colonHostContextRe = /:host-context/gim;
-const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
-const stripComments = (input) => {
-    return input.replace(_commentRe, '');
-};
-const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
-const extractCommentsWithHash = (input) => {
-    return input.match(_commentWithHashRe) || [];
-};
-const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
-const _curlyRe = /([{}])/g;
-const OPEN_CURLY = '{';
-const CLOSE_CURLY = '}';
-const BLOCK_PLACEHOLDER = '%BLOCK%';
-const processRules = (input, ruleCallback) => {
-    const inputWithEscapedBlocks = escapeBlocks(input);
-    let nextBlockIndex = 0;
-    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
-        const selector = m[2];
-        let content = '';
-        let suffix = m[4];
-        let contentPrefix = '';
-        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
-            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
-            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
-            contentPrefix = '{';
-        }
-        const cssRule = {
-            selector,
-            content,
-        };
-        const rule = ruleCallback(cssRule);
-        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
-    });
-};
-const escapeBlocks = (input) => {
-    const inputParts = input.split(_curlyRe);
-    const resultParts = [];
-    const escapedBlocks = [];
-    let bracketCount = 0;
-    let currentBlockParts = [];
-    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
-        const part = inputParts[partIndex];
-        if (part === CLOSE_CURLY) {
-            bracketCount--;
-        }
-        if (bracketCount > 0) {
-            currentBlockParts.push(part);
-        }
-        else {
-            if (currentBlockParts.length > 0) {
-                escapedBlocks.push(currentBlockParts.join(''));
-                resultParts.push(BLOCK_PLACEHOLDER);
-                currentBlockParts = [];
-            }
-            resultParts.push(part);
-        }
-        if (part === OPEN_CURLY) {
-            bracketCount++;
-        }
-    }
-    if (currentBlockParts.length > 0) {
-        escapedBlocks.push(currentBlockParts.join(''));
-        resultParts.push(BLOCK_PLACEHOLDER);
-    }
-    const strEscapedBlocks = {
-        escapedString: resultParts.join(''),
-        blocks: escapedBlocks,
-    };
-    return strEscapedBlocks;
-};
-const insertPolyfillHostInCssText = (selector) => {
-    selector = selector
-        .replace(_colonHostContextRe, _polyfillHostContext)
-        .replace(_colonHostRe, _polyfillHost)
-        .replace(_colonSlottedRe, _polyfillSlotted);
-    return selector;
-};
-const convertColonRule = (cssText, regExp, partReplacer) => {
-    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
-    return cssText.replace(regExp, (...m) => {
-        if (m[2]) {
-            const parts = m[2].split(',');
-            const r = [];
-            for (let i = 0; i < parts.length; i++) {
-                const p = parts[i].trim();
-                if (!p)
-                    break;
-                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
-            }
-            return r.join(',');
-        }
-        else {
-            return _polyfillHostNoCombinator + m[3];
-        }
-    });
-};
-const colonHostPartReplacer = (host, part, suffix) => {
-    return host + part.replace(_polyfillHost, '') + suffix;
-};
-const convertColonHost = (cssText) => {
-    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
-};
-const colonHostContextPartReplacer = (host, part, suffix) => {
-    if (part.indexOf(_polyfillHost) > -1) {
-        return colonHostPartReplacer(host, part, suffix);
-    }
-    else {
-        return host + part + suffix + ', ' + part + ' ' + host + suffix;
-    }
-};
-const convertColonSlotted = (cssText, slotScopeId) => {
-    const slotClass = '.' + slotScopeId + ' > ';
-    const selectors = [];
-    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
-        if (m[2]) {
-            const compound = m[2].trim();
-            const suffix = m[3];
-            const slottedSelector = slotClass + compound + suffix;
-            let prefixSelector = '';
-            for (let i = m[4] - 1; i >= 0; i--) {
-                const char = m[5][i];
-                if (char === '}' || char === ',') {
-                    break;
-                }
-                prefixSelector = char + prefixSelector;
-            }
-            const orgSelector = prefixSelector + slottedSelector;
-            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
-            if (orgSelector.trim() !== addedSelector.trim()) {
-                const updatedSelector = `${addedSelector}, ${orgSelector}`;
-                selectors.push({
-                    orgSelector,
-                    updatedSelector,
-                });
-            }
-            return slottedSelector;
-        }
-        else {
-            return _polyfillHostNoCombinator + m[3];
-        }
-    });
-    return {
-        selectors,
-        cssText,
-    };
-};
-const convertColonHostContext = (cssText) => {
-    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
-};
-const convertShadowDOMSelectors = (cssText) => {
-    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
-};
-const makeScopeMatcher = (scopeSelector) => {
-    const lre = /\[/g;
-    const rre = /\]/g;
-    scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
-    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
-};
-const selectorNeedsScoping = (selector, scopeSelector) => {
-    const re = makeScopeMatcher(scopeSelector);
-    return !re.test(selector);
-};
-const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
-    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
-    _polyfillHostRe.lastIndex = 0;
-    if (_polyfillHostRe.test(selector)) {
-        const replaceBy = `.${hostSelector}`;
-        return selector
-            .replace(_polyfillHostNoCombinatorRe, (_, selector) => {
-            return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {
-                return before + replaceBy + colon + after;
-            });
-        })
-            .replace(_polyfillHostRe, replaceBy + ' ');
-    }
-    return scopeSelector + ' ' + selector;
-};
-const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
-    const isRe = /\[is=([^\]]*)\]/g;
-    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
-    const className = '.' + scopeSelector;
-    const _scopeSelectorPart = (p) => {
-        let scopedP = p.trim();
-        if (!scopedP) {
-            return '';
-        }
-        if (p.indexOf(_polyfillHostNoCombinator) > -1) {
-            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
-        }
-        else {
-            // remove :host since it should be unnecessary
-            const t = p.replace(_polyfillHostRe, '');
-            if (t.length > 0) {
-                const matches = t.match(/([^:]*)(:*)(.*)/);
-                if (matches) {
-                    scopedP = matches[1] + className + matches[2] + matches[3];
-                }
-            }
-        }
-        return scopedP;
-    };
-    const safeContent = safeSelector(selector);
-    selector = safeContent.content;
-    let scopedSelector = '';
-    let startIndex = 0;
-    let res;
-    const sep = /( |>|\+|~(?!=))\s*/g;
-    // If a selector appears before :host it should not be shimmed as it
-    // matches on ancestor elements and not on elements in the host's shadow
-    // `:host-context(div)` is transformed to
-    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
-    // the `div` is not part of the component in the 2nd selectors and should not be scoped.
-    // Historically `component-tag:host` was matching the component so we also want to preserve
-    // this behavior to avoid breaking legacy apps (it should not match).
-    // The behavior should be:
-    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
-    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
-    //   `:host-context(tag)`)
-    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
-    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
-    let shouldScope = !hasHost;
-    while ((res = sep.exec(selector)) !== null) {
-        const separator = res[1];
-        const part = selector.slice(startIndex, res.index).trim();
-        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
-        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
-        scopedSelector += `${scopedPart} ${separator} `;
-        startIndex = sep.lastIndex;
-    }
-    const part = selector.substring(startIndex);
-    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
-    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
-    // replace the placeholders with their original values
-    return restoreSafeSelector(safeContent.placeholders, scopedSelector);
-};
-const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
-    return selector
-        .split(',')
-        .map((shallowPart) => {
-        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
-            return shallowPart.trim();
-        }
-        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
-            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
-        }
-        else {
-            return shallowPart.trim();
-        }
-    })
-        .join(', ');
-};
-const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
-    return processRules(cssText, (rule) => {
-        let selector = rule.selector;
-        let content = rule.content;
-        if (rule.selector[0] !== '@') {
-            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-        }
-        else if (rule.selector.startsWith('@media') ||
-            rule.selector.startsWith('@supports') ||
-            rule.selector.startsWith('@page') ||
-            rule.selector.startsWith('@document')) {
-            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
-        }
-        const cssRule = {
-            selector: selector.replace(/\s{2,}/g, ' ').trim(),
-            content,
-        };
-        return cssRule;
-    });
-};
-const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
-    cssText = insertPolyfillHostInCssText(cssText);
-    cssText = convertColonHost(cssText);
-    cssText = convertColonHostContext(cssText);
-    const slotted = convertColonSlotted(cssText, slotScopeId);
-    cssText = slotted.cssText;
-    cssText = convertShadowDOMSelectors(cssText);
-    if (scopeId) {
-        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
-    }
-    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
-    cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
-    return {
-        cssText: cssText.trim(),
-        slottedSelectors: slotted.selectors,
-    };
-};
-const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
-    const hostScopeId = scopeId + '-h';
-    const slotScopeId = scopeId + '-s';
-    const commentsWithHash = extractCommentsWithHash(cssText);
-    cssText = stripComments(cssText);
-    const orgSelectors = [];
-    if (commentOriginalSelector) {
-        const processCommentedSelector = (rule) => {
-            const placeholder = `/*!@___${orgSelectors.length}___*/`;
-            const comment = `/*!@${rule.selector}*/`;
-            orgSelectors.push({ placeholder, comment });
-            rule.selector = placeholder + rule.selector;
-            return rule;
-        };
-        cssText = processRules(cssText, (rule) => {
-            if (rule.selector[0] !== '@') {
-                return processCommentedSelector(rule);
-            }
-            else if (rule.selector.startsWith('@media') ||
-                rule.selector.startsWith('@supports') ||
-                rule.selector.startsWith('@page') ||
-                rule.selector.startsWith('@document')) {
-                rule.content = processRules(rule.content, processCommentedSelector);
-                return rule;
-            }
-            return rule;
-        });
-    }
-    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
-    cssText = [scoped.cssText, ...commentsWithHash].join('\n');
-    if (commentOriginalSelector) {
-        orgSelectors.forEach(({ placeholder, comment }) => {
-            cssText = cssText.replace(placeholder, comment);
-        });
-    }
-    scoped.slottedSelectors.forEach((slottedSelector) => {
-        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);
-    });
-    return cssText;
-};
-
-export { scopeCss };

package/dist/componentlibrary/wm-action-menu.entry.js

@@ -1,202 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-d5997567.js';
-import { s as shouldShiftRight, g as generateId, a as shouldOpenUp, b as getTextDir } from './functions-316c1b23.js';
-
-const wmActionMenuCss = ":host{position:relative;display:inline-block;width:-moz-fit-content;width:fit-content;color:#575195;font-family:inherit}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host(:focus){outline:none}wm-action-menu:focus{outline:none}.dropdown{position:absolute;padding:0;margin:0.25rem 0;border-radius:3px 3px 3px 3px;min-width:11.4375rem;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;visibility:hidden;-webkit-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);background:#fff;z-index:10;text-align:left;white-space:nowrap}.dropdown:focus{outline:none}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1);visibility:visible}.dropdown.open-up{bottom:2.5rem;top:auto;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.right{left:0}.dropdown.left{right:0}";
-
-const ActionMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.menuLoaded = createEvent(this, "menuLoaded", 7);
-    this.openUp = false;
-    this.isExpanded = false;
-    this.buttonType = "icon";
-    this.disabled = false;
-    this.keysSoFar = "";
-    this.searchIndex = 0;
-    this.keyClear = null;
-  }
-  get horizontalPosition() {
-    return !!this.el && !!this.itemsEl && shouldShiftRight(this.el, this.itemsEl) ? "right" : "left";
-  }
-  get childItems() {
-    return Array.from(this.el.querySelectorAll("wm-menuitem"));
-  }
-  handleClickedItem() {
-    this.close();
-  }
-  handleKeyUp(ev) {
-    this.moveUp(ev.target);
-  }
-  handleKeyDown(ev) {
-    this.moveDown(ev.detail);
-  }
-  handleHomeKey() {
-    this.focusFirstItem();
-  }
-  handleEndKey() {
-    this.focusLastItem();
-  }
-  handleTabKey() {
-    if (this.isExpanded) {
-      this.close();
-    }
-  }
-  handleEscKey() {
-    this.close();
-    this.wmButtonEl.focus();
-  }
-  blurHandler(ev) {
-    const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
-    if (!isElOrChild && this.isExpanded) {
-      this.close();
-    }
-  }
-  handleKey(ev) {
-    switch (ev.key) {
-      case "ArrowDown":
-        if (!this.isExpanded) {
-          ev.preventDefault();
-          this.open();
-          window.requestAnimationFrame(() => this.focusFirstItem());
-        }
-        break;
-      case "ArrowUp":
-        if (!this.isExpanded) {
-          ev.preventDefault();
-          this.open();
-          window.requestAnimationFrame(() => this.focusLastItem());
-        }
-        break;
-    }
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.el.focus = function () {
-      if (!this.disabled) {
-        const button = this.shadowRoot.querySelector("wm-button");
-        button && button.focus();
-      }
-    };
-  }
-  componentDidLoad() {
-    if (this.childItems.length === 0) {
-      console.error("wm-action-menu should have wm-menuitem elements as children");
-    }
-    else {
-      this.focusFirstItem();
-    }
-    if (this.buttonType !== "icon" && !this.buttonText) {
-      console.error("wm-action-menu should have a valid button-text property when button-type is set to 'text' or 'selector'");
-    }
-    if (this.buttonType === "icon" && !this.tooltip) {
-      console.error("wm-action-menu should have a valid tooltip when button-type is set to 'icon'");
-    }
-    this.menuLoaded.emit();
-  }
-  moveUp(el) {
-    const index = this.childItems.indexOf(el);
-    if (index === 0) {
-      this.focusLastItem();
-    }
-    else {
-      this.focusItem(this.childItems[index - 1]);
-    }
-  }
-  moveDown(el) {
-    const index = this.childItems.indexOf(el);
-    if (index === this.childItems.length - 1) {
-      this.focusFirstItem();
-    }
-    else {
-      this.focusItem(this.childItems[index + 1]);
-    }
-  }
-  open() {
-    if (!this.disabled) {
-      this.openUp = shouldOpenUp(this.el, this.itemsEl);
-      // action menu usually is on the right side of the screen,
-      // so dropdown opens to the left (is anchored on the right corner)
-      // if there is not enough space on the left and enough on the right though,
-      // it will open on the right side
-      this.isExpanded = true;
-      this.itemsEl.classList.remove("hidden");
-      window.requestAnimationFrame(() => this.focusFirstItem());
-    }
-  }
-  close() {
-    this.isExpanded = false;
-    this.childItems.forEach((i) => (i.focused = false));
-    window.setTimeout(() => {
-      this.itemsEl.classList.add("hidden");
-    }, 150);
-    window.setTimeout(() => {
-      // if dev omits to assign focus after an action is triggered,
-      // the component brings the focus back on the button
-      // Focus will only be lost (and go to the body) once the menuitem
-      // is not visible anymore, so we need to wait for the transition to
-      // finish and the hidden class to be applied.
-      // also checking if focus stayed on the menuitem
-      if (document.activeElement.tagName === "BODY" || document.activeElement.tagName === "WM-MENUITEM") {
-        this.wmButtonEl.focus();
-      }
-    }, 250);
-  }
-  focusItem(item) {
-    this.childItems.map((i) => (i.focused = i === item));
-    item.focus && item.focus();
-  }
-  focusFirstItem() {
-    this.focusItem(this.childItems[0]);
-  }
-  focusLastItem() {
-    this.focusItem(this.childItems[this.childItems.length - 1]);
-  }
-  findAndFocusItem(ev) {
-    const character = ev.detail.toUpperCase();
-    this.focusFirstItem();
-    if (!this.keysSoFar) {
-      for (var i = 0; i < this.childItems.length; i++) {
-        if (this.childItems[i] === document.activeElement) {
-          this.searchIndex = i;
-        }
-      }
-    }
-    this.keysSoFar += character;
-    this.clearKeysSoFarAfterDelay();
-    var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
-    if (!nextMatch) {
-      nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
-    }
-    if (nextMatch) {
-      this.focusItem(nextMatch);
-    }
-  }
-  clearKeysSoFarAfterDelay() {
-    if (this.keyClear) {
-      window.clearTimeout(this.keyClear);
-      this.keyClear = null;
-    }
-    this.keyClear = window.setTimeout(function () {
-      this.keysSoFar = "";
-      this.keyClear = null;
-    }.bind(this), 500);
-  }
-  findMatchInRange(list, startIndex, endIndex) {
-    // Find the first item starting with the keysSoFar substring, searching in
-    // the specified range of items
-    for (var n = startIndex; n < endIndex; n++) {
-      var label = list[n].innerText;
-      if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
-        return list[n];
-      }
-    }
-    return null;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: getTextDir() }, h("wm-button", { "button-style": `${this.buttonType}only`, tooltip: this.tooltip, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.buttonType === "icon" ? "f1d9" : "", id: `menubtn-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": `menu-${this.uid}` }, this.buttonText), h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: `menu-${this.uid}`, tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-};
-ActionMenu.style = wmActionMenuCss;
-
-export { ActionMenu as wm_action_menu };