genesys-spark-components 4.26.1-beta.0 → 4.26.2

package/dist/cjs/gux-listbox.service-a91f8bd2.js

@@ -0,0 +1,164 @@
+'use strict';
+
+function getListOptions(list) {
+    const listChildren = Array.from(list.children);
+    return listChildren.reduce((accumulator, child) => {
+        let childOptions = [];
+        if (isOptionGroup(child)) {
+            childOptions = Array.from(child.children).filter(item => isOption(item));
+        }
+        else if (isOption(child)) {
+            childOptions = [child];
+        }
+        return [...accumulator, ...childOptions];
+    }, []);
+}
+function getAvailableListOptions(list) {
+    return getListOptions(list).filter(option => {
+        return !option.disabled && !option.filtered;
+    });
+}
+function isOptionGroup(item) {
+    return item.tagName === 'GUX-OPTION-GROUP-BETA';
+}
+function isOption(item) {
+    const optionTypes = ['GUX-OPTION', 'GUX-OPTION-ICON', 'GUX-OPTION-MULTI'];
+    return optionTypes.includes(item.tagName);
+}
+function getFirstSelectedOption(list) {
+    return getListOptions(list).find(option => option.selected && !option.disabled && !option.filtered);
+}
+function getActiveOption(list) {
+    return getListOptions(list).find(option => option.active);
+}
+function setActiveOption(list, element) {
+    if (element) {
+        getListOptions(list).forEach(option => {
+            const active = (!option.disabled || !option.filtered) && option === element;
+            option.active = active;
+            if (active) {
+                list.setAttribute('aria-activedescendant', option.id);
+            }
+        });
+        element.scrollIntoView({ block: 'nearest' });
+    }
+}
+function getFirstOption(list) {
+    return getAvailableListOptions(list)[0];
+}
+function getNextOption(list) {
+    if (hasActiveOption(list) && getActiveOption(list) !== getLastOption(list)) {
+        const availableListOptions = getAvailableListOptions(list);
+        const activeOption = getActiveOption(list);
+        const activeOptionIndex = availableListOptions.indexOf(activeOption);
+        return availableListOptions[activeOptionIndex + 1];
+    }
+    return getFirstOption(list);
+}
+function getPreviousOption(list) {
+    if (hasActiveOption(list)) {
+        const availableOptionsList = getAvailableListOptions(list);
+        const activeOptionIndex = availableOptionsList.indexOf(getActiveOption(list));
+        if (getActiveOption(list) === getFirstOption(list)) {
+            return getLastOption(list);
+        }
+        return availableOptionsList[activeOptionIndex - 1];
+    }
+    return getFirstOption(list);
+}
+function getLastOption(list) {
+    const availableOptions = getAvailableListOptions(list);
+    return availableOptions[availableOptions.length - 1];
+}
+function hasActiveOption(list) {
+    return Boolean(getActiveOption(list));
+}
+function getSearchOption(list, searchString) {
+    return getListOptions(list).find(option => {
+        return ((!option.disabled || !option.filtered) &&
+            matchOption(option, searchString));
+    });
+}
+function setSearchOptionActive(list, searchString) {
+    const option = getSearchOption(list, searchString);
+    if (option) {
+        setActiveOption(list, option);
+    }
+}
+function clearActiveOptions(list) {
+    getListOptions(list).forEach(option => {
+        option.active = false;
+    });
+}
+function setInitialActiveOption(list) {
+    setActiveOption(list, getFirstSelectedOption(list) || getFirstOption(list));
+}
+function hasPreviousOption(list) {
+    if (hasActiveOption(list)) {
+        return Boolean(getPreviousOption(list));
+    }
+    return false;
+}
+function hasNextOption(list) {
+    if (hasActiveOption(list)) {
+        return Boolean(getNextOption(list));
+    }
+    return false;
+}
+function setFirstOptionActive(list) {
+    setActiveOption(list, getFirstOption(list));
+}
+function setNextOptionActive(list) {
+    setActiveOption(list, getNextOption(list));
+}
+function setPreviousOptionActive(list) {
+    setActiveOption(list, getPreviousOption(list));
+}
+function setLastOptionActive(list) {
+    setActiveOption(list, getLastOption(list));
+}
+function actOnActiveOption(list, handler) {
+    if (hasActiveOption(list)) {
+        handler(getActiveOption(list).value);
+    }
+}
+function onClickedOption(option, handler) {
+    handler(option.value);
+}
+let timer;
+let searchStringState = '';
+// While there is less than 1s between keypresses that will be considered one search operation.
+// After 1s the next keypress will be considered the start of a new search.
+// This is a mimic/approximation of the native select elements functionality.
+const continueSearchMaxInterval = 1000;
+function goToOption(list, letter) {
+    clearTimeout(timer);
+    searchStringState += letter;
+    setSearchOptionActive(list, searchStringState);
+    timer = setTimeout(() => {
+        searchStringState = '';
+    }, continueSearchMaxInterval);
+}
+function matchOption(option, matchString) {
+    //The text content needs to be trimmed as white space can occur around the textContent if options are populated asynchronously.
+    return option.textContent
+        .trim()
+        .toLowerCase()
+        .startsWith(matchString.toLowerCase());
+}
+
+exports.actOnActiveOption = actOnActiveOption;
+exports.clearActiveOptions = clearActiveOptions;
+exports.getListOptions = getListOptions;
+exports.getSearchOption = getSearchOption;
+exports.goToOption = goToOption;
+exports.hasActiveOption = hasActiveOption;
+exports.hasNextOption = hasNextOption;
+exports.hasPreviousOption = hasPreviousOption;
+exports.matchOption = matchOption;
+exports.onClickedOption = onClickedOption;
+exports.setFirstOptionActive = setFirstOptionActive;
+exports.setInitialActiveOption = setInitialActiveOption;
+exports.setLastOptionActive = setLastOptionActive;
+exports.setNextOptionActive = setNextOptionActive;
+exports.setPreviousOptionActive = setPreviousOptionActive;

package/dist/cjs/gux-loading-message.cjs.entry.js

@@ -2,23 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
-const usage = require('./usage-287da480.js');
+const index = require('./index-7fb02c8c.js');
+const usage = require('./usage-0a903414.js');
 
 const guxLoadingMessageCss = ":host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  container-type: inline-size;\n}\n\n.gux-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  max-width: var(--gse-ui-progressAndLoading-loadingState-large-width);\n  color: var(--gse-ui-progressAndLoading-textColor);\n  text-align: center;\n}\n\n@container (width > 400px) {\n  .gux-container .gux-primary-message {\n    margin-top: var(--gse-ui-progressAndLoading-large-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-top: var(--gse-ui-progressAndLoading-large-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);\n  }\n}\n@container (width > 200px) and (width <=400px) {\n  .gux-container .gux-primary-message {\n    margin-top: var(--gse-ui-progressAndLoading-medium-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-top: var(--gse-ui-progressAndLoading-medium-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);\n  }\n}\n@container (width <=200px) {\n  .gux-container .gux-primary-message {\n    margin-top: var(--gse-ui-progressAndLoading-small-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-top: var(--gse-ui-progressAndLoading-small-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);\n  }\n}";
+const GuxLoadingMessageStyle0 = guxLoadingMessageCss;
 
 const GuxLoadingMessage = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentWillLoad() {
-    usage.trackComponent(this.root);
-  }
-  render() {
-    return (index.h("div", { class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { class: "gux-progress" }, index.h("slot", { name: "progress" })), index.h("div", { class: "gux-primary-message" }, index.h("slot", { name: "primary-message" })), index.h("div", { class: "gux-additional-guidance" }, index.h("slot", { name: "additional-guidance" }))));
-  }
-  get root() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    componentWillLoad() {
+        usage.trackComponent(this.root);
+    }
+    render() {
+        return (index.h("div", { key: '95a7cc30e565a50e78ea968463577f3a9aad3f94', class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { key: '17a13a459cdd20c968477aa0e84efa5b345c34b2', class: "gux-progress" }, index.h("slot", { key: 'bb6eb3ba3f0aedac8f88eacf77a86a810d7d2a02', name: "progress" })), index.h("div", { key: '95c8e3bcd7c8e1beef4fbd0d6cdada2faeaae391', class: "gux-primary-message" }, index.h("slot", { key: '6663d5050ecf623e8bff192008f0c666a7860f41', name: "primary-message" })), index.h("div", { key: 'b1b7dcf90053f94022aaa2eaa6ff6d73b2113e56', class: "gux-additional-guidance" }, index.h("slot", { key: '2b2adce732fe442ef1e540444e686f9f01a0e24b', name: "additional-guidance" }))));
+    }
+    get root() { return index.getElement(this); }
 };
-GuxLoadingMessage.style = guxLoadingMessageCss;
+GuxLoadingMessage.style = GuxLoadingMessageStyle0;
 
 exports.gux_loading_message = GuxLoadingMessage;

package/dist/cjs/gux-menu-option.cjs.entry.js

@@ -2,43 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
-const guxMenu_common = require('./gux-menu.common-d41b2fac.js');
+const index = require('./index-7fb02c8c.js');
+const guxMenu_common = require('./gux-menu.common-4025206c.js');
 
 const guxMenuOptionCss = ":host{display:block;flex:1 1 auto;align-self:auto}:host .gux-menu-option-button{all:unset;width:var(--gse-ui-flyoutMenu-width);height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);background-color:var(--gse-ui-menu-option-default-backgroundColor)}:host .gux-menu-option-button:focus-within,:host .gux-menu-option-button:hover{background-color:var(--gse-ui-menu-option-hover-backgroundColor)}:host .gux-menu-option-button:enabled{cursor:pointer}:host .gux-menu-option-button .gux-menu-option-button-text{display:block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}";
+const GuxMenuOptionStyle0 = guxMenuOptionCss;
 
 const GuxMenuOption = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  /**
-   * Focus on the components button element
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocus() {
-    this.buttonElement.focus();
-  }
-  onKeydown(event) {
-    guxMenu_common.menuNavigation(event, this.root);
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'Enter':
-        event.stopPropagation();
-        break;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
     }
-  }
-  onKeyup(event) {
-    switch (event.key) {
-      case ' ':
-        event.stopPropagation();
-        break;
+    /**
+     * Focus on the components button element
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocus() {
+        this.buttonElement.focus();
     }
-  }
-  render() {
-    return (index.h("button", { type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, index.h("span", { class: "gux-menu-option-button-text" }, index.h("slot", null))));
-  }
-  get root() { return index.getElement(this); }
+    onKeydown(event) {
+        guxMenu_common.menuNavigation(event, this.root);
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'Enter':
+                event.stopPropagation();
+                break;
+        }
+    }
+    onKeyup(event) {
+        switch (event.key) {
+            case ' ':
+                event.stopPropagation();
+                break;
+        }
+    }
+    render() {
+        return (index.h("button", { key: '81bca1eeb08d4bfae5906d3339775424832c6956', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, index.h("span", { key: '016c8cc2ceec6c46b1a641bf78879c5d2d673a9d', class: "gux-menu-option-button-text" }, index.h("slot", { key: 'cb387f50192702632f6c86bb0e35a2cc6beb812d' }))));
+    }
+    get root() { return index.getElement(this); }
 };
-GuxMenuOption.style = guxMenuOptionCss;
+GuxMenuOption.style = GuxMenuOptionStyle0;
 
 exports.gux_menu_option = GuxMenuOption;

package/dist/cjs/gux-menu.cjs.entry.js

@@ -2,18 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
+const index = require('./index-7fb02c8c.js');
 
 const guxMenuCss = ":host{flex-direction:column;width:fit-content;padding:var(--gse-ui-menu-padding);background-color:var(--gse-ui-flyoutMenu-backgroundColor);border:none;border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}";
+const GuxMenuStyle0 = guxMenuCss;
 
 const GuxMenu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, { role: "menu" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3b52abccf17fd176bab7f4f537cdde3846568bb2', role: "menu" }, index.h("slot", { key: '391e5ccb4d43335a382e718e400844265e060d20' })));
+    }
 };
-GuxMenu.style = guxMenuCss;
+GuxMenu.style = GuxMenuStyle0;
 
 exports.gux_menu = GuxMenu;

package/dist/cjs/gux-menu.common-4025206c.js

@@ -0,0 +1,80 @@
+'use strict';
+
+const hideDelay = 250;
+function menuNavigation(event, currentElement) {
+    switch (event.key) {
+        case 'ArrowUp':
+            event.stopPropagation();
+            event.preventDefault();
+            focusPreviousSiblingLoop(currentElement);
+            break;
+        case 'ArrowDown':
+            event.stopPropagation();
+            event.preventDefault();
+            focusNextSiblingLoop(currentElement);
+            break;
+        case 'ArrowRight':
+            event.preventDefault();
+            break;
+        case 'ArrowLeft':
+            event.preventDefault();
+            break;
+        case 'Home':
+            event.stopPropagation();
+            event.preventDefault();
+            focusFirstSibling(currentElement);
+            break;
+        case 'End':
+            event.stopPropagation();
+            event.preventDefault();
+            focusLastSibling(currentElement);
+            break;
+    }
+}
+function focusFirstSibling(currentElement) {
+    const firstFocusableElement = getFirstFocusableElement(currentElement);
+    if (firstFocusableElement) {
+        void firstFocusableElement.guxFocus();
+    }
+}
+function focusLastSibling(currentElement) {
+    const lastFocusableElement = getLastFocusableElement(currentElement);
+    if (lastFocusableElement) {
+        void lastFocusableElement.guxFocus();
+    }
+}
+function focusPreviousSiblingLoop(currentElement) {
+    const previousFocusableElement = currentElement.previousElementSibling;
+    if (previousFocusableElement) {
+        void previousFocusableElement.guxFocus();
+    }
+    else {
+        focusLastSibling(currentElement);
+    }
+}
+function focusNextSiblingLoop(currentElement) {
+    const nextFocusableElement = currentElement.nextElementSibling;
+    if (nextFocusableElement) {
+        void nextFocusableElement.guxFocus();
+    }
+    else {
+        focusFirstSibling(currentElement);
+    }
+}
+function getFirstFocusableElement(currentElement) {
+    let firstFocusableElement = currentElement;
+    while (firstFocusableElement.previousElementSibling !== null) {
+        firstFocusableElement = firstFocusableElement.previousElementSibling;
+    }
+    return firstFocusableElement;
+}
+function getLastFocusableElement(currentElement) {
+    let lastFocusableElement = currentElement;
+    while (lastFocusableElement.nextElementSibling !== null) {
+        lastFocusableElement = lastFocusableElement.nextElementSibling;
+    }
+    return lastFocusableElement;
+}
+
+exports.hideDelay = hideDelay;
+exports.menuNavigation = menuNavigation;

package/dist/cjs/gux-modal-legacy.cjs.entry.js

@@ -2,84 +2,85 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
-const randomHtmlId = require('./random-html-id-32ef8847.js');
-const usage = require('./usage-287da480.js');
+const index = require('./index-7fb02c8c.js');
+const randomHtmlId = require('./random-html-id-71c43d5a.js');
+const usage = require('./usage-0a903414.js');
 
 const guxModalLegacyCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}slot[name=left-align-buttons]::slotted(:not(button,gux-button)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host .gux-modal{position:fixed;inset:0;z-index:var(--gse-semantic-zIndex-modal);display:flex;align-items:center;justify-content:center;color:#2e394c;background:var(--gse-ui-modal-shroudColor)}:host .gux-modal .gux-modal-container{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:var(--gse-ui-modal-padding);background:var(--gse-ui-modal-backgroundColor);border:1px solid #b4bccb;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color)}:host .gux-modal .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{margin:0;font-family:var(--gse-ui-modal-heading-fontFamily);font-size:var(--gse-ui-modal-heading-fontSize);font-weight:var(--gse-ui-modal-heading-fontWeight);line-height:var(--gse-ui-modal-heading-fontFamily);color:var(--gse-ui-modal-headerColor);letter-spacing:var(--gse-ui-modal-heading-letterSpacing);font-family:var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-xl-fontSize);line-height:var(--gse-core-typography-heading-xl-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin-top:var(--gse-ui-modal-gap);margin-bottom:var(--gse-ui-modal-gap);overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
+const GuxModalLegacyStyle0 = guxModalLegacyCss;
 
 const GuxModalLegacy = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
-    this.size = 'dynamic';
-    this.trapFocus = true;
-    this.initialFocus = undefined;
-  }
-  handleKeyEvent(event) {
-    if (event.key === 'Escape') {
-      this.onDismissHandler(event);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
+        this.size = 'dynamic';
+        this.trapFocus = true;
+        this.initialFocus = undefined;
     }
-  }
-  connectedCallback() {
-    this.triggerElement = document.activeElement;
-  }
-  componentWillLoad() {
-    const trapFocusVariant = this.trapFocus ? 'trapfocuson' : 'trapfocusoff';
-    const componentVariant = `${this.size}-${trapFocusVariant}`;
-    usage.trackComponent(this.root, { variant: componentVariant });
-  }
-  componentDidLoad() {
-    var _a, _b, _c;
-    const initialFocusElement = this.getInitialFocusElement();
-    if (initialFocusElement) {
-      // using .focus?.() instead of .focus() as a workaround for a Stencil bug in unit tests
-      // https://github.com/ionic-team/stencil/issues/1964
-      (_a = initialFocusElement.focus) === null || _a === void 0 ? void 0 : _a.call(initialFocusElement);
+    handleKeyEvent(event) {
+        if (event.key === 'Escape') {
+            this.onDismissHandler(event);
+        }
     }
-    else if (this.dismissButton) {
-      (_c = (_b = this.dismissButton).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+    connectedCallback() {
+        this.triggerElement = document.activeElement;
     }
-  }
-  render() {
-    const hasModalTitleSlot = this.hasModalTitleSlot();
-    const hasFooterButtons = this.hasFooterButtons();
-    const titleID = randomHtmlId.randomHTMLId();
-    return (index.h("div", { class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" }))), index.h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { class: {
-        'gux-modal-content': true,
-        'gux-no-buttons': !hasFooterButtons
-      } }, index.h("p", null, index.h("slot", { name: "content" }))), hasFooterButtons && (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-left-align-buttons" }, index.h("slot", { name: "left-align-buttons" })), index.h("div", { class: "gux-right-align-buttons" }, index.h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
-  }
-  // When trap-focus is enabled, focusing this element
-  // will immediately redirect focus back to the dismiss button at the top of the modal.
-  renderModalTrapFocusEl() {
-    if (this.trapFocus) {
-      return (index.h("span", { onFocus: () => this.dismissButton.focus(), tabindex: "0" }));
+    componentWillLoad() {
+        const trapFocusVariant = this.trapFocus ? 'trapfocuson' : 'trapfocusoff';
+        const componentVariant = `${this.size}-${trapFocusVariant}`;
+        usage.trackComponent(this.root, { variant: componentVariant });
     }
-  }
-  getInitialFocusElement() {
-    return this.initialFocus
-      ? this.root.querySelector(this.initialFocus)
-      : undefined;
-  }
-  hasModalTitleSlot() {
-    return Boolean(this.root.querySelector('[slot="title"]'));
-  }
-  hasFooterButtons() {
-    return (Boolean(this.root.querySelector('[slot="left-align-buttons"]')) ||
-      Boolean(this.root.querySelector('[slot="right-align-buttons"]')));
-  }
-  onDismissHandler(event) {
-    var _a;
-    event.stopPropagation();
-    const dismissEvent = this.guxdismiss.emit();
-    if (!dismissEvent.defaultPrevented) {
-      this.root.remove();
-      (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
+    componentDidLoad() {
+        var _a, _b, _c;
+        const initialFocusElement = this.getInitialFocusElement();
+        if (initialFocusElement) {
+            // using .focus?.() instead of .focus() as a workaround for a Stencil bug in unit tests
+            // https://github.com/ionic-team/stencil/issues/1964
+            (_a = initialFocusElement.focus) === null || _a === void 0 ? void 0 : _a.call(initialFocusElement);
+        }
+        else if (this.dismissButton) {
+            (_c = (_b = this.dismissButton).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
     }
-  }
-  get root() { return index.getElement(this); }
+    render() {
+        const hasModalTitleSlot = this.hasModalTitleSlot();
+        const hasFooterButtons = this.hasFooterButtons();
+        const titleID = randomHtmlId.randomHTMLId();
+        return (index.h("div", { key: 'aa0adec444a0aed1a560169125a62a524cce6895', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { key: 'ed47eeefefc133fa0e85968733c6567acd906177', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" }))), index.h("gux-dismiss-button", { key: 'e190fb1a40d174544f2d97fff8d6e01f4e066ace', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), index.h("div", { key: '2ffc0af21612aa789dae56d60b6e408c3dd548f4', class: {
+                'gux-modal-content': true,
+                'gux-no-buttons': !hasFooterButtons
+            } }, index.h("p", { key: 'd6bfebc6a1670419d1ca1827b43699d78fa35f71' }, index.h("slot", { key: '2fa60d1feca4dfc9d3dd5aa5096449387188e2e5', name: "content" }))), hasFooterButtons && (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-left-align-buttons" }, index.h("slot", { name: "left-align-buttons" })), index.h("div", { class: "gux-right-align-buttons" }, index.h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+    }
+    // When trap-focus is enabled, focusing this element
+    // will immediately redirect focus back to the dismiss button at the top of the modal.
+    renderModalTrapFocusEl() {
+        if (this.trapFocus) {
+            return (index.h("span", { onFocus: () => this.dismissButton.focus(), tabindex: "0" }));
+        }
+    }
+    getInitialFocusElement() {
+        return this.initialFocus
+            ? this.root.querySelector(this.initialFocus)
+            : undefined;
+    }
+    hasModalTitleSlot() {
+        return Boolean(this.root.querySelector('[slot="title"]'));
+    }
+    hasFooterButtons() {
+        return (Boolean(this.root.querySelector('[slot="left-align-buttons"]')) ||
+            Boolean(this.root.querySelector('[slot="right-align-buttons"]')));
+    }
+    onDismissHandler(event) {
+        var _a;
+        event.stopPropagation();
+        const dismissEvent = this.guxdismiss.emit();
+        if (!dismissEvent.defaultPrevented) {
+            this.root.remove();
+            (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    get root() { return index.getElement(this); }
 };
-GuxModalLegacy.style = guxModalLegacyCss;
+GuxModalLegacy.style = GuxModalLegacyStyle0;
 
 exports.gux_modal_legacy = GuxModalLegacy;