genesys-spark-components 3.30.0 → 3.31.0

package/dist/collection/components/stable/gux-advanced-dropdown/gux-advanced-dropdown.js

@@ -1,8 +1,19 @@
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+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;
+};
+import { h } from '@stencil/core';
 import { trackComponent } from '../../../usage-tracking';
 import { buildI18nForComponent } from '../../../i18n';
 import advancedDropDownResources from './i18n/en.json';
 import { onMutation } from '../../../utils/dom/on-mutation';
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
 export class GuxAdvancedDropdown {
   constructor() {
     /**
@@ -45,10 +56,8 @@ export class GuxAdvancedDropdown {
   async setLabeledBy(id) {
     this.srLabelledby = id;
   }
-  onFocusOut(e) {
-    if (!e.relatedTarget || !this.root.contains(e.relatedTarget)) {
-      this.closeDropdown(false);
-    }
+  onClickOutside() {
+    this.closeDropdown(false);
   }
   async componentWillLoad() {
     trackComponent(this.root);
@@ -62,24 +71,9 @@ export class GuxAdvancedDropdown {
     this.slotObserver.disconnect();
   }
   render() {
-    return (h("div", { class: `gux-dropdown
-        ${this.disabled ? 'gux-disabled' : ''}
-        ${this.opened ? 'gux-active' : ''}` },
-      h("div", { class: "gux-select-field", onMouseDown: () => this.inputMouseDown() },
-        h("a", { ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) },
-          this.placeholder && !this.value && (h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)),
-          this.value && (h("span", { class: "gux-select-value", title: this.value }, this.value))),
-        h("div", { class: "gux-icon-wrapper" },
-          h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" }))),
-      h("div", { class: `gux-advanced-dropdown-menu ${this.opened ? 'gux-opened' : ''}` },
-        h("div", { class: "gux-dropdown-menu-container" },
-          h("gux-form-field-search", { "label-position": "screenreader" },
-            h("label", { slot: "label" }, this.i18n('searchAria')),
-            h("input", { slot: "input", type: "search", onInput: (event) => {
-                this.handleSearchInput(event);
-              }, ref: el => (this.searchInput = el) })),
-          h("div", { class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) },
-            h("slot", null))))));
+    return (h("gux-popup", { expanded: this.opened, disabled: this.disabled }, h("div", { slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { class: "gux-select-value", title: this.value }, this.value))), h("div", { class: "gux-icon-wrapper" }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" }))), h("div", { slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { "label-position": "screenreader" }, h("label", { slot: "label" }, this.i18n('searchAria')), h("input", { slot: "input", type: "search", onInput: (event) => {
+        this.handleSearchInput(event);
+      }, ref: el => (this.searchInput = el) })), h("div", { class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", null))))));
   }
   updateSelectionState() {
     this.selectionOptions = this.getSelectionOptions();
@@ -204,190 +198,200 @@ export class GuxAdvancedDropdown {
   }
   static get is() { return "gux-advanced-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-advanced-dropdown.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-advanced-dropdown.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable the input and prevent interactions."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The dropdown's placeholder."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "noFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the list should filter its current options."
-      },
-      "attribute": "no-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "filterDebounceTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Timeout between filter input changed and event being emitted."
-      },
-      "attribute": "filter-debounce-timeout",
-      "reflect": false,
-      "defaultValue": "500"
-    },
-    "dropdownHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "CSS string used to set the maximum height of the dropdown option container. Default is set to 10 options as defined by UX."
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-advanced-dropdown.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-advanced-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable the input and prevent interactions."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "dropdown-height",
-      "reflect": false,
-      "defaultValue": "'320px'"
-    }
-  }; }
-  static get states() { return {
-    "srLabelledby": {},
-    "opened": {},
-    "currentlySelectedOption": {},
-    "selectionOptions": {}
-  }; }
-  static get events() { return [{
-      "method": "input",
-      "name": "input",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the value of the advanced dropdown changes."
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The dropdown's placeholder."
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "filter",
-      "name": "filter",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the filter of the advanced dropdown changes."
+      "noFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the list should filter its current options."
+        },
+        "attribute": "no-filter",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "getSelectedValues": {
-      "complexType": {
-        "signature": "() => Promise<string[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "filterDebounceTimeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
-        "return": "Promise<string[]>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Timeout between filter input changed and event being emitted."
+        },
+        "attribute": "filter-debounce-timeout",
+        "reflect": false,
+        "defaultValue": "500"
       },
-      "docs": {
-        "text": "Gets the currently selected values.",
-        "tags": [{
-            "name": "returns",
-            "text": "The array of selected values."
-          }]
+      "dropdownHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS string used to set the maximum height of the dropdown option container. Default is set to 10 options as defined by UX."
+        },
+        "attribute": "dropdown-height",
+        "reflect": false,
+        "defaultValue": "'320px'"
       }
-    },
-    "setLabeledBy": {
-      "complexType": {
-        "signature": "(id: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "srLabelledby": {},
+      "opened": {},
+      "currentlySelectedOption": {},
+      "selectionOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "input",
+        "name": "input",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the value of the advanced dropdown changes."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "filter",
+        "name": "filter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the filter of the advanced dropdown changes."
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSelectedValues": {
+        "complexType": {
+          "signature": "() => Promise<string[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string[]>"
+        },
+        "docs": {
+          "text": "Gets the currently selected values.",
+          "tags": [{
+              "name": "returns",
+              "text": "The array of selected values."
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "setLabeledBy": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "root"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "watchValue"
-    }]; }
-  static get listeners() { return [{
-      "name": "focusout",
-      "method": "onFocusOut",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "watchValue"
+      }];
+  }
 }
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxAdvancedDropdown.prototype, "onClickOutside", null);

package/dist/collection/components/stable/gux-breadcrumbs/breadcrumb-item/gux-breadcrumb-item.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { logError } from '../../../../utils/error/log-error';
 export class GuxBreadcrumbItem {
   getAccent() {
@@ -17,11 +17,9 @@ export class GuxBreadcrumbItem {
   }
   getBreadcrumb() {
     if (!this.href || this.isLastBreadcrumb()) {
-      return (h("span", { class: "gux-breadcrumb-content" },
-        h("slot", null)));
+      return (h("span", { class: "gux-breadcrumb-content" }, h("slot", null)));
     }
-    return (h("a", { class: "gux-breadcrumb-content gux-link", href: this.href },
-      h("slot", null)));
+    return (h("a", { class: "gux-breadcrumb-content gux-link", href: this.href }, h("slot", null)));
   }
   getSeparatorIcon(accent) {
     if (this.isLastBreadcrumb()) {
@@ -38,36 +36,40 @@ export class GuxBreadcrumbItem {
   }
   render() {
     const accent = this.getAccent();
-    return (h("span", { class: `gux-breadcrumb-generation gux-${accent}` },
-      this.getBreadcrumb(),
-      this.getSeparatorIcon(accent)));
+    return (h("span", { class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon(accent)));
   }
   static get is() { return "gux-breadcrumb-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-breadcrumb-item.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-breadcrumb-item.css"]
-  }; }
-  static get properties() { return {
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "href",
-      "reflect": false
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-breadcrumb-item.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-breadcrumb-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "href",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "root"; }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../i18n';
 import { trackComponent } from '../../../usage-tracking';
 import breadcrumbsResources from './i18n/en.json';
@@ -13,41 +13,46 @@ export class GuxBreadcrumbs {
     this.i18n = await buildI18nForComponent(this.root, breadcrumbsResources);
   }
   render() {
-    return (h("nav", { "aria-label": this.i18n('breadcrumbs'), class: "gux-breadcrumbs-container" },
-      h("slot", null)));
+    return (h("nav", { "aria-label": this.i18n('breadcrumbs'), class: "gux-breadcrumbs-container" }, h("slot", null)));
   }
   static get is() { return "gux-breadcrumbs"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["gux-breadcrumbs.less"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gux-breadcrumbs.css"]
-  }; }
-  static get properties() { return {
-    "accent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "GuxBreadcrumbAccent",
-        "resolved": "\"primary\" | \"secondary\"",
-        "references": {
-          "GuxBreadcrumbAccent": {
-            "location": "import",
-            "path": "./gux-breadcrumbs.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-breadcrumbs.less"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-breadcrumbs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxBreadcrumbAccent",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "GuxBreadcrumbAccent": {
+              "location": "import",
+              "path": "./gux-breadcrumbs.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "accent",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accent",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
   static get elementRef() { return "root"; }
 }