genesys-spark-components 3.5.0 → 3.6.0

package/dist/collection/components/beta/gux-dropdown-multi/gux-dropdown-multi.js

@@ -0,0 +1,458 @@
+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 { Component, Element, forceUpdate, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { buildI18nForComponent } from '../../../i18n';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { trackComponent } from '../../../usage-tracking';
+import translationResources from './i18n/en.json';
+import { getSearchOption } from '../../stable/gux-listbox/gux-listbox.service';
+/**
+ * @slot - for a gux-listbox-multi containing gux-option-multi children
+ */
+export class GuxDropdownMulti {
+  constructor() {
+    this.disabled = false;
+    this.required = false;
+    this.filterable = false;
+    this.expanded = false;
+    this.filter = '';
+  }
+  focusSelectedItemAfterRender(expanded) {
+    if (expanded && this.listboxElement) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.listboxElement.focus();
+          if (this.filterable) {
+            this.filterElement.focus();
+          }
+        });
+      });
+    }
+    if (!expanded) {
+      this.filter = '';
+    }
+  }
+  validateValue(newValue) {
+    if (newValue === undefined) {
+      if (this.listboxElement) {
+        this.listboxElement.value = newValue;
+      }
+      return;
+    }
+    const selectedListboxOptionElement = this.getOptionElementByValue(newValue);
+    if (selectedListboxOptionElement) {
+      this.listboxElement.value = newValue;
+      return;
+    }
+    this.value = undefined;
+  }
+  /**
+   * Gets the currently selected values.
+   */
+  getSelectedValues() {
+    var _a;
+    return Promise.resolve(((_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) || []);
+  }
+  onKeydown(event) {
+    switch (event.key) {
+      case 'Escape':
+        if (this.filterable) {
+          if (document.activeElement === this.listboxElement) {
+            return this.filterElement.focus();
+          }
+        }
+        this.collapseListbox('focusFieldButton');
+        return;
+      case 'Tab':
+        if (this.shiftTabFromFilterListbox(event)) {
+          event.preventDefault();
+          return this.filterElement.focus();
+        }
+        else if (this.shiftTabFromExpandedFilterInput(event)) {
+          event.preventDefault();
+          return this.collapseListbox('focusFieldButton');
+        }
+        else {
+          this.collapseListbox('noFocusChange');
+        }
+        return;
+      case 'ArrowDown':
+        if (this.activeElementNotListbox()) {
+          event.preventDefault();
+          this.expanded = true;
+        }
+        return;
+    }
+  }
+  onInternallistboxoptionsupdated(event) {
+    event.stopPropagation();
+    forceUpdate(this.root);
+  }
+  onGuxclearselected(event) {
+    event.stopPropagation();
+    this.value = '';
+    if (this.listboxElement) {
+      this.listboxElement.value = undefined;
+    }
+    this.validateValue(this.value);
+    this.fieldButtonElement.focus();
+  }
+  onBlur(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onFocus(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onFocusout(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onFocusin(event) {
+    this.stopPropagationOfInternalFocusEvents(event);
+  }
+  onClickOutside() {
+    this.collapseListbox('noFocusChange');
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.listboxElement = this.root.querySelector('gux-listbox-multi');
+    this.validateValue(this.value);
+  }
+  componentDidLoad() {
+    this.listboxElement.addEventListener('input', (event) => {
+      event.stopPropagation();
+      this.updateValue(event.target.value);
+    });
+    this.listboxElement.addEventListener('change', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentWillRender() {
+    this.validateValue(this.value);
+    this.listboxElement.filter = this.filter;
+  }
+  stopPropagationOfInternalFocusEvents(event) {
+    if (this.root.contains(event.relatedTarget)) {
+      return event.stopImmediatePropagation();
+    }
+  }
+  getOptionElementByValue(value) {
+    const listboxOptionElements = Array.from(this.root.querySelectorAll('gux-option-multi'));
+    const values = value ? value.split(',') : undefined;
+    if (values) {
+      return listboxOptionElements.filter(element => values.includes(element.value));
+    }
+    return;
+  }
+  fieldButtonClick() {
+    this.expanded = !this.expanded;
+  }
+  fieldButtonInputClick() {
+    if (!this.expanded) {
+      this.expanded = !this.expanded;
+    }
+  }
+  filterInput(event) {
+    event.stopPropagation();
+    this.filter = this.filterElement.value;
+  }
+  shiftTabFromExpandedFilterInput(event) {
+    return (event.shiftKey &&
+      this.filterable &&
+      this.expanded &&
+      !(document.activeElement === this.listboxElement));
+  }
+  shiftTabFromFilterListbox(event) {
+    return (event.shiftKey &&
+      this.filterable &&
+      document.activeElement === this.listboxElement);
+  }
+  activeElementNotListbox() {
+    return document.activeElement !== this.listboxElement;
+  }
+  filterKeydown(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.stopImmediatePropagation();
+        this.listboxElement.focus();
+        return;
+      case 'Enter':
+        void this.listboxElement.guxSelectActive();
+        event.preventDefault();
+        return;
+    }
+  }
+  filterKeyup(event) {
+    switch (event.key) {
+      case ' ':
+        event.preventDefault();
+        return;
+    }
+  }
+  collapseListbox(focusChange) {
+    if (this.expanded) {
+      this.expanded = false;
+    }
+    if (focusChange === 'focusFieldButton') {
+      this.fieldButtonElement.focus();
+    }
+  }
+  updateValue(newValue) {
+    if (this.value !== newValue) {
+      this.value = newValue;
+      simulateNativeEvent(this.root, 'input');
+      simulateNativeEvent(this.root, 'change');
+    }
+  }
+  getSuggestionText(filter) {
+    const filterLength = filter.length;
+    if (filterLength > 0) {
+      const option = getSearchOption(this.listboxElement, filter);
+      if (option) {
+        return option.textContent.substring(filterLength);
+      }
+    }
+    return '';
+  }
+  renderTargetDisplay() {
+    return (h("div", { class: "gux-placeholder" },
+      this.placeholder || this.i18n('noSelection'),
+      this.getSrSelectedText()));
+  }
+  getSrSelectedText() {
+    const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
+    if (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.length) {
+      return (h("span", { class: "gux-sr-only" }, this.i18n('numberSelected', {
+        numberSelected: selectedListboxOptionElement.length.toString()
+      })));
+    }
+  }
+  renderTag() {
+    const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
+    if (selectedListboxOptionElement === null || selectedListboxOptionElement === void 0 ? void 0 : selectedListboxOptionElement.length) {
+      return (h("gux-dropdown-multi-tag", { disabled: this.disabled, "number-selected": selectedListboxOptionElement.length }));
+    }
+  }
+  renderFilterInputField() {
+    if (this.expanded && this.filterable) {
+      return (h("div", { class: "gux-field gux-input-field" },
+        h("div", { class: "gux-field-content" },
+          h("div", { class: "gux-filter" },
+            h("div", { class: "gux-filter-display" },
+              h("span", { class: "gux-filter-text" }, this.filter),
+              h("span", { class: "gux-filter-suggestion" }, this.getSuggestionText(this.filter))),
+            h("div", { class: "input-and-dropdown-button" },
+              h("input", { onClick: this.fieldButtonInputClick.bind(this), placeholder: this.placeholder || this.i18n('noSelection'), class: "gux-filter-input", type: "text", "aria-label": this.i18n('filterResults'), ref: el => (this.filterElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this) }))))));
+    }
+  }
+  renderPopup() {
+    return (h("div", { slot: "popup", class: "gux-listbox-container" },
+      h("slot", null)));
+  }
+  renderTarget() {
+    return (h("div", { class: {
+        'gux-target-container': true,
+        'gux-target-container-expanded': this.expanded && this.filterable,
+        'gux-target-container-collapsed': !(this.expanded && this.filterable)
+      }, slot: "target" },
+      this.renderFilterInputField(),
+      h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() },
+        this.renderTargetContent(),
+        h("gux-icon", { class: {
+            'gux-expand-icon': true
+          }, "screenreader-text": this.i18n('dropdown'), iconName: "chevron-small-down" }))));
+  }
+  renderTargetContent() {
+    if (!(this.expanded && this.filterable)) {
+      return (h("div", { class: "gux-field-content" }, this.renderTargetDisplay()));
+    }
+  }
+  render() {
+    return [
+      h("div", { class: "gux-dropdown-container" },
+        h("gux-popup", { expanded: this.expanded, disabled: this.disabled },
+          this.renderTarget(),
+          this.renderPopup()),
+        this.renderTag())
+    ];
+  }
+  static get is() { return "gux-dropdown-multi-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-dropdown-multi.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-dropdown-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
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "filterable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filterable",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "expanded": {},
+    "filter": {}
+  }; }
+  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": []
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "focusSelectedItemAfterRender"
+    }, {
+      "propName": "value",
+      "methodName": "validateValue"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "internallistboxoptionsupdated",
+      "method": "onInternallistboxoptionsupdated",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "guxclearselected",
+      "method": "onGuxclearselected",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focus",
+      "method": "onFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusout",
+      "method": "onFocusout",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusin",
+      "method": "onFocusin",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxDropdownMulti.prototype, "onClickOutside", null);

package/dist/collection/components/beta/gux-tag/gux-tag.js

@@ -156,23 +156,6 @@ export class GuxTag {
       "attribute": "removable",
       "reflect": false,
       "defaultValue": "false"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tag icon name."
-      },
-      "attribute": "icon",
-      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -17,6 +17,7 @@ import { getSearchOption } from '../gux-listbox/gux-listbox.service';
 export class GuxDropdown {
   constructor() {
     this.disabled = false;
+    this.required = false;
     this.filterable = false;
     this.expanded = false;
     this.filter = '';
@@ -281,6 +282,24 @@ export class GuxDropdown {
       "reflect": false,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.js

@@ -10,7 +10,7 @@ import { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
 import { preventBrowserValidationStyling } from '../../../../../utils/dom/prevent-browser-validation-styling';
 import { trackComponent } from '../../../../../usage-tracking';
 import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
-import { hasErrorSlot, validateFormIds } from '../../gux-form-field.servce';
+import { hasErrorSlot, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.js

@@ -13,7 +13,7 @@ import { trackComponent } from '../../../../../usage-tracking';
 import { GuxFormFieldContainer } from '../../functional-components/gux-form-field-container/gux-form-field-container';
 import { GuxFormFieldError } from '../../functional-components/gux-form-field-error/gux-form-field-error';
 import { GuxFormFieldLabel } from '../../functional-components/gux-form-field-label/gux-form-field-label';
-import { hasErrorSlot, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.servce';
+import { hasErrorSlot, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.css

@@ -0,0 +1,153 @@
+.gux-form-field-container {
+  margin: 16px 0;
+}
+.gux-form-field-container.gux-beside {
+  display: flex;
+  flex-direction: row;
+}
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 4px 0;
+  font-size: 11px;
+  color: #2e394c;
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0 4px;
+  color: #ea0b0b;
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+.gux-form-field-label.gux-required::after {
+  font-size: 12px;
+  color: #ea0b0b;
+  content: ' *';
+}
+.gux-form-field-label.gux-beside {
+  position: relative;
+  top: 8px;
+  width: fit-content;
+  min-width: 45px;
+  margin-right: 8px;
+}
+.gux-form-field-label.gux-above {
+  margin-bottom: 8px;
+}
+.gux-form-field-label.gux-screenreader {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+:host {
+  display: block;
+  color: #2e394c;
+}
+::slotted(label) {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 16px;
+}
+::slotted(select) {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  height: 32px;
+  padding: 0 32px 0 12px;
+  margin: 0;
+  color: #2e394c;
+  background-color: #f6f7f9;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+::slotted(select)::placeholder {
+  color: #596373;
+  opacity: 1;
+}
+.gux-input-and-error-container {
+  flex-grow: 1;
+}
+.gux-input-and-error-container .gux-input .gux-input-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.6667;
+  color: #2e394c;
+  background-color: #f6f7f9;
+  background-image: none;
+  border: 1px solid #6b7585;
+  border-radius: 4px;
+}
+.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon {
+  color: #2a60c8;
+}
+.gux-input-and-error-container .gux-input .gux-input-container select {
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 0;
+  height: 32px;
+  padding: 0 32px 0 12px;
+  margin: 0;
+  color: #2e394c;
+  background-color: #f6f7f9;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.gux-input-and-error-container .gux-input .gux-input-container gux-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  margin: 8px;
+  pointer-events: none;
+}
+.gux-input-and-error-container .gux-input .gux-input-container:focus-within {
+  border-color: #2a60c8;
+  outline: none;
+  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
+}
+.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
+  border-color: #ea0b0b;
+}