genesys-spark-components 4.0.0-beta.5 → 4.0.0-beta.51

package/dist/cjs/gux-listbox.service-9bcd72cb.js

@@ -0,0 +1,168 @@
+'use strict';
+
+function getListOptions(list) {
+  return Array.from(list.children).filter(item => {
+    return item.value || item.value === '';
+  });
+}
+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) {
+  let firstOption = getListOptions(list)[0];
+  while (firstOption && (firstOption.disabled || firstOption.filtered)) {
+    firstOption = firstOption.nextElementSibling;
+  }
+  return firstOption;
+}
+function getNextOption(list) {
+  if (hasActiveOption(list)) {
+    let nextOption = getActiveOption(list)
+      .nextElementSibling;
+    while (nextOption && (nextOption.disabled || nextOption.filtered)) {
+      nextOption = nextOption.nextElementSibling;
+    }
+    return nextOption;
+  }
+  return getFirstOption(list);
+}
+function getPreviousOption(list) {
+  if (hasActiveOption(list)) {
+    let previousOption = getActiveOption(list)
+      .previousElementSibling;
+    while (previousOption &&
+      (previousOption.disabled || previousOption.filtered)) {
+      previousOption =
+        previousOption.previousElementSibling;
+    }
+    return previousOption;
+  }
+  return getFirstOption(list);
+}
+function getLastOption(list) {
+  const options = getListOptions(list);
+  let lastOption = options[options.length - 1];
+  while (lastOption && (lastOption.disabled || lastOption.filtered)) {
+    lastOption = lastOption.previousElementSibling;
+  }
+  return lastOption;
+}
+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)) {
+    let previousOption = getActiveOption(list)
+      .previousElementSibling;
+    while (previousOption &&
+      (previousOption.disabled || previousOption.filtered)) {
+      previousOption =
+        previousOption.previousElementSibling;
+    }
+    return Boolean(previousOption);
+  }
+  return false;
+}
+function hasNextOption(list) {
+  if (hasActiveOption(list)) {
+    let nextOption = getActiveOption(list)
+      .nextElementSibling;
+    while (nextOption && (nextOption.disabled || nextOption.filtered)) {
+      nextOption = nextOption.nextElementSibling;
+    }
+    return Boolean(nextOption);
+  }
+  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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-b9ad66f0.js');
+
+const guxLoadingMessageCss = "/**\n  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize\n  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264\n  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize\n  * @prop --gse-progressAndLoading-loadingState-medium-width\n  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize\n  * @prop --gse-progressAndLoading-loadingState-small-width\n  * @prop --gse-progressAndLoading-large-gap\n  * @prop --gse-progressAndLoading-large-gapText\n  * @prop --gse-progressAndLoading-pageLoading-gap\n  * @prop --gse-progressAndLoading-medium-gap\n  * @prop --gse-progressAndLoading-medium-gapText\n  * @prop --gse-progressAndLoading-small-gap\n  * @prop --gse-progressAndLoading-small-gapText\n  * @prop --gse-ui-progressAndLoading-textColor\n  */\n: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  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 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); }
+};
+GuxLoadingMessage.style = guxLoadingMessageCss;
+
+exports.gux_loading_message = GuxLoadingMessage;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const guxMenu_common = require('./gux-menu.common-ada23b94.js');
+const index = require('./index-75c9f0d9.js');
+const guxMenu_common = require('./gux-menu.common-d41b2fac.js');
 
-const guxMenuOptionCss = "gux-menu-option{display:block;flex:1 1 auto;align-self:auto}gux-menu-option .gux-menu-option-button{all:unset;width:100%;width:125px;height:32px;padding:0 16px;line-height:32px;color:#2e394c;background-color:#fdfdfd}gux-menu-option .gux-menu-option-button:focus-within,gux-menu-option .gux-menu-option-button:hover{color:#fdfdfd;background-color:#2a60c8}gux-menu-option .gux-menu-option-button:enabled{cursor:pointer}gux-menu-option .gux-menu-option-button .gux-menu-option-button-text{display:block;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}";
+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:4px 12px;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 GuxMenuOption = class {
   constructor(hostRef) {
@@ -27,6 +27,13 @@ const GuxMenuOption = class {
         break;
     }
   }
+  onKeyup(event) {
+    switch (event.key) {
+      case ' ':
+        event.stopPropagation();
+        break;
+    }
+  }
   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))));
   }

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
+const index = require('./index-75c9f0d9.js');
 
-const guxMenuCss = "gux-menu{flex-direction:column;width:fit-content;padding:8px 0;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}gux-menu .gux-arrow,gux-menu .gux-arrow::before{position:absolute;top:-3px;width:10px;height:10px;background:inherit}gux-menu .gux-arrow::before{visibility:visible;content:'';border-top:1px solid #b4bccb;border-left:1px solid #b4bccb;transform:rotate(45deg)}";
+const guxMenuCss = ":host{flex-direction:column;width:fit-content;padding:var(--gse-ui-flyoutMenu-padding);background-color:var(--gse-ui-flyoutMenu-backgroundColor);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 GuxMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, { role: "menu" }, index.h("slot", null), index.h("div", { class: "gux-arrow", "data-popper-arrow": true })));
+    return (index.h(index.Host, { role: "menu" }, index.h("slot", null)));
   }
 };
 GuxMenu.style = guxMenuCss;

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-b9ad66f0.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(--gux-zindex-modal, 1);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 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);
+    }
+  }
+  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);
+    }
+    else if (this.dismissButton) {
+      (_c = (_b = this.dismissButton).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+  }
+  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" }));
+    }
+  }
+  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;
+
+exports.gux_modal_legacy = GuxModalLegacy;

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

@@ -2,82 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-2c2d30d0.js');
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-b9ad66f0.js');
 
-const guxModalCss = ":host .gux-modal{position:fixed;inset:0;z-index:var(--gux-zindex-modal, 1);display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{box-shadow:0 8px 24px rgba(32, 41, 55, 0.4);position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}:host .gux-modal .gux-modal-container.gux-small{width:416px;max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:672px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:940px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 2 * 24px);max-height:calc(100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding-bottom:24px;margin:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin:0 8px 24px;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}:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button{padding-right:5px}:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button{padding-left:5px}@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 guxModalCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}slot[name=start-align-buttons]::slotted(:not(button,gux-button-slot)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host dialog{box-sizing:border-box;justify-content:space-between;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 dialog::backdrop{background:rgba(77, 97, 130, 0.8)}:host dialog .gux-modal-container{display:flex;flex-direction:column;padding:var(--gse-ui-modal-padding)}:host dialog .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host dialog .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host dialog .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 dialog .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 dialog .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host dialog .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}@media (max-width: 416px){:host dialog .gux-modal-container.gux-small,:host dialog .gux-modal-container.gux-medium,:host dialog .gux-modal-container.gux-large{width:100%;height:100%}}";
 
 const GuxModal = 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);
-    }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async showModal() {
+    this.dialogElement.showModal();
   }
-  connectedCallback() {
-    this.triggerElement = document.activeElement;
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async close() {
+    this.dialogElement.close();
   }
   componentWillLoad() {
-    const trapFocusVariant = this.trapFocus ? 'trapfocuson' : 'trapfocusoff';
-    const componentVariant = `${this.size}-${trapFocusVariant}`;
-    usage.trackComponent(this.root, { variant: componentVariant });
+    usage.trackComponent(this.root, { variant: `${this.size}` });
   }
-  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);
-    }
+  hasModalTitleSlot() {
+    return Boolean(this.root.querySelector('[slot="title"]'));
+  }
+  hasFooterButtons() {
+    return (Boolean(this.root.querySelector('[slot="start-align-buttons"]')) ||
+      Boolean(this.root.querySelector('[slot="end-align-buttons"]')));
   }
   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: {
+    return (index.h("dialog", { onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, index.h("div", { class: `gux-modal-container gux-${this.size}` }, index.h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), 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())));
+      } }, index.h("p", null, index.h("slot", { name: "content" }))), hasFooterButtons && this.renderButtonFooter())));
   }
-  // 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" }));
-    }
+  renderTitle(titleID) {
+    return (index.h("h1", { class: "gux-modal-header", id: titleID }, index.h("slot", { name: "title" })));
   }
-  getInitialFocusElement() {
-    return this.initialFocus
-      ? this.root.querySelector(this.initialFocus)
-      : undefined;
+  renderButtonFooter() {
+    return (index.h("div", { class: "gux-button-footer" }, index.h("div", { class: "gux-start-align-buttons" }, index.h("slot", { name: "start-align-buttons" })), index.h("div", { class: "gux-end-align-buttons" }, index.h("slot", { name: "end-align-buttons" }))));
   }
-  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"]')));
+  onCloseHandler() {
+    this.guxdismiss.emit();
   }
-  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();
-    }
+  onDismissHandler() {
+    this.dialogElement.close();
   }
+  static get delegatesFocus() { return true; }
   get root() { return index.getElement(this); }
 };
 GuxModal.style = guxModalCss;

package/dist/cjs/gux-month-calendar.cjs.entry.js

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const yearMonthValues = require('./year-month-values-f387f8d8.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-788d733b.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const yearMonthValues = require('./year-month-values-6028ce26.js');
+require('./get-closest-element-26894e5a.js');
 
 const changeYear = "Current year is {currentYear}, Click to change year to {changeYear}";
 const translationResources = {
 	changeYear: changeYear
 };
 
-const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:255px;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-month-calendar .gux-year-header button{color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus-visible{border-radius:4px;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:0.5}.gux-month-calendar .gux-year-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-month-calendar .gux-year-header .gux-year{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-month-calendar .gux-months{padding:24px;background-color:#fdfdfd}.gux-month-calendar .gux-months button{width:65px;height:50px;margin:2px;text-align:center;cursor:pointer;background:none;border:none;border-radius:4px;outline:none;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-month-calendar .gux-months button:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-month-calendar .gux-months button.gux-selected,.gux-month-calendar .gux-months button:hover{color:#fdfdfd;background-color:#2a60c8}.gux-month-calendar .gux-months button:disabled{color:#596373;pointer-events:none;background-color:#fdfdfd}";
+const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:var(--gse-ui-calendarMenu-width);height:var(--gse-ui-calendarMenu-height);box-shadow:var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color)}.gux-month-calendar .gux-current-month{font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);line-height:var(--gse-ui-calendarMenu-month-currentText-lineHeight);color:var(--gse-ui-calendarMenu-month-default-foregroundColor)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);line-height:var(--gse-ui-calendarMenu-day-headerText-lineHeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-month-calendar .gux-year-header button{padding:var(--gse-ui-calendarMenu-header-arrow-padding);color:inherit;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus-visible{border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));outline:var(--gse-semantic-focusRing-width) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-month-calendar .gux-year-header button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);pointer-events:none}";
 
 const GuxMonthCalendar = class {
   constructor(hostRef) {
@@ -68,6 +68,10 @@ const GuxMonthCalendar = class {
     }
     this.updateValue(value);
   }
+  isCurrentMonth(month) {
+    return (yearMonthValues.getYearMonthObject(yearMonthValues.getCurrentISOYearMonth()).year == this.year &&
+      yearMonthValues.getYearMonthObject(yearMonthValues.getCurrentISOYearMonth()).month == month);
+  }
   getMonthAriaLabel(value) {
     const { year, month } = yearMonthValues.getYearMonthObject(value);
     return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
@@ -113,7 +117,7 @@ const GuxMonthCalendar = class {
     return (index.h("div", { class: "gux-year-header" }, index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, index.h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
         currentYear: parseInt(this.year),
         changeYear: parseInt(this.year) - 1
-      }) })), index.h("div", { class: "gux-year" }, this.getYearLabel(this.year)), index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, index.h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
+      }) })), index.h("div", null, this.getYearLabel(this.year)), index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, index.h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
         currentYear: parseInt(this.year),
         changeYear: parseInt(this.year) + 1
       }) }))));
@@ -121,7 +125,7 @@ const GuxMonthCalendar = class {
   renderMonths() {
     const monthButtons = Array.from(new Array(12), (_, i) => String(i + 1).padStart(2, '0')).map(month => {
       const value = yearMonthValues.getISOYearMonth(this.year, month);
-      return (index.h("gux-month-list-item", { value: value, selected: this.isSelectedMonth(value), "aria-selected": this.isAriaSelectedMonth(value), "aria-label": this.getMonthAriaLabel(value), onClick: () => this.onMonthClick(value), disabled: this.isOutOfBounds(value) }, this.getMonthShortName(this.year, month)));
+      return (index.h("gux-month-list-item", { class: { 'gux-current-month': this.isCurrentMonth(month) }, value: value, selected: this.isSelectedMonth(value), "aria-selected": this.isAriaSelectedMonth(value), "aria-label": this.getMonthAriaLabel(value), onClick: () => this.onMonthClick(value), disabled: this.isOutOfBounds(value) }, this.getMonthShortName(this.year, month)));
     });
     return (index.h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
   }

package/dist/cjs/gux-month-list_2.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const guxList_service = require('./gux-list.service-763539a2.js');
-const getClosestElement = require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const guxList_service = require('./gux-list.service-4beaa394.js');
+const getClosestElement = require('./get-closest-element-26894e5a.js');
 
-const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:12px 16px;background-color:#fdfdfd;border:1px solid #b4bccb}";
+const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:var(--gse-ui-calendarMenu-monthBody-padding);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);box-shadow:var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color)}";
 
 const validFocusableItems = ['gux-month-list-item'];
 const GuxMonthList = class {
@@ -56,7 +56,7 @@ const GuxMonthList = class {
 };
 GuxMonthList.style = guxMonthListCss;
 
-const guxMonthListItemCss = ":host{flex:0 0 33.3%}:host([disabled]){pointer-events:none}:host([disabled='false']){pointer-events:auto}::slotted(gux-icon){width:16px;height:16px;margin-right:8px;vertical-align:middle}.gux-container{padding:4px}.gux-container button{all:unset;box-sizing:border-box;width:100%;height:49px;padding:8px 0;color:#2e394c;text-align:center;word-wrap:break-word;cursor:pointer;border:none;border-radius:4px;outline:none}.gux-container button.gux-selected{color:#fdfdfd;background:#2a60c8}.gux-container button:focus-visible:not(:disabled){outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-container button:hover:not(:disabled){color:#fdfdfd;background:#2a60c8}.gux-container button:active:not(:disabled){color:#fdfdfd;background:#2a60c8}.gux-container button:disabled{color:rgba(46, 57, 76, 0.5);cursor:default}";
+const guxMonthListItemCss = ":host{flex:0 0 33.3%}:host([disabled]){pointer-events:none}:host([disabled=false]){pointer-events:auto}.gux-container{padding-right:var(--gse-ui-calendarMenu-monthBody-gap);padding-left:var(--gse-ui-calendarMenu-monthBody-gap)}.gux-container button{all:unset;box-sizing:border-box;width:100%;height:var(--gse-ui-calendarMenu-month-monthCell-height);text-align:center;word-wrap:break-word;cursor:pointer;border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius);outline:none}.gux-container button.gux-selected{color:var(--gse-ui-calendarMenu-month-selected-foregroundColor);background:var(--gse-ui-calendarMenu-month-selected-backgroundColor)}.gux-container button:focus-visible:not(:disabled){border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-container button:hover:not(:disabled){background:var(--gse-ui-calendarMenu-month-hover-backgroundColor)}.gux-container button:disabled{cursor:default;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}";
 
 const GuxMonthListItem = class {
   constructor(hostRef) {