genesys-spark-components 3.4.3 → 3.7.0

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

@@ -0,0 +1,269 @@
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from '../gux-listbox/gux-listbox.service';
+import { buildI18nForComponent } from '../../../i18n';
+import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { trackComponent } from '../../../usage-tracking';
+import translationResources from './i18n/en.json';
+/**
+ * @slot - collection of gux-option-multi elements
+ */
+export class GuxListboxMulti {
+  constructor() {
+    this.filter = '';
+    this.selectedValues = [];
+    this.listboxOptions = [];
+  }
+  onFocus() {
+    setInitialActiveOption(this.root);
+  }
+  onBlur() {
+    clearActiveOptions(this.root);
+  }
+  onKeydown(event) {
+    switch (event.key) {
+      case 'Enter':
+        event.preventDefault();
+        actOnActiveOption(this.root, value => this.updateValue(value));
+        return;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (hasNextOption(this.root)) {
+          event.stopPropagation();
+          setNextOptionActive(this.root);
+        }
+        else {
+          setFirstOptionActive(this.root);
+        }
+        return;
+      case 'ArrowUp': {
+        event.preventDefault();
+        if (hasPreviousOption(this.root)) {
+          event.stopPropagation();
+          setPreviousOptionActive(this.root);
+        }
+        else {
+          setLastOptionActive(this.root);
+        }
+        return;
+      }
+      case 'Home': {
+        event.preventDefault();
+        setFirstOptionActive(this.root);
+        return;
+      }
+      case 'End': {
+        event.preventDefault();
+        setLastOptionActive(this.root);
+        return;
+      }
+      case ' ': {
+        event.preventDefault();
+        return;
+      }
+    }
+    if (event.key.length === 1) {
+      goToOption(this.root, event.key);
+      return;
+    }
+  }
+  onKeyup(event) {
+    switch (event.key) {
+      case ' ':
+        actOnActiveOption(this.root, value => this.updateValue(value));
+        return;
+    }
+  }
+  onMousemove() {
+    clearActiveOptions(this.root);
+  }
+  onClick(event) {
+    whenEventIsFrom('gux-option-multi', event, (option) => {
+      onClickedOption(option, value => this.updateValue(value));
+    });
+  }
+  validateValue() {
+    if (this.value) {
+      this.selectedValues = this.value.split(',');
+    }
+    else {
+      this.selectedValues = [];
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxSelectActive() {
+    actOnActiveOption(this.root, value => this.updateValue(value));
+  }
+  setListboxOptions() {
+    if (this.value) {
+      this.selectedValues = this.value.split(',');
+    }
+    this.listboxOptions = Array.from(this.root.children);
+    this.internallistboxoptionsupdated.emit();
+  }
+  updateValue(newValue) {
+    if (!this.selectedValues.includes(newValue)) {
+      const newArray = [...this.selectedValues, newValue];
+      this.selectedValues = newArray;
+      this.value = this.selectedValues.join(',');
+    }
+    else {
+      this.selectedValues = this.selectedValues.filter(e => e !== newValue);
+      this.value = this.selectedValues.join(',');
+    }
+    simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent(this.root, 'change');
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.setListboxOptions();
+  }
+  componentWillRender() {
+    this.listboxOptions.forEach(listboxOption => {
+      listboxOption.selected = this.selectedValues.includes(listboxOption.value);
+      listboxOption.filtered = !listboxOption.textContent
+        .toLowerCase()
+        .startsWith(this.filter.toLowerCase());
+    });
+    this.allListboxOptionsFiltered =
+      this.listboxOptions.filter(listboxOption => !listboxOption.filtered)
+        .length === 0;
+  }
+  renderAllListboxOptionsFiltered() {
+    if (this.allListboxOptionsFiltered) {
+      return (h("div", { class: "gux-no-matches" }, this.i18n('noMatches')));
+    }
+  }
+  render() {
+    return (h(Host, { role: "listbox", "aria-multiselectable": "true", tabindex: 0 },
+      h("slot", { onSlotchange: () => this.setListboxOptions() }),
+      this.renderAllListboxOptionsFiltered()));
+  }
+  static get is() { return "gux-listbox-multi"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-listbox-multi.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-listbox-multi.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "filter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "selectedValues": {},
+    "listboxOptions": {},
+    "allListboxOptionsFiltered": {}
+  }; }
+  static get events() { return [{
+      "method": "internallistboxoptionsupdated",
+      "name": "internallistboxoptionsupdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "guxSelectActive": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "validateValue"
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "onFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "onKeyup",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mousemove",
+      "method": "onMousemove",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,45 @@
+gux-option-multi {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 32px;
+  padding: 6px 12px;
+  color: #2e394c;
+  word-wrap: break-word;
+  cursor: pointer;
+}
+gux-option-multi .gux-option::before {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 7px;
+  content: '';
+  background-color: white;
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='%23596373' /%3E%3C/svg%3E");
+  border-radius: 30%;
+}
+gux-option-multi.gux-disabled {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.5;
+}
+gux-option-multi.gux-selected .gux-option::before {
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E");
+}
+gux-option-multi.gux-active,
+gux-option-multi.gux-hovered:not([disabled]) {
+  color: #fdfdfd;
+  background: #2a60c8;
+}
+gux-option-multi.gux-active.gux-selected .gux-option::before,
+gux-option-multi.gux-hovered:not([disabled]).gux-selected .gux-option::before {
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E");
+}
+gux-option-multi.gux-active:not(.gux-selected) .gux-option::before,
+gux-option-multi.gux-hovered:not([disabled]):not(.gux-selected) .gux-option::before {
+  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='none' /%3E%3C/svg%3E");
+}
+gux-option-multi.gux-filtered {
+  display: none;
+}

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

@@ -0,0 +1,167 @@
+import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+import { randomHTMLId } from '../../../../utils/dom/random-html-id';
+export class GuxOptionMulti {
+  constructor() {
+    this.active = false;
+    this.selected = false;
+    this.disabled = false;
+    this.filtered = false;
+    this.hovered = false;
+  }
+  onmouseenter() {
+    this.hovered = true;
+  }
+  onMouseleave() {
+    this.hovered = false;
+  }
+  componentWillLoad() {
+    this.root.id = this.root.id || randomHTMLId('gux-option-multi');
+  }
+  getAriaSelected() {
+    if (this.disabled) {
+      return false;
+    }
+    return this.selected ? 'true' : 'false';
+  }
+  render() {
+    return (h(Host, { role: "option", class: {
+        'gux-active': this.active,
+        'gux-disabled': this.disabled,
+        'gux-filtered': this.filtered,
+        'gux-hovered': this.hovered,
+        'gux-selected': this.selected
+      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() },
+      h("div", { class: "gux-option" },
+        h("slot", null))));
+  }
+  static get is() { return "gux-option-multi"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-option-multi.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-option-multi.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "filtered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filtered",
+      "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"
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  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/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.4.2",
+  "version": "3.6.0",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "44",
-  "buildDate": "2022-06-22T18:58:34.841331Z"
+  "build": "49",
+  "buildDate": "2022-06-30T13:50:16.128020Z"
 }

package/dist/esm/{en-07edddda.js → en-d22521fc.js}

@@ -5,6 +5,7 @@ const selectAllTableRows = "Select All Table Rows";
 const selectTableRow = "Select Table Row";
 const sortAsc = "Sorted Ascending";
 const sortDesc = "Sorted Descending";
+const colSortDirection = "{colLabel} , sort {colSortDirection}";
 const tableResources = {
 	emptyMessage: emptyMessage,
 	scrollLeft: scrollLeft,
@@ -12,7 +13,8 @@ const tableResources = {
 	selectAllTableRows: selectAllTableRows,
 	selectTableRow: selectTableRow,
 	sortAsc: sortAsc,
-	sortDesc: sortDesc
+	sortDesc: sortDesc,
+	colSortDirection: colSortDirection
 };
 
 export { tableResources as t };