genesys-spark-components 4.26.0 → 4.26.1

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

@@ -1,12 +1,12 @@
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from "@stencil/core";
 import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
@@ -18,228 +18,228 @@ import { getGuxButtonMultiAccent } from "./gux-button-multi.types";
  * @slot title - slot for icon and button text
  */
 export class GuxButtonMulti {
-  constructor() {
-    this.disabled = false;
-    this.accent = 'secondary';
-    this.isOpen = false;
-  }
-  handleKeydown(event) {
-    const composedPath = event.composedPath();
-    switch (event.key) {
-      case 'Escape':
+    constructor() {
+        this.disabled = false;
+        this.accent = 'secondary';
         this.isOpen = false;
-        if (composedPath.includes(this.listElement)) {
-          event.preventDefault();
-          this.dropdownButton.focus();
-        }
-        break;
-      case 'Tab': {
-        this.isOpen = false;
-        break;
-      }
-      case 'ArrowDown':
-      case 'Enter':
-        if (composedPath.includes(this.dropdownButton)) {
-          event.preventDefault();
-          this.isOpen = true;
-          this.focusFirstItemInPopupList();
-        }
-        break;
     }
-  }
-  handleKeyup(event) {
-    switch (event.key) {
-      case ' ': {
+    handleKeydown(event) {
         const composedPath = event.composedPath();
-        if (composedPath.includes(this.dropdownButton)) {
-          this.isOpen = true;
-          this.focusFirstItemInPopupList();
+        switch (event.key) {
+            case 'Escape':
+                this.isOpen = false;
+                if (composedPath.includes(this.listElement)) {
+                    event.preventDefault();
+                    this.dropdownButton.focus();
+                }
+                break;
+            case 'Tab': {
+                this.isOpen = false;
+                break;
+            }
+            case 'ArrowDown':
+            case 'Enter':
+                if (composedPath.includes(this.dropdownButton)) {
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.focusFirstItemInPopupList();
+                }
+                break;
         }
-        break;
-      }
-    }
-  }
-  watchDisabled(disabled) {
-    if (disabled) {
-      this.isOpen = false;
-    }
-  }
-  watchValue(isOpen) {
-    if (isOpen) {
-      this.open.emit();
-    }
-    else {
-      this.close.emit();
-    }
-  }
-  onClickOutside() {
-    this.isOpen = false;
-  }
-  toggle() {
-    if (!this.disabled) {
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.focusPopupList();
-      }
-    }
-  }
-  focusPopupList() {
-    afterNextRenderTimeout(() => {
-      this.listElement.focus();
-    });
-  }
-  focusFirstItemInPopupList() {
-    afterNextRenderTimeout(() => {
-      void this.listElement.guxFocusFirstItem();
-    });
-  }
-  onListClick(event) {
-    whenEventIsFrom('gux-list-item', event, () => {
-      this.isOpen = false;
-      this.dropdownButton.focus();
-    });
-  }
-  componentWillLoad() {
-    trackComponent(this.root, { variant: this.accent });
-  }
-  render() {
-    return (h("gux-popup", { expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { name: "title" }), h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null)))));
-  }
-  static get is() { return "gux-button-multi"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-button-multi.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-button-multi.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables the action button."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "accent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxButtonMultiAccent",
-          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {
-            "GuxButtonMultiAccent": {
-              "location": "import",
-              "path": "./gux-button-multi.types",
-              "id": "src/components/stable/gux-button-multi/gux-button-multi.types.ts::GuxButtonMultiAccent"
+    }
+    handleKeyup(event) {
+        switch (event.key) {
+            case ' ': {
+                const composedPath = event.composedPath();
+                if (composedPath.includes(this.dropdownButton)) {
+                    this.isOpen = true;
+                    this.focusFirstItemInPopupList();
+                }
+                break;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "accent",
-        "reflect": false,
-        "defaultValue": "'secondary'"
-      },
-      "isOpen": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "It is used to open or not the list."
-        },
-        "attribute": "is-open",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "open",
-        "name": "open",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the menu is open"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
         }
-      }, {
-        "method": "close",
-        "name": "close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the menu is close"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    }
+    watchDisabled(disabled) {
+        if (disabled) {
+            this.isOpen = false;
+        }
+    }
+    watchValue(isOpen) {
+        if (isOpen) {
+            this.open.emit();
+        }
+        else {
+            this.close.emit();
+        }
+    }
+    onClickOutside() {
+        this.isOpen = false;
+    }
+    toggle() {
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.focusPopupList();
+            }
         }
-      }];
-  }
-  static get elementRef() { return "root"; }
-  static get watchers() {
-    return [{
-        "propName": "disabled",
-        "methodName": "watchDisabled"
-      }, {
-        "propName": "isOpen",
-        "methodName": "watchValue"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keyup",
-        "method": "handleKeyup",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    focusPopupList() {
+        afterNextRenderTimeout(() => {
+            this.listElement.focus();
+        });
+    }
+    focusFirstItemInPopupList() {
+        afterNextRenderTimeout(() => {
+            void this.listElement.guxFocusFirstItem();
+        });
+    }
+    onListClick(event) {
+        whenEventIsFrom('gux-list-item', event, () => {
+            this.isOpen = false;
+            this.dropdownButton.focus();
+        });
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.accent });
+    }
+    render() {
+        return (h("gux-popup", { key: '995bac97d622b8ce190f5eec842bf1b786a8d9e8', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'fe5b17cd7c6e131560f40a42ac56e7d2332b322b', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: 'fbb219ede378578c007451c2cabc0dc983188d59', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: 'a9f9f8f96e226136532de594e0c4ab5041054bb6', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '972ef3236c9e8ff66d360ac7cdf0962c505c1988', name: "title" }), h("gux-icon", { key: '30b1e1707cd83f2c42c6078a00d1cb991f9112ad', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: 'efb5e6e9d53c2ecbab22192ed76c070e1e5d0e7a', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'f8b6e8ad57e97e1c52d54ffc5df558e3a5d76aa9', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '5a9150610ae95be10eaf9c2eb4fe55230f200c9c' })))));
+    }
+    static get is() { return "gux-button-multi"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-button-multi.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-button-multi.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the action button."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxButtonMultiAccent",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "GuxButtonMultiAccent": {
+                            "location": "import",
+                            "path": "./gux-button-multi.types",
+                            "id": "src/components/stable/gux-button-multi/gux-button-multi.types.ts::GuxButtonMultiAccent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It is used to open or not the list."
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "open",
+                "name": "open",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the menu is open"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the menu is close"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "isOpen",
+                "methodName": "watchValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
-  OnClickOutside({ triggerEvents: 'mousedown' })
+    OnClickOutside({ triggerEvents: 'mousedown' })
 ], GuxButtonMulti.prototype, "onClickOutside", null);

package/dist/collection/components/stable/gux-button-multi/gux-button-multi.types.js

@@ -1,7 +1,7 @@
 const guxButtonMultiAccent = ['primary', 'secondary', 'tertiary'];
 export function getGuxButtonMultiAccent(maybeGuxButtonMultiAccent) {
-  if (guxButtonMultiAccent.find(validType => validType === maybeGuxButtonMultiAccent)) {
-    return maybeGuxButtonMultiAccent;
-  }
-  return 'secondary';
+    if (guxButtonMultiAccent.find(validType => validType === maybeGuxButtonMultiAccent)) {
+        return maybeGuxButtonMultiAccent;
+    }
+    return 'secondary';
 }

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

@@ -1,19 +1,19 @@
 import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
 const axeExclusions = [];
 async function clickDropdownButton(page) {
-  return await page.click('pierce/.gux-dropdown-button > button');
+    return await page.click('pierce/.gux-dropdown-button > button');
 }
 async function pressDropdownButton(page, keypress) {
-  const element = await page.find('pierce/.gux-dropdown-button button');
-  await element.press(keypress);
+    const element = await page.find('pierce/.gux-dropdown-button button');
+    await element.press(keypress);
 }
 async function pressActionItemButton(page, keypress) {
-  const element = await page.find('gux-list-item');
-  const actionItemButton = await element.find('pierce/button');
-  await actionItemButton.press(keypress);
+    const element = await page.find('gux-list-item');
+    const actionItemButton = await element.find('pierce/button');
+    await actionItemButton.press(keypress);
 }
 describe('gux-button-multi', () => {
-  const html = `
+    const html = `
   <gux-button-multi lang="en" accent="primary">
     <span slot="title">Primary</span>
     <gux-list-item>Test 1</gux-list-item>
@@ -23,48 +23,48 @@ describe('gux-button-multi', () => {
     <gux-list-item>Test 4</gux-list-item>
   </gux-button-multi>
   `;
-  it('renders', async () => {
-    const page = await newSparkE2EPage({ html });
-    const element = await page.find('gux-button-multi');
-    await a11yCheck(page, axeExclusions);
-    expect(element).toHaveAttribute('hydrated');
-  });
-  it('should fire open and close events if not disabled on click', async () => {
-    const page = await newSparkE2EPage({ html });
-    const onOpen = await page.spyOnEvent('open');
-    const onClose = await page.spyOnEvent('close');
-    await clickDropdownButton(page);
-    await a11yCheck(page, axeExclusions);
-    await clickDropdownButton(page);
-    expect(onOpen).toHaveReceivedEventTimes(1);
-    expect(onClose).toHaveReceivedEventTimes(1);
-  });
-  it('should fire open and close events if not disabled using the keyboard', async () => {
-    const page = await newSparkE2EPage({ html });
-    const onOpen = await page.spyOnEvent('open');
-    const onClose = await page.spyOnEvent('close');
-    await pressDropdownButton(page, 'ArrowDown');
-    await pressActionItemButton(page, 'Escape');
-    expect(onOpen).toHaveReceivedEventTimes(1);
-    expect(onClose).toHaveReceivedEventTimes(1);
-  });
-  it('should not fire open event if disabled on click', async () => {
-    const page = await newSparkE2EPage({ html });
-    const onOpen = await page.spyOnEvent('open');
-    const element = await page.find('gux-button-multi');
-    element.setAttribute('disabled', 'disabled');
-    await page.waitForChanges();
-    await clickDropdownButton(page);
-    await a11yCheck(page, axeExclusions);
-    expect(onOpen).toHaveReceivedEventTimes(0);
-  });
-  it('should not fire open event if disabled using the keyboard', async () => {
-    const page = await newSparkE2EPage({ html });
-    const onOpen = await page.spyOnEvent('open');
-    const element = await page.find('gux-button-multi');
-    element.setAttribute('disabled', 'disabled');
-    await page.waitForChanges();
-    await pressDropdownButton(page, 'ArrowDown');
-    expect(onOpen).toHaveReceivedEventTimes(0);
-  });
+    it('renders', async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-button-multi');
+        await a11yCheck(page, axeExclusions);
+        expect(element).toHaveAttribute('hydrated');
+    });
+    it('should fire open and close events if not disabled on click', async () => {
+        const page = await newSparkE2EPage({ html });
+        const onOpen = await page.spyOnEvent('open');
+        const onClose = await page.spyOnEvent('close');
+        await clickDropdownButton(page);
+        await a11yCheck(page, axeExclusions);
+        await clickDropdownButton(page);
+        expect(onOpen).toHaveReceivedEventTimes(1);
+        expect(onClose).toHaveReceivedEventTimes(1);
+    });
+    it('should fire open and close events if not disabled using the keyboard', async () => {
+        const page = await newSparkE2EPage({ html });
+        const onOpen = await page.spyOnEvent('open');
+        const onClose = await page.spyOnEvent('close');
+        await pressDropdownButton(page, 'ArrowDown');
+        await pressActionItemButton(page, 'Escape');
+        expect(onOpen).toHaveReceivedEventTimes(1);
+        expect(onClose).toHaveReceivedEventTimes(1);
+    });
+    it('should not fire open event if disabled on click', async () => {
+        const page = await newSparkE2EPage({ html });
+        const onOpen = await page.spyOnEvent('open');
+        const element = await page.find('gux-button-multi');
+        element.setAttribute('disabled', 'disabled');
+        await page.waitForChanges();
+        await clickDropdownButton(page);
+        await a11yCheck(page, axeExclusions);
+        expect(onOpen).toHaveReceivedEventTimes(0);
+    });
+    it('should not fire open event if disabled using the keyboard', async () => {
+        const page = await newSparkE2EPage({ html });
+        const onOpen = await page.spyOnEvent('open');
+        const element = await page.find('gux-button-multi');
+        element.setAttribute('disabled', 'disabled');
+        await page.waitForChanges();
+        await pressDropdownButton(page, 'ArrowDown');
+        expect(onOpen).toHaveReceivedEventTimes(0);
+    });
 });

package/dist/collection/components/stable/gux-button-multi/tests/gux-button-multi.spec.js

@@ -1,16 +1,16 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxButtonMulti } from "../gux-button-multi";
 describe('gux-button-multi', () => {
-  let component;
-  beforeEach(async () => {
-    const page = await newSpecPage({
-      components: [GuxButtonMulti],
-      html: `<gux-button-multi></gux-button-multi>`,
-      language: 'en'
+    let component;
+    beforeEach(async () => {
+        const page = await newSpecPage({
+            components: [GuxButtonMulti],
+            html: `<gux-button-multi></gux-button-multi>`,
+            language: 'en'
+        });
+        component = page.rootInstance;
+    });
+    it('should build', async () => {
+        expect(component).toBeInstanceOf(GuxButtonMulti);
     });
-    component = page.rootInstance;
-  });
-  it('should build', async () => {
-    expect(component).toBeInstanceOf(GuxButtonMulti);
-  });
 });