genesys-spark-components 3.29.0 → 3.31.0

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

@@ -1,12 +1,17 @@
 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;
+  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 { Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { trackComponent } from '../../../usage-tracking';
 import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
 import { buildI18nForComponent } from '../../../i18n';
 import defaultResources from './i18n/en.json';
 export class GuxActionButton {
@@ -107,201 +112,209 @@ export class GuxActionButton {
       this.actionClick.emit();
     }
   }
+  onListClick(event) {
+    whenEventIsFrom('gux-list-item', event, () => {
+      this.isOpen = false;
+      this.dropdownButton.focus();
+    });
+  }
   async componentWillLoad() {
     trackComponent(this.root, { variant: this.type });
     this.i18n = await buildI18nForComponent(this.root, defaultResources);
   }
   render() {
-    return (h("div", { class: "gux-action-button-container" },
-      h("gux-popup", { expanded: this.isOpen, disabled: this.disabled },
-        h("div", { slot: "target", class: "gux-action-button-container" },
-          h("gux-button-slot-beta", { class: "gux-action-button", accent: this.accent },
-            h("button", { type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, this.text)),
-          h("gux-button-slot-beta", { class: "gux-dropdown-button", accent: 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(), "aria-label": this.i18n('actionButtonDropdown', {
-                buttonTitle: this.text
-              }) },
-              h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))),
-        h("div", { class: "gux-list-container", slot: "popup" },
-          h("gux-list", { ref: el => (this.listElement = el) },
-            h("slot", null))))));
+    return (h("div", { class: "gux-action-button-container" }, h("gux-popup", { expanded: this.isOpen, disabled: this.disabled }, h("div", { slot: "target", class: "gux-action-button-container" }, h("gux-button-slot-beta", { class: "gux-action-button", accent: this.accent }, h("button", { type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, this.text)), h("gux-button-slot-beta", { class: "gux-dropdown-button", accent: 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(), "aria-label": this.i18n('actionButtonDropdown', {
+        buttonTitle: this.text
+      }) }, 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-action-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-action-button.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-action-button.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "GuxButtonType",
-        "resolved": "\"button\" | \"reset\" | \"submit\"",
-        "references": {
-          "GuxButtonType": {
-            "location": "import",
-            "path": "../gux-button/gux-button.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-action-button.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-action-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxButtonType",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {
+            "GuxButtonType": {
+              "location": "import",
+              "path": "../gux-button/gux-button.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component button type"
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'button'"
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component button type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component text."
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component text."
+        },
+        "attribute": "text",
+        "reflect": false
       },
-      "attribute": "text",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the action button."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "accent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "GuxButtonAccent",
-        "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
-        "references": {
-          "GuxButtonAccent": {
-            "location": "import",
-            "path": "../gux-button/gux-button.types"
+      "accent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxButtonAccent",
+          "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {
+            "GuxButtonAccent": {
+              "location": "import",
+              "path": "../gux-button/gux-button.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component accent (secondary or primary)."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component accent (secondary or primary)."
+        },
+        "attribute": "accent",
+        "reflect": false,
+        "defaultValue": "'secondary'"
       },
-      "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": {}
+      "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"
       }
-    }, {
-      "method": "actionClick",
-      "name": "actionClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Triggered when the action button is clicked"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+    };
+  }
+  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": {}
+        }
+      }, {
+        "method": "actionClick",
+        "name": "actionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when the action button is clicked"
+        },
+        "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
-    }]; }
+  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: 'click' })

package/dist/collection/components/stable/gux-action-toast/gux-action-toast.js

@@ -1,4 +1,4 @@
-import { Component, h, Element, Host } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { trackComponent } from '../../../usage-tracking';
 /**
  * @slot icon - Required slot for gux-icon
@@ -12,27 +12,19 @@ export class GuxActionToast {
     trackComponent(this.root);
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "gux-header" },
-        h("div", { class: "gux-icon" },
-          h("slot", { name: "icon" })),
-        h("div", { class: "gux-title" },
-          h("slot", { name: "title" }))),
-      h("div", { class: "gux-message" },
-        h("slot", { name: "message" })),
-      h("div", { class: "gux-action-buttons" },
-        h("div", { class: "gux-positive-button" },
-          h("slot", { name: "positive-button" })),
-        h("div", { class: "gux-negative-button" },
-          h("slot", { name: "negative-button" })))));
+    return (h(Host, null, h("div", { class: "gux-header" }, h("div", { class: "gux-icon" }, h("slot", { name: "icon" })), h("div", { class: "gux-title" }, h("slot", { name: "title" }))), h("div", { class: "gux-message" }, h("slot", { name: "message" })), h("div", { class: "gux-action-buttons" }, h("div", { class: "gux-positive-button" }, h("slot", { name: "positive-button" })), h("div", { class: "gux-negative-button" }, h("slot", { name: "negative-button" })))));
   }
   static get is() { return "gux-action-toast"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-action-toast.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-action-toast.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-action-toast.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-action-toast.css"]
+    };
+  }
   static get elementRef() { return "root"; }
 }