genesys-spark-components 4.0.0-beta.46 → 4.0.0-beta.48

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

@@ -12,15 +12,8 @@ export class GuxOptionMulti {
     this.selected = false;
     this.disabled = false;
     this.filtered = false;
-    this.hovered = false;
     this.custom = false;
   }
-  onmouseenter() {
-    this.hovered = true;
-  }
-  onMouseleave() {
-    this.hovered = false;
-  }
   emitRemoveCustomOption() {
     if (!this.selected && this.custom) {
       this.guxremovecustomoption.emit();
@@ -58,7 +51,6 @@ export class GuxOptionMulti {
         'gux-active': this.active,
         'gux-disabled': this.disabled,
         'gux-filtered': this.filtered,
-        'gux-hovered': this.hovered,
         'gux-selected': this.selected
       }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, h("slot", null)), this.renderCustomOptionInstructions()));
   }
@@ -165,24 +157,6 @@ export class GuxOptionMulti {
         "reflect": false,
         "defaultValue": "false"
       },
-      "hovered": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hovered",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "custom": {
         "type": "boolean",
         "mutable": false,
@@ -246,19 +220,4 @@ export class GuxOptionMulti {
         "methodName": "handleActive"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "mouseenter",
-        "method": "onmouseenter",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mouseleave",
-        "method": "onMouseleave",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

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"; }
 }