genesys-spark-components 4.0.0-beta.45 → 4.0.0-beta.47

package/dist/collection/components/stable/gux-context-menu/tests/gux-context-menu.e2e.js

@@ -1,4 +1,11 @@
 import { a11yCheck, newSparkE2EPage } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'aria-required-children',
+    target: 'gux-context-menu,gux-list',
+    exclusionReason: 'To be addressed in COMUI-2388. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
+  }
+];
 const html = `
 <gux-context-menu>
   <gux-list-item id="list-item-1" onclick="notify(event)">Test 1</gux-list-item>
@@ -19,10 +26,10 @@ describe('gux-context-menu', () => {
   });
   it('should be a11y compliant', async () => {
     const element = await page.find('gux-context-menu');
-    await a11yCheck(page, [], 'before opening context menu');
+    await a11yCheck(page, axeExclusions, 'before opening context menu');
     await element.click();
     await page.waitForChanges();
-    await a11yCheck(page, [], 'after opening context menu');
+    await a11yCheck(page, axeExclusions, 'after opening context menu');
   });
   it('should focus first item in list on click', async () => {
     const element = await page.find('gux-context-menu');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.css

@@ -106,13 +106,17 @@
 }
 
 .gux-input-label {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: var(--gse-ui-checkbox-gap);
 }
-.gux-input-label .gux-label {
-  display: flex;
-  flex-direction: column;
+.gux-input-label .gux-label-screenreader {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 }
 
 ::slotted(input[type=checkbox]) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.js

@@ -25,6 +25,7 @@ import { validateFormIds, getSlottedInput } from "../../gux-form-field.service";
  */
 export class GuxFormFieldCheckbox {
   constructor() {
+    this.labelPosition = 'beside';
     this.disabled = undefined;
     this.hasError = false;
     this.hasHelp = false;
@@ -37,7 +38,7 @@ export class GuxFormFieldCheckbox {
     this.setInput();
     this.hasError = hasSlot(this.root, 'error');
     this.hasHelp = hasSlot(this.root, 'help');
-    trackComponent(this.root);
+    trackComponent(this.root, { variant: this.variant });
   }
   disconnectedCallback() {
     if (this.disabledObserver) {
@@ -48,7 +49,10 @@ export class GuxFormFieldCheckbox {
     return (h(Host, { class: {
         'gux-input-error': this.hasError,
         'gux-disabled': this.disabled
-      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: "gux-label" }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
+      } }, h("div", { class: "gux-form-field-container" }, h("div", { class: "gux-input-label" }, h("div", { class: "gux-input" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })), h("div", { class: `gux-label-${this.labelPosition}` }, h("slot", { name: "label" }), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))))));
+  }
+  get variant() {
+    return this.labelPosition.toLowerCase();
   }
   setInput() {
     this.input = getSlottedInput(this.root, 'input[type="checkbox"][slot="input"]');
@@ -71,6 +75,28 @@ export class GuxFormFieldCheckbox {
       "$": ["gux-form-field-checkbox.css"]
     };
   }
+  static get properties() {
+    return {
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'beside' | 'screenreader'",
+          "resolved": "\"beside\" | \"screenreader\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'beside'"
+      }
+    };
+  }
   static get states() {
     return {
       "disabled": {},

package/dist/collection/components/stable/gux-list/tests/gux-list.e2e.js

@@ -1,4 +1,11 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'aria-required-children',
+    target: 'gux-list',
+    exclusionReason: 'To be addressed in COMUI-2390. New violation picked up after upgrading from axe-core v4.4.2 to v4.8.2'
+  }
+];
 describe('gux-list', () => {
   describe('#render', () => {
     it('should render component as expected', async () => {
@@ -13,7 +20,7 @@ describe('gux-list', () => {
       `;
       const page = await newSparkE2EPage({ html });
       const element = await page.find('gux-list');
-      await a11yCheck(page);
+      await a11yCheck(page, axeExclusions);
       expect(element.outerHTML).toMatchSnapshot();
     });
   });

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.js

@@ -161,6 +161,7 @@ export class GuxListboxMulti {
       listboxOption.selected = this.getSelectedValues().includes(listboxOption.value);
       if (this.filterType !== 'custom') {
         listboxOption.filtered = !listboxOption.textContent
+          .trim()
           .toLowerCase()
           .startsWith(this.textInput.toLowerCase());
       }

package/dist/collection/components/stable/gux-modal/gux-modal.css

@@ -6,40 +6,13 @@
 /* Headings */
 /* Anchor */
 /* Custom Styles */
-/*
-@prop $gse-ui-modal-closeButtonColor // TODO: COMUI-2300 - follow up later when dismiss button has been tokenized
-@prop $gse-ui-modal-headerColor
-@prop $gse-ui-modal-backgroundColor
-@prop $gse-ui-modal-shroudColor
-@prop $gse-ui-modal-header-gap
-@prop $gse-ui-modal-padding
-@prop $gse-ui-modal-gap
-@prop $gse-ui-modal-heading-fontFamily
-@prop $gse-ui-modal-heading-lineHeight
-@prop $gse-ui-modal-heading-fontSize
-@prop $gse-ui-modal-heading-fontWeight
-@prop $gse-ui-modal-heading-letterSpacing
-@prop $gse-ui-modal-icon // TODO: COMUI-2300 - follow up later when dismiss button has been tokenized
-@prop $gse-ui-modal-small-width
-@prop $gse-ui-modal-medium-width
-@prop $gse-ui-modal-large-width
-@prop $gse-ui-modal-buttonBar-gap
-@prop $gse-ui-modal-boxShadow-x
-@prop $gse-ui-modal-boxShadow-y
-@prop $gse-ui-modal-boxShadow-blur
-@prop $gse-ui-modal-boxShadow-spread
-@prop $gse-ui-modal-boxShadow-color
-@prop $gse-ui-modal-boxShadow-type
-@prop $gse-ui-modal-borderRadius
-@prop $gse-ui-modal-opacity - Skipped (this is incoporated into the gse-ui-modal-shroudColor token and is no longer needed. Thinking about asking design team to remove this token to avoid confusion)
-*/
 ::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)) {
+slot[name=start-align-buttons]::slotted(:not(button, gux-button-slot)) {
   display: flex;
   flex-direction: row;
   gap: var(--gse-ui-modal-buttonBar-gap);
@@ -47,48 +20,41 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
   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;
+:host dialog {
   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 {
+: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 .gux-modal .gux-modal-container.gux-medium {
+:host dialog .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 {
+:host dialog .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 {
+:host dialog .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 {
+:host dialog .gux-modal-container.gux-dynamic .gux-modal-content {
   max-height: none;
 }
-:host .gux-modal .gux-modal-container .gux-modal-header {
+: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);
@@ -101,21 +67,21 @@ slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
   font-weight: var(--gse-core-fontWeight-bold);
   line-height: var(--gse-core-lineHeight-xl);
 }
-:host .gux-modal .gux-modal-container .gux-modal-content {
+: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 .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons {
+:host dialog .gux-modal-container .gux-modal-content.gux-no-buttons {
   margin-bottom: 0;
 }
-:host .gux-modal .gux-modal-container .gux-button-footer {
+:host dialog .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 {
+  :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%;
   }

package/dist/collection/components/stable/gux-modal/gux-modal.js

@@ -1,82 +1,52 @@
 import { h } from "@stencil/core";
 import { randomHTMLId } from "../../../utils/dom/random-html-";
 import { trackComponent } from "../../../utils/tracking/usage";
-/**
- * @slot content - Required slot for the modal content
- * @slot left-align-buttons - Optional slot to set gux-buttons aligned to the left of the modal
- * @slot right-align-buttons - Optional slot to set gux-buttons aligned to the left of the modal
- * @slot title - Optional slot to set the modal title
- */
 export class GuxModal {
   constructor() {
     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}`;
-    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);
-    }
+    trackComponent(this.root, { variant: `${this.size}` });
+  }
+  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();
-    return (h("div", { class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" }))), h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { class: {
+    return (h("dialog", { onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { class: {
         'gux-modal-content': true,
         'gux-no-buttons': !hasFooterButtons
-      } }, h("p", null, h("slot", { name: "content" }))), hasFooterButtons && (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-left-align-buttons" }, h("slot", { name: "left-align-buttons" })), h("div", { class: "gux-right-align-buttons" }, h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+      } }, h("p", null, 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 (h("span", { onFocus: () => this.dismissButton.focus(), tabindex: "0" }));
-    }
+  renderTitle(titleID) {
+    return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));
   }
-  getInitialFocusElement() {
-    return this.initialFocus
-      ? this.root.querySelector(this.initialFocus)
-      : undefined;
+  renderButtonFooter() {
+    return (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-start-align-buttons" }, h("slot", { name: "start-align-buttons" })), h("div", { class: "gux-end-align-buttons" }, h("slot", { name: "end-align-buttons" }))));
   }
-  hasModalTitleSlot() {
-    return Boolean(this.root.querySelector('[slot="title"]'));
+  onCloseHandler() {
+    this.guxdismiss.emit();
   }
-  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();
-    }
+  onDismissHandler() {
+    this.dialogElement.close();
   }
   static get is() { return "gux-modal"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["gux-modal.scss"]
@@ -112,41 +82,6 @@ export class GuxModal {
         "attribute": "size",
         "reflect": false,
         "defaultValue": "'dynamic'"
-      },
-      "trapFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "trap-focus",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "initialFocus": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Query selector for the element to initially focus when the modal opens\nDefaults to the first tabbable element"
-        },
-        "attribute": "initial-focus",
-        "reflect": false
       }
     };
   }
@@ -159,7 +94,7 @@ export class GuxModal {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when a user dismisses the modal (The default behaviour is to remove the component from the DOM)"
+          "text": "Fired when a user dismisses the modal"
         },
         "complexType": {
           "original": "void",
@@ -168,14 +103,43 @@ export class GuxModal {
         }
       }];
   }
-  static get elementRef() { return "root"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
+  static get methods() {
+    return {
+      "showModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
   }
+  static get elementRef() { return "root"; }
 }