genesys-spark-components 3.5.0 → 3.6.0

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

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