genesys-spark-components 4.26.0 → 4.26.1

package/dist/esm/gux-list.entry.js

@@ -1,65 +1,66 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-39e65a0a.js';
-import { l as last, n as next, f as first, p as previous, b as byId, c as byClosestId } from './gux-list.service-693f4ba7.js';
-import { t as trackComponent } from './usage-66f89ebe.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-da21b737.js';
+import { l as last, n as next, f as first, p as previous, b as byId, c as byClosestId } from './gux-list.service-5da368db.js';
+import { t as trackComponent } from './usage-584e4793.js';
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;padding:var(--gse-ui-menu-padding)}";
+const GuxListStyle0 = guxListCss;
 
 /**
  * @slot - collection of gux-list-item, gux-list-divider elements
  */
 const validFocusableItems = ['gux-list-item'];
 const GuxList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentWillLoad() {
-    trackComponent(this.root);
-  }
-  onKeyDown(event) {
-    switch (event.key) {
-      case 'ArrowUp':
-        event.preventDefault();
-        previous(this.root, validFocusableItems);
-        break;
-      case 'Home':
-        event.preventDefault();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    componentWillLoad() {
+        trackComponent(this.root);
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                previous(this.root, validFocusableItems);
+                break;
+            case 'Home':
+                event.preventDefault();
+                first(this.root, validFocusableItems);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                next(this.root, validFocusableItems);
+                break;
+            case 'End':
+                event.preventDefault();
+                last(this.root, validFocusableItems);
+                break;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocusFirstItem() {
         first(this.root, validFocusableItems);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        next(this.root, validFocusableItems);
-        break;
-      case 'End':
-        event.preventDefault();
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocusItemById(id) {
+        byId(this.root, validFocusableItems, id);
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocusItemByClosestId(id) {
+        byClosestId(this.root, validFocusableItems, id);
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocusLastItem() {
         last(this.root, validFocusableItems);
-        break;
     }
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocusFirstItem() {
-    first(this.root, validFocusableItems);
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocusItemById(id) {
-    byId(this.root, validFocusableItems, id);
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocusItemByClosestId(id) {
-    byClosestId(this.root, validFocusableItems, id);
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocusLastItem() {
-    last(this.root, validFocusableItems);
-  }
-  renderFocusTarget() {
-    return (h("span", { tabindex: "-1", "aria-hidden": "true" }));
-  }
-  render() {
-    return (h(Host, { role: "list" }, this.renderFocusTarget(), h("slot", null)));
-  }
-  static get delegatesFocus() { return true; }
-  get root() { return getElement(this); }
+    renderFocusTarget() {
+        return (h("span", { tabindex: "-1", "aria-hidden": "true" }));
+    }
+    render() {
+        return (h(Host, { key: 'e951d90340b5d6009e50c4ca3a26fb244450c85d', role: "list" }, this.renderFocusTarget(), h("slot", { key: '4369355cac57dd8aa4b584082bebc8070f7f9048' })));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
 };
-GuxList.style = guxListCss;
+GuxList.style = GuxListStyle0;
 
 export { GuxList as gux_list };

package/dist/esm/gux-list.service-5da368db.js

@@ -0,0 +1,73 @@
+function getRootChildren(root) {
+    const slot = root.querySelector('slot');
+    return slot ? slot.assignedElements() : Array.from(root.children);
+}
+function getGuxListFocusableItems(root, validFocusableItems) {
+    return getRootChildren(root).filter(cv => {
+        if (validFocusableItems.includes(cv.tagName.toLowerCase())) {
+            return !cv.disabled;
+        }
+        return false;
+    });
+}
+function getCurrentFocusIndex(root, validFocusableItems) {
+    return getGuxListFocusableItems(root, validFocusableItems).findIndex(cv => cv.matches(':focus-within'));
+}
+function getIndexById(root, validFocusableItems, id) {
+    return getGuxListFocusableItems(root, validFocusableItems).findIndex(cv => cv.id === id);
+}
+function getClosestIndexById(root, validFocusableItems, startOfIdString) {
+    const index = getGuxListFocusableItems(root, validFocusableItems).findIndex(cv => cv.id.startsWith(startOfIdString));
+    if (index >= 0) {
+        return index;
+    }
+    return getClosestIndexById(root, validFocusableItems, startOfIdString.slice(0, -1));
+}
+function focusMove(root, validFocusableItems, delta) {
+    const currentFocusIndex = getCurrentFocusIndex(root, validFocusableItems);
+    const maxIndex = getGuxListFocusableItems(root, validFocusableItems).length;
+    focusIndex(root, validFocusableItems, (currentFocusIndex + delta) % maxIndex);
+}
+function focusIndex(root, validFocusableItems, focusIndex) {
+    var _a;
+    const items = getGuxListFocusableItems(root, validFocusableItems);
+    while (focusIndex < 0) {
+        focusIndex += items.length;
+    }
+    (_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+}
+function getLastChildIndex(root, validFocusableItems) {
+    return getGuxListFocusableItems(root, validFocusableItems).length - 1;
+}
+function first(root, validFocusableItems) {
+    focusIndex(root, validFocusableItems, 0);
+}
+function last(root, validFocusableItems) {
+    focusIndex(root, validFocusableItems, getLastChildIndex(root, validFocusableItems));
+}
+function next(root, validFocusableItems) {
+    focusMove(root, validFocusableItems, 1);
+}
+function previous(root, validFocusableItems) {
+    focusMove(root, validFocusableItems, -1);
+}
+function byId(root, validFocusableItems, id) {
+    const index = getIndexById(root, validFocusableItems, id);
+    if (index >= 0) {
+        focusIndex(root, validFocusableItems, index);
+    }
+    else {
+        focusIndex(root, validFocusableItems, 0);
+    }
+}
+function byClosestId(root, validFocusableItems, id) {
+    const index = getClosestIndexById(root, validFocusableItems, id);
+    if (index >= 0) {
+        focusIndex(root, validFocusableItems, index);
+    }
+    else {
+        focusIndex(root, validFocusableItems, 0);
+    }
+}
+
+export { focusMove as a, byId as b, byClosestId as c, first as f, last as l, next as n, previous as p };

package/dist/esm/gux-listbox-multi.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39e65a0a.js';
-import { c as clearActiveOptions, h as hasActiveOption, s as setInitialActiveOption, a as setLastOptionActive, b as setFirstOptionActive, d as hasPreviousOption, e as setPreviousOptionActive, f as hasNextOption, i as setNextOptionActive, j as actOnActiveOption, k as goToOption, o as onClickedOption } from './gux-listbox.service-8ccb2f73.js';
-import { b as buildI18nForComponent } from './index-39266f37.js';
-import { w as whenEventIsFrom } from './when-event-is-from-6154bd60.js';
-import { s as simulateNativeEvent } from './simulate-native-event-bca7a1c9.js';
-import { t as trackComponent } from './usage-66f89ebe.js';
-import { b as afterNextRender } from './after-next-render-84ec18ad.js';
-import './get-closest-element-66f63212.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-da21b737.js';
+import { c as clearActiveOptions, h as hasActiveOption, s as setInitialActiveOption, a as setLastOptionActive, b as setFirstOptionActive, d as hasPreviousOption, e as setPreviousOptionActive, f as hasNextOption, i as setNextOptionActive, j as actOnActiveOption, k as goToOption, o as onClickedOption } from './gux-listbox.service-28ef1770.js';
+import { b as buildI18nForComponent } from './index-3f1e5ba8.js';
+import { w as whenEventIsFrom } from './when-event-is-from-2aac15f0.js';
+import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
+import { t as trackComponent } from './usage-584e4793.js';
+import { b as afterNextRender } from './after-next-render-07a41f53.js';
+import './get-closest-element-728b9f18.js';
 
 const add = "Add {name}";
 const noMatches = "No matches";
@@ -17,226 +17,227 @@ const translationResources = {
 };
 
 const guxListboxMultiCss = ":host{box-sizing:border-box;display:block;max-height:var(--gse-ui-menu-maxHeight);padding:var(--gse-ui-menu-padding);overflow-y:auto;background:var(--gse-ui-menu-backgroundColor);border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);outline:none;box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);scrollbar-color:var(--gse-ui-menu-scrollbar-foregroundColor)}.gux-message-container{display:flex;flex-direction:column;flex-wrap:nowrap;place-content:stretch center;align-items:center}.gux-message-container .gux-no-matches{box-sizing:border-box;height:var(--gse-ui-menu-option-height);font-family:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);font-size:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);font-weight:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);line-height:var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);color:var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor)}";
+const GuxListboxMultiStyle0 = guxListboxMultiCss;
 
 const GuxListboxMulti = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.internallistboxoptionsupdated = createEvent(this, "internallistboxoptionsupdated", 7);
-    this.value = undefined;
-    this.loading = false;
-    this.filter = '';
-    this.textInput = '';
-    this.filterType = 'none';
-    this.emptyMessage = undefined;
-    this.listboxOptions = [];
-    this.allListboxOptionsFiltered = undefined;
-    this.hasExactMatch = false;
-  }
-  onBlur() {
-    clearActiveOptions(this.root);
-  }
-  selectNewCustomOption(event) {
-    this.updateValue(event.detail);
-  }
-  onKeydown(event) {
-    var _a;
-    if (!hasActiveOption(this.root)) {
-      event.preventDefault();
-      setInitialActiveOption(this.root);
-      return;
-    }
-    switch (event.key) {
-      case 'Enter':
-        event.preventDefault();
-        if ((_a = this.optionCreateElement) === null || _a === void 0 ? void 0 : _a.active) {
-          void this.optionCreateElement.guxEmitInternalCreateNewOption();
-          afterNextRender(() => {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.internallistboxoptionsupdated = createEvent(this, "internallistboxoptionsupdated", 7);
+        this.value = undefined;
+        this.loading = false;
+        this.filter = '';
+        this.textInput = '';
+        this.filterType = 'none';
+        this.emptyMessage = undefined;
+        this.listboxOptions = [];
+        this.allListboxOptionsFiltered = undefined;
+        this.hasExactMatch = false;
+    }
+    onBlur() {
+        clearActiveOptions(this.root);
+    }
+    selectNewCustomOption(event) {
+        this.updateValue(event.detail);
+    }
+    onKeydown(event) {
+        var _a;
+        if (!hasActiveOption(this.root)) {
+            event.preventDefault();
             setInitialActiveOption(this.root);
-          });
+            return;
         }
-        else {
-          actOnActiveOption(this.root, value => this.updateValue(value));
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                if ((_a = this.optionCreateElement) === null || _a === void 0 ? void 0 : _a.active) {
+                    void this.optionCreateElement.guxEmitInternalCreateNewOption();
+                    afterNextRender(() => {
+                        setInitialActiveOption(this.root);
+                    });
+                }
+                else {
+                    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;
+            }
         }
-        return;
-      case 'ArrowDown':
-        event.preventDefault();
-        if (hasNextOption(this.root)) {
-          event.stopPropagation();
-          setNextOptionActive(this.root);
+        if (event.key.length === 1) {
+            goToOption(this.root, event.key);
+            return;
         }
-        else {
-          setFirstOptionActive(this.root);
+    }
+    onKeyup(event) {
+        var _a;
+        switch (event.key) {
+            case ' ':
+                if ((_a = this.optionCreateElement) === null || _a === void 0 ? void 0 : _a.active) {
+                    void this.optionCreateElement.guxEmitInternalCreateNewOption();
+                    afterNextRender(() => {
+                        setInitialActiveOption(this.root);
+                    });
+                }
+                else {
+                    actOnActiveOption(this.root, value => this.updateValue(value));
+                }
+                return;
         }
-        return;
-      case 'ArrowUp': {
-        event.preventDefault();
-        if (hasPreviousOption(this.root)) {
-          event.stopPropagation();
-          setPreviousOptionActive(this.root);
+    }
+    onMousemove() {
+        clearActiveOptions(this.root);
+    }
+    onClick(event) {
+        whenEventIsFrom('gux-option-multi', event, (option) => {
+            onClickedOption(option, value => this.updateValue(value));
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxSelectActive() {
+        actOnActiveOption(this.root, value => this.updateValue(value));
+    }
+    getHasExactMatch() {
+        let hasExactMatch = false;
+        this.hasExactMatch = false;
+        this.listboxOptions.forEach(listboxOption => {
+            var _a, _b;
+            if (((_b = (_a = listboxOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) ==
+                this.textInput.toLowerCase().trim()) {
+                hasExactMatch = true;
+                this.hasExactMatch = true;
+            }
+        });
+        return hasExactMatch;
+    }
+    updateOptionMultiCreateValue() {
+        if (this.optionCreateElement) {
+            this.optionCreateElement.value = this.textInput;
+            this.optionCreateElement.filtered =
+                !this.textInput || this.getHasExactMatch();
+        }
+    }
+    // value as an array
+    getSelectedValues() {
+        if (this.value) {
+            return this.value.split(',');
         }
         else {
-          setLastOptionActive(this.root);
+            return [];
         }
-        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) {
-    var _a;
-    switch (event.key) {
-      case ' ':
-        if ((_a = this.optionCreateElement) === null || _a === void 0 ? void 0 : _a.active) {
-          void this.optionCreateElement.guxEmitInternalCreateNewOption();
-          afterNextRender(() => {
-            setInitialActiveOption(this.root);
-          });
+    }
+    updateOnSlotChange() {
+        this.setListboxOptions();
+        this.updateListboxOptions();
+    }
+    getOptionCreateElement() {
+        this.optionCreateElement = this.root.querySelector('gux-create-option');
+    }
+    // get list of listbox option elements
+    setListboxOptions() {
+        this.listboxOptions = Array.from(this.root.children).filter(element => element.tagName === 'GUX-OPTION-MULTI');
+        this.internallistboxoptionsupdated.emit();
+    }
+    updateListboxOptions() {
+        this.listboxOptions.forEach(listboxOption => {
+            listboxOption.selected = this.getSelectedValues().includes(listboxOption.value);
+            if (this.filterType !== 'custom') {
+                listboxOption.filtered = !listboxOption.textContent
+                    .trim()
+                    .toLowerCase()
+                    .startsWith(this.textInput.toLowerCase());
+            }
+        });
+    }
+    updateValue(newValue) {
+        if (!this.getSelectedValues().includes(newValue)) {
+            const newArray = [...this.getSelectedValues(), newValue];
+            this.value = newArray.join(',');
         }
         else {
-          actOnActiveOption(this.root, value => this.updateValue(value));
+            this.value = this.getSelectedValues()
+                .filter(e => e !== newValue)
+                .join(',');
+        }
+        simulateNativeEvent(this.root, 'input');
+        simulateNativeEvent(this.root, 'change');
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+        this.setListboxOptions();
+        this.getOptionCreateElement();
+    }
+    componentWillRender() {
+        this.setListboxOptions();
+        this.updateListboxOptions();
+        this.allListboxOptionsFiltered =
+            this.listboxOptions.filter(listboxOption => !listboxOption.filtered)
+                .length === 0;
+    }
+    // The slot must always be rendered so onSlotchange can be called
+    renderHiddenSlot() {
+        return (h("div", { hidden: true }, h("slot", { onSlotchange: () => this.setListboxOptions() })));
+    }
+    renderLoading() {
+        return [
+            h("div", { class: "gux-message-container" }, h("gux-radial-loading", { context: "modal" }), h("span", null, this.i18n('loading'))),
+            this.renderHiddenSlot()
+        ];
+    }
+    renderAllListboxOptionsFiltered() {
+        if (this.allListboxOptionsFiltered) {
+            return [
+                h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
+                this.renderHiddenSlot()
+            ];
         }
-        return;
-    }
-  }
-  onMousemove() {
-    clearActiveOptions(this.root);
-  }
-  onClick(event) {
-    whenEventIsFrom('gux-option-multi', event, (option) => {
-      onClickedOption(option, value => this.updateValue(value));
-    });
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxSelectActive() {
-    actOnActiveOption(this.root, value => this.updateValue(value));
-  }
-  getHasExactMatch() {
-    let hasExactMatch = false;
-    this.hasExactMatch = false;
-    this.listboxOptions.forEach(listboxOption => {
-      var _a, _b;
-      if (((_b = (_a = listboxOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) ==
-        this.textInput.toLowerCase().trim()) {
-        hasExactMatch = true;
-        this.hasExactMatch = true;
-      }
-    });
-    return hasExactMatch;
-  }
-  updateOptionMultiCreateValue() {
-    if (this.optionCreateElement) {
-      this.optionCreateElement.value = this.textInput;
-      this.optionCreateElement.filtered =
-        !this.textInput || this.getHasExactMatch();
-    }
-  }
-  // value as an array
-  getSelectedValues() {
-    if (this.value) {
-      return this.value.split(',');
-    }
-    else {
-      return [];
-    }
-  }
-  updateOnSlotChange() {
-    this.setListboxOptions();
-    this.updateListboxOptions();
-  }
-  getOptionCreateElement() {
-    this.optionCreateElement = this.root.querySelector('gux-create-option');
-  }
-  // get list of listbox option elements
-  setListboxOptions() {
-    this.listboxOptions = Array.from(this.root.children).filter(element => element.tagName === 'GUX-OPTION-MULTI');
-    this.internallistboxoptionsupdated.emit();
-  }
-  updateListboxOptions() {
-    this.listboxOptions.forEach(listboxOption => {
-      listboxOption.selected = this.getSelectedValues().includes(listboxOption.value);
-      if (this.filterType !== 'custom') {
-        listboxOption.filtered = !listboxOption.textContent
-          .trim()
-          .toLowerCase()
-          .startsWith(this.textInput.toLowerCase());
-      }
-    });
-  }
-  updateValue(newValue) {
-    if (!this.getSelectedValues().includes(newValue)) {
-      const newArray = [...this.getSelectedValues(), newValue];
-      this.value = newArray.join(',');
-    }
-    else {
-      this.value = this.getSelectedValues()
-        .filter(e => e !== newValue)
-        .join(',');
-    }
-    simulateNativeEvent(this.root, 'input');
-    simulateNativeEvent(this.root, 'change');
-  }
-  async componentWillLoad() {
-    trackComponent(this.root);
-    this.i18n = await buildI18nForComponent(this.root, translationResources);
-    this.setListboxOptions();
-    this.getOptionCreateElement();
-  }
-  componentWillRender() {
-    this.setListboxOptions();
-    this.updateListboxOptions();
-    this.allListboxOptionsFiltered =
-      this.listboxOptions.filter(listboxOption => !listboxOption.filtered)
-        .length === 0;
-  }
-  // The slot must always be rendered so onSlotchange can be called
-  renderHiddenSlot() {
-    return (h("div", { hidden: true }, h("slot", { onSlotchange: () => this.setListboxOptions() })));
-  }
-  renderLoading() {
-    return [
-      h("div", { class: "gux-message-container" }, h("gux-radial-loading", { context: "modal" }), h("span", null, this.i18n('loading'))),
-      this.renderHiddenSlot()
-    ];
-  }
-  renderAllListboxOptionsFiltered() {
-    if (this.allListboxOptionsFiltered) {
-      return [
-        h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
-        this.renderHiddenSlot()
-      ];
-    }
-  }
-  renderCreateOptionSlot() {
-    return (h("slot", { name: "create" }));
-  }
-  render() {
-    if (this.loading) {
-      return this.renderLoading();
-    }
-    return (h(Host, { role: "listbox", "aria-multiselectable": "true", tabindex: 0 }, h("slot", { onSlotchange: () => this.updateOnSlotChange() }), this.renderAllListboxOptionsFiltered(), this.renderCreateOptionSlot()));
-  }
-  get root() { return getElement(this); }
-  static get watchers() { return {
-    "textInput": ["updateOptionMultiCreateValue"]
-  }; }
+    }
+    renderCreateOptionSlot() {
+        return (h("slot", { name: "create" }));
+    }
+    render() {
+        if (this.loading) {
+            return this.renderLoading();
+        }
+        return (h(Host, { role: "listbox", "aria-multiselectable": "true", tabindex: 0 }, h("slot", { onSlotchange: () => this.updateOnSlotChange() }), this.renderAllListboxOptionsFiltered(), this.renderCreateOptionSlot()));
+    }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "textInput": ["updateOptionMultiCreateValue"]
+    }; }
 };
-GuxListboxMulti.style = guxListboxMultiCss;
+GuxListboxMulti.style = GuxListboxMultiStyle0;
 
 export { GuxListboxMulti as gux_listbox_multi };