genesys-spark-components 3.4.2 → 3.6.0

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;
+}

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

@@ -0,0 +1,126 @@
+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, h, Prop, State } from '@stencil/core';
+import { OnMutation } from '../../../../../utils/decorator/on-mutation';
+import { onDisabledChange } from '../../../../../utils/dom/on-attribute-change';
+import { onRequiredChange } from '../../../../../utils/dom/on-attribute-change';
+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.service';
+/**
+ * @slot input - Required slot for input tag
+ * @slot label - Required slot for label tag
+ * @slot error - Optional slot for error message
+ */
+export class GuxFormFieldDropdown {
+  constructor() {
+    this.computedLabelPosition = 'above';
+    this.hasError = false;
+  }
+  onMutation() {
+    this.hasError = hasErrorSlot(this.root);
+  }
+  componentWillLoad() {
+    this.setInput();
+    this.setLabel();
+    this.hasError = hasErrorSlot(this.root);
+    trackComponent(this.root, { variant: this.variant });
+  }
+  disconnectedCallback() {
+    this.disabledObserver.disconnect();
+    this.requiredObserver.disconnect();
+  }
+  render() {
+    return (h(GuxFormFieldContainer, { labelPosition: this.computedLabelPosition },
+      h(GuxFormFieldLabel, { position: this.computedLabelPosition, required: this.required },
+        h("slot", { name: "label", onSlotchange: () => this.setLabel() })),
+      h("div", { class: "gux-input-and-error-container" },
+        h("div", { class: {
+            'gux-input': true,
+            'gux-input-error': this.hasError
+          } },
+          h("div", { class: {
+              'gux-dropdown-container': true,
+              'gux-disabled': this.disabled
+            } },
+            h("slot", null))),
+        h(GuxFormFieldError, { hasError: this.hasError },
+          h("slot", { name: "error" })))));
+  }
+  get variant() {
+    const labelPositionVariant = this.labelPosition
+      ? this.labelPosition.toLowerCase()
+      : 'none';
+    const type = 'dropdown';
+    return `${type}-${labelPositionVariant}`;
+  }
+  setInput() {
+    this.dropdownElement =
+      this.root.querySelector('gux-dropdown') ||
+        this.root.querySelector('gux-dropdown-multi-beta');
+    this.listboxElement =
+      this.root.querySelector('gux-listbox') ||
+        this.root.querySelector('gux-listbox-multi');
+    this.disabled = this.dropdownElement.disabled;
+    this.required = this.dropdownElement.required;
+    this.disabledObserver = onDisabledChange(this.dropdownElement, (disabled) => {
+      this.disabled = disabled;
+    });
+    this.requiredObserver = onRequiredChange(this.dropdownElement, (required) => {
+      this.required = required;
+    });
+    validateFormIds(this.root, this.listboxElement);
+  }
+  setLabel() {
+    this.label = this.root.querySelector('label[slot="label"]');
+    this.computedLabelPosition = getComputedLabelPosition(this.label, this.labelPosition);
+  }
+  static get is() { return "gux-form-field-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-form-field-dropdown.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-form-field-dropdown.css"]
+  }; }
+  static get properties() { return {
+    "labelPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxFormFieldLabelPosition",
+        "resolved": "\"above\" | \"beside\" | \"screenreader\"",
+        "references": {
+          "GuxFormFieldLabelPosition": {
+            "location": "import",
+            "path": "../../gux-form-field.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-position",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "computedLabelPosition": {},
+    "disabled": {},
+    "required": {},
+    "hasError": {}
+  }; }
+  static get elementRef() { return "root"; }
+}
+__decorate([
+  OnMutation({ childList: true, subtree: true })
+], GuxFormFieldDropdown.prototype, "onMutation", null);

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

@@ -16,7 +16,7 @@ import simulateNativeEvent from '../../../../../utils/dom/simulate-native-event'
 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 { clearInput, hasErrorSlot, hasContent, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.servce';
+import { clearInput, hasErrorSlot, hasContent, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.service';
 import componentResources from './i18n/en.json';
 /**
  * @slot input - Required slot for input tag

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.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-range/gux-form-field-range.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-search/gux-form-field-search.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 { clearInput, hasErrorSlot, hasContent, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.servce';
+import { clearInput, hasErrorSlot, hasContent, 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-select/gux-form-field-select.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-text-like/gux-form-field-text-like.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 { clearInput, hasErrorSlot, hasContent, getComputedLabelPosition, validateFormIds } from '../../gux-form-field.servce';
+import { clearInput, hasErrorSlot, hasContent, 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-textarea/gux-form-field-textarea.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-listbox/gux-listbox.js

@@ -4,7 +4,6 @@ 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 { logError } from '../../../utils/error/log-error';
 import translationResources from './i18n/en.json';
 /**
  * @slot - collection of gux-option elements
@@ -12,6 +11,7 @@ import translationResources from './i18n/en.json';
 export class GuxListbox {
   constructor() {
     this.filter = '';
+    this.selectedValues = [];
     this.listboxOptions = [];
   }
   onFocus() {
@@ -87,27 +87,24 @@ export class GuxListbox {
     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.value !== newValue) {
       this.value = newValue;
-      simulateNativeEvent(this.root, 'input');
-      simulateNativeEvent(this.root, 'change');
     }
+    simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent(this.root, 'change');
   }
   async componentWillLoad() {
     trackComponent(this.root);
     this.i18n = await buildI18nForComponent(this.root, translationResources);
     this.setListboxOptions();
   }
-  componentDidLoad() {
-    if (!(this.root.getAttribute('aria-label') ||
-      this.root.getAttribute('aria-labelledby'))) {
-      logError('gux-listbox', '`gux-listbox` requires a label. Either provide a label and associate it with the listbox using `aria-labelledby` or add an `aria-label` attribute to the gux-listbox element.');
-    }
-  }
   componentWillRender() {
     this.listboxOptions.forEach(listboxOption => {
       listboxOption.selected = listboxOption.value === this.value;
@@ -178,6 +175,7 @@ export class GuxListbox {
     }
   }; }
   static get states() { return {
+    "selectedValues": {},
     "listboxOptions": {},
     "allListboxOptionsFiltered": {}
   }; }

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

@@ -0,0 +1,23 @@
+:host {
+  box-sizing: border-box;
+  display: block;
+  max-height: 20rem;
+  padding: 8px 0;
+  margin: 0;
+  overflow-y: auto;
+  color: #2e394c;
+  background: #fdfdfd;
+  border: 1px solid #b4bccb;
+  border-radius: 4px;
+  outline: none;
+}
+:host(:focus) {
+  outline: none;
+  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
+}
+.gux-no-matches {
+  box-sizing: border-box;
+  height: 32px;
+  padding: 8px 16px;
+  color: #2e394c;
+}