@siemens/ix 1.3.0 → 1.4.0-beta.0

package/dist/components/ix-category-filter.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as convertToRemString } from './rwd.util.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
 import { d as defineCustomElement$4 } from './filter-chip.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
@@ -36,7 +36,7 @@ var LogicalFilterOperator;
   LogicalFilterOperator["NOT_EQUAL"] = "Not equal";
 })(LogicalFilterOperator || (LogicalFilterOperator = {}));
 
-const categoryFilterCss = ".sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .reset-button.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem}.sc-ix-category-filter-h .reset-button.hide-reset-button.sc-ix-category-filter{display:none}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus-visible{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter{box-shadow:var(--theme-box-shadow-level-1);background:var(--theme-color-1);position:absolute;top:2rem;overflow-y:auto;min-width:10rem;border:var(--theme-std-bdr-1);border-radius:0.25rem;padding:0.5rem;z-index:1}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter,.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2rem;padding:0.5rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-header.sc-ix-category-filter{color:var(--theme-color-soft-text)}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-id.sc-ix-category-filter{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter{cursor:pointer}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .category-item.sc-ix-category-filter:focus{background-color:var(--theme-generic-bg-active);outline:none}.sc-ix-category-filter-h .category-selection-container.sc-ix-category-filter .plain-text-suggestion.sc-ix-category-filter{border-radius:1rem}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}";
+const categoryFilterCss = ".sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .reset-button.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem}.sc-ix-category-filter-h .reset-button.hide-reset-button.sc-ix-category-filter{display:none}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus-visible{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter{min-width:10rem !important}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter{display:flex;flex-direction:column}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .dropdown-item.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border-radius:100rem;width:auto}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item.sc-ix-category-filter{border-end-end-radius:0;border-start-end-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-start-start-radius:0;border-end-start-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .btn-toggle-operator.sc-ix-category-filter{margin-inline:0.5rem}";
 
 const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,17 +45,12 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.inputChanged = createEvent(this, "inputChanged", 7);
     this.filterChanged = createEvent(this, "filterChanged", 7);
     this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
-    this.documentClickCallback = this.handleDocumentClick.bind(this);
+    this.textInput = undefined;
     this.hasFocus = undefined;
-    this.showCategorySelection = undefined;
     this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
     this.inputValue = undefined;
     this.category = undefined;
     this.filterTokens = [];
-    this.offsetDropdownX = undefined;
-    this.offsetDropdownY = undefined;
-    this.maxHeightDropdown = undefined;
-    this.maxWidthDropdown = undefined;
     this.initialState = undefined;
     this.filterState = undefined;
     this.placeholder = undefined;
@@ -72,25 +67,13 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   watchFilterState(newValue) {
     this.setFilterState(newValue);
   }
-  watchShowCategorySelection(newValue) {
-    if (newValue) {
-      document.addEventListener('click', this.documentClickCallback);
-    }
-    else {
-      document.removeEventListener('click', this.documentClickCallback);
-    }
-  }
-  setDropdownOffset() {
-    const height = this.calculateDropdownHeight();
-    this.maxHeightDropdown = convertToRemString(height);
-  }
   componentDidLoad() {
     var _a, _b;
     if (this.initialState !== undefined) {
       this.setFilterState(this.initialState);
     }
     else if (this.filterState !== undefined) {
-      this.setFilterState(this.filterState);
+      setTimeout(() => this.setFilterState(this.filterState));
     }
     (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFormElementKeyDown.bind(this));
     (_b = this.formElement) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', (e) => e.preventDefault());
@@ -98,7 +81,6 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       console.warn('Core UI category filter - unable to add event listeners to native input element');
       return;
     }
-    this.textInput.addEventListener('click', () => (this.showCategorySelection = true));
     this.textInput.addEventListener('focusin', () => {
       this.hasFocus = true;
     });
@@ -107,7 +89,6 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.inputValue = this.textInput.value;
       const inputState = new InputState(this.inputValue, this.category);
       this.inputChanged.emit(inputState);
-      this.showCategorySelection = true;
     });
     this.textInput.addEventListener('keydown', this.handleInputElementKeyDown.bind(this));
   }
@@ -121,27 +102,27 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
     this.emitFilterEvent();
   }
-  handleDocumentClick(ev) {
-    const target = ev.target;
-    if (!this.hostElement.contains(target)) {
-      this.closeDropdown();
-    }
-  }
   closeDropdown() {
-    this.showCategorySelection = false;
-    this.category = undefined;
+    this.hostElement.querySelector('ix-dropdown').show = false;
   }
   handleFormElementKeyDown(e) {
     switch (e.code) {
       case 'Enter':
       case 'NumpadEnter':
-        if (this.category ||
-          document.activeElement.classList.contains('plain-text-suggestion')) {
-          const token = document.activeElement.getAttribute('data-id');
-          this.addToken(token, this.category);
+        if (!document.activeElement.classList.contains('dropdown-item')) {
+          return;
+        }
+        const token = document.activeElement.getAttribute('data-id');
+        if (this.hasCategorySelection()) {
+          if (this.category) {
+            this.addToken(token, this.category);
+          }
+          else if (document.activeElement.classList.contains('category-item-id')) {
+            this.selectCategory(token);
+          }
         }
-        else if (document.activeElement.classList.contains('category-item-id')) {
-          this.selectCategory(document.activeElement.getAttribute('data-id'));
+        else {
+          this.addToken(token);
         }
         e.preventDefault();
         break;
@@ -235,6 +216,9 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.textInput.value = '';
     this.inputValue = '';
     this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    if (this.category) {
+      this.category = undefined;
+    }
     this.isScrollStateDirty = true;
     this.textInput.focus();
     if (emitEvent) {
@@ -255,43 +239,17 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
     return ids;
   }
-  getCategoryLables() {
-    return this.getCategoryIds().map((id) => this.categories[id].label);
-  }
   selectCategory(category) {
     this.category = category;
     this.textInput.value = '';
     this.inputValue = '';
     this.textInput.focus();
   }
-  openCategorySelection() {
-    this.showCategorySelection = true;
-  }
   resetFilter() {
     this.closeDropdown();
     this.filterTokens = [];
     this.emitFilterEvent();
   }
-  calculateDropdownX() {
-    var _a;
-    if (!this.textInput) {
-      return 0;
-    }
-    const xInput = this.textInput.getBoundingClientRect().x;
-    const xFrom = (_a = this.formElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x;
-    return xInput - xFrom;
-  }
-  calculateDropdownY() {
-    if (!this.textInput) {
-      return 32;
-    }
-    return this.hostElement.getBoundingClientRect().height;
-  }
-  calculateDropdownHeight(top = 32) {
-    const hostTop = this.hostElement.getBoundingClientRect().top;
-    const offset = hostTop + top;
-    return window.innerHeight - offset;
-  }
   filterMultiples(value) {
     if (this.repeatCategories) {
       return true;
@@ -328,23 +286,68 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     const label = (_c = (_b = (_a = this.categories[value.id]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.nonSelectableCategories[value.id]) !== null && _c !== void 0 ? _c : value.id;
     return `${label} ${operatorString} ${value.value}`;
   }
-  componentDidRender() {
-    const newOffsetX = this.calculateDropdownX();
-    const newOffsetY = this.calculateDropdownY();
-    const newOffsetXRem = convertToRemString(newOffsetX);
-    const newOffsetYRem = convertToRemString(newOffsetY);
-    const maxWidthDropdown = this.hostElement.getBoundingClientRect().width - newOffsetX;
-    const maxHeightDropdown = this.calculateDropdownHeight(newOffsetY);
-    this.maxWidthDropdown = convertToRemString(maxWidthDropdown);
-    this.maxHeightDropdown = convertToRemString(maxHeightDropdown);
-    // This will throw a warning
-    if (newOffsetXRem !== this.offsetDropdownX) {
-      this.offsetDropdownX = newOffsetXRem;
+  getFilteredSuggestions() {
+    var _a, _b;
+    if (!((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length)) {
+      return [];
+    }
+    return (_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value));
+  }
+  hasCategorySelection() {
+    return this.categories !== undefined;
+  }
+  displayDropdown() {
+    if (this.hasCategorySelection()) {
+      return true;
+    }
+    if (this.suggestions !== undefined) {
+      return this.getFilteredSuggestions().length > 0;
+    }
+    return false;
+  }
+  renderPlainSuggestions() {
+    return (h("div", { class: "dropdown-item-container" }, this.getFilteredSuggestions().map((suggestion) => (h("button", { class: "dropdown-item", "data-id": suggestion, onClick: () => this.addToken(suggestion), key: suggestion, title: suggestion }, suggestion)))));
+  }
+  renderCategoryValues() {
+    var _a, _b;
+    return (h("div", { class: "dropdown-item-container" }, h("button", { class: "btn btn-invisible-secondary btn-icon btn-toggle-operator", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
+      ? '='
+      : '!='), h("div", { class: "dropdown-header" }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label), (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 :
+      _b.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("button", { class: "dropdown-item category-item-value", "data-id": id, title: id, key: id, onClick: () => this.addToken(id, this.category) }, `${this.categoryLogicalOperator === LogicalFilterOperator.EQUAL
+        ? '='
+        : '!='} ${id}`)))));
+  }
+  renderDropdownContent() {
+    if (this.hasCategorySelection()) {
+      if (this.category) {
+        return this.renderCategoryValues();
+      }
+      else {
+        return this.renderCategorySelection();
+      }
     }
-    // This will throw a warning
-    if (newOffsetYRem !== this.offsetDropdownY) {
-      this.offsetDropdownY = newOffsetYRem;
+    else
+      return this.renderPlainSuggestions();
+  }
+  renderCategorySelection() {
+    var _a;
+    return (h("div", { class: "dropdown-item-container" }, (_a = this.getCategoryIds()) === null || _a === void 0 ? void 0 : _a.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
+      var _a;
+      return (h("button", { class: "dropdown-item category-item category-item-id", "data-id": id, title: this.categories[id].label, key: id, onClick: () => this.selectCategory(id), tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
+    })));
+  }
+  getDropdownHeader() {
+    if (this.categories) {
+      if (this.category) {
+        return null;
+      }
+      else {
+        return this.labelCategories;
+      }
     }
+    return this.i18nPlainText;
+  }
+  componentDidRender() {
     if (this.isScrollStateDirty) {
       if (!this.tmpDisableScrollIntoView) {
         this.textInput.scrollIntoView();
@@ -359,13 +362,13 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       }, variant: "Secondary", ghost: true, oval: true, icon: "clear", size: "16", tabindex: "1" }));
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
     return (h(Host, null, h("form", { ref: (el) => (this.formElement = el) }, h("div", { class: {
         'form-control': true,
         'input-container': true,
         focus: this.hasFocus,
         'no-icon': this.hideIcon,
-      } }, h("ix-icon", { class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { class: "token-container" }, h("ul", { class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { class: {
+      } }, h("ix-icon", { class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { class: "token-container" }, h("ul", { class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
         animate__animated: true,
         animate__fadein: true,
       } }, h("ix-filter-chip", { onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
@@ -374,44 +377,11 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { class: {
         'text-input': true,
         'hide-placeholder': this.category !== undefined,
-      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder, onFocus: () => this.openCategorySelection() }))), this.getResetButton())), h("div", { class: {
-        'category-selection-container': true,
-        'd-none': !this.showCategorySelection && this.category === undefined,
-      }, style: {
-        left: this.offsetDropdownX,
-        top: this.offsetDropdownY,
-        'max-width': this.maxWidthDropdown,
-        'max-height': this.maxHeightDropdown,
-      } }, h("div", { class: {
-        'd-none': !this.showCategorySelection || this.category !== undefined,
-      } }, h("div", { class: {
-        'category-item-header': true,
-        'd-none': this.getCategoryLables().filter((value) => this.filterByInput(value)).length === 0,
-      } }, this.labelCategories), (_b = this.getCategoryIds()) === null || _b === void 0 ? void 0 :
-      _b.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
-        var _a;
-        return (h("div", { "data-id": id, title: id, class: "category-item category-item-id", onClick: () => this.selectCategory(id), tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
-      })), h("div", { class: {
-        'd-none': this.category === undefined,
-      } }, h("button", { class: "btn btn-invisible-secondary btn-icon", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
-      ? '='
-      : '!='), this.categories === undefined ? ('') : (h("div", { class: "category-item-header" }, (_c = this.categories[this.category]) === null || _c === void 0 ? void 0 : _c.label)), this.categories === undefined
-      ? ''
-      : (_d = this.categories[this.category]) === null || _d === void 0 ? void 0 : _d.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("div", { "data-id": id, title: id, class: "category-item category-item-value", onClick: () => this.addToken(id, this.category), tabindex: "0" }, `${this.categoryLogicalOperator ===
-        LogicalFilterOperator.EQUAL
-        ? '='
-        : '!='} ${id}`)))), h("div", { class: {
-        'category-item-header': true,
-        'd-none': this.category !== undefined ||
-          this.getCategoryIds().filter((value) => this.filterByInput(value)).length > 0,
-      } }, this.i18nPlainText), h("div", { class: {
-        'd-none': !((_e = this.suggestions) === null || _e === void 0 ? void 0 : _e.length) || this.category !== undefined,
-      } }, (_f = this.suggestions) === null || _f === void 0 ? void 0 : _f.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((suggestion) => (h("div", { "data-id": suggestion, class: "category-item plain-text-suggestion", onClick: () => this.addToken(suggestion), tabindex: "0" }, suggestion)))))));
+      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder }))), this.getResetButton())), h("ix-dropdown", { closeBehavior: "outside", trigger: this.textInput, header: this.getDropdownHeader(), class: { 'd-none': !this.displayDropdown() } }, this.renderDropdownContent())));
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "filterState": ["watchFilterState"],
-    "showCategorySelection": ["watchShowCategorySelection"]
+    "filterState": ["watchFilterState"]
   }; }
   static get style() { return categoryFilterCss; }
 }, [2, "ix-category-filter", {
@@ -427,28 +397,29 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "tmpDisableScrollIntoView": [4, "tmp-disable-scroll-into-view"],
     "labelCategories": [1, "label-categories"],
     "i18nPlainText": [1, "i-1-8n-plain-text"],
+    "textInput": [32],
     "hasFocus": [32],
-    "showCategorySelection": [32],
     "categoryLogicalOperator": [32],
     "inputValue": [32],
     "category": [32],
-    "filterTokens": [32],
-    "offsetDropdownX": [32],
-    "offsetDropdownY": [32],
-    "maxHeightDropdown": [32],
-    "maxWidthDropdown": [32]
-  }, [[9, "resize", "setDropdownOffset"]]]);
+    "filterTokens": [32]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-category-filter", "ix-filter-chip", "ix-icon", "ix-icon-button"];
+  const components = ["ix-category-filter", "ix-dropdown", "ix-filter-chip", "ix-icon", "ix-icon-button"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-category-filter":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, CategoryFilter);
       }
       break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
     case "ix-filter-chip":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();

package/dist/components/ix-event-list-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected:not(:active,.active) .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
+const eventListItemCss = ".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected:not(:active,.active) .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item.selected:not(:active,.active) :hover{border-color:var(--theme-event-item--border--selected) !important}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";
 
 const EventListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/ix-map-navigation.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './map-navigation-overlay.js';
 
-const mapNavigationCss = ".sc-ix-map-navigation-h{display:flex;position:relative;width:100%;height:100%}.sc-ix-map-navigation-h .map-nav.sc-ix-map-navigation{display:flex;margin-left:4rem;position:relative;height:100%;flex-grow:1;overflow:hidden}.sc-ix-map-navigation-h .map-nav-sidebar.sc-ix-map-navigation{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);-webkit-border-end:0.125rem solid var(--theme-map-navigation-separator--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation{align-items:center;position:relative;overflow:auto;height:100%;width:100%}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation .map-nav-sidebar-static-content.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header-logo--color:var(--theme-color-std-text)}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation button.sc-ix-map-navigation{margin-left:1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation:empty{height:0}.sc-ix-map-navigation-h .map-nav-title.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}.sc-ix-map-navigation-h .content.sc-ix-map-navigation{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}";
+const mapNavigationCss = ".sc-ix-map-navigation-h{display:flex;position:relative;width:100%;height:100%}.sc-ix-map-navigation-h .map-nav.sc-ix-map-navigation{display:flex;margin-left:4rem;position:relative;height:100%;flex-grow:1;overflow:hidden}.sc-ix-map-navigation-h .map-nav-sidebar.sc-ix-map-navigation{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);-webkit-border-end:0.125rem solid var(--theme-map-navigation-separator--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation{align-items:center;position:relative;overflow:auto;height:100%;width:100%}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation .map-nav-sidebar-static-content.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation button.sc-ix-map-navigation{margin-left:1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation:empty{height:0}.sc-ix-map-navigation-h .map-nav-title.sc-ix-map-navigation{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}.sc-ix-map-navigation-h .content.sc-ix-map-navigation{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}";
 
 const MapNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/ix-menu-about-news.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
-const menuAboutNewsCss = ".sc-ix-menu-about-news-h{display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:4rem;z-index:10000;transition:left var(--animate-duration);margin-left:0.5rem !important;box-shadow:var(--theme-box-shadow-level-2)}.expanded.sc-ix-menu-about-news-h{left:calc(4rem + 12rem)}.show.sc-ix-menu-about-news-h{display:none}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news{position:absolute;top:0.0625rem;left:1rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news{position:absolute;height:3.625rem;width:3rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news polygon.sc-ix-menu-about-news{fill:var(--theme-color-primary)}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news ix-icon.sc-ix-menu-about-news{margin:0.5rem;position:absolute;z-index:1}.sc-ix-menu-about-news-h .cui-popover-news-header.sc-ix-menu-about-news{margin-bottom:2rem;margin-left:4rem;margin-top:-0.25rem}.sc-ix-menu-about-news-h .popover-body.sc-ix-menu-about-news{color:var(--theme-color-std-text)}.sc-ix-menu-about-news-h .cui-popover-news-footer.sc-ix-menu-about-news{display:flex;justify-content:flex-end;margin-top:1rem}.sc-ix-menu-about-news-h #arrow.sc-ix-menu-about-news{bottom:14px;position:relative;left:-10px}.sc-ix-menu-about-news-h ix-icon-button.sc-ix-menu-about-news{top:0.5rem;right:0.5rem;position:absolute}.sc-ix-menu-about-news-h svg#arrow.sc-ix-menu-about-news{position:absolute;left:-0.5rem;bottom:0.4rem}.sc-ix-menu-about-news-h svg#arrow.sc-ix-menu-about-news path.sc-ix-menu-about-news{fill:var(--theme-color-1);stroke:var(--theme-color-weak-bdr-1)}";
+const menuAboutNewsCss = ".sc-ix-menu-about-news-h{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}.expanded.sc-ix-menu-about-news-h{left:calc(4rem + 12rem)}.show.sc-ix-menu-about-news-h{display:none}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news{position:absolute;top:0.0625rem;left:1rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news{position:absolute;height:3.625rem;width:3rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news polygon.sc-ix-menu-about-news{fill:var(--theme-color-primary)}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news ix-icon.sc-ix-menu-about-news{margin:0.5rem;position:absolute;z-index:1}.sc-ix-menu-about-news-h .cui-popover-news-header.sc-ix-menu-about-news{margin-bottom:2rem;margin-left:4rem;margin-top:-0.25rem}.sc-ix-menu-about-news-h .popover-body.sc-ix-menu-about-news{color:var(--theme-color-std-text)}.sc-ix-menu-about-news-h .cui-popover-news-footer.sc-ix-menu-about-news{display:flex;justify-content:flex-end;margin-top:1rem}.sc-ix-menu-about-news-h ix-icon-button.sc-ix-menu-about-news{top:0.5rem;right:0.5rem;position:absolute}.sc-ix-menu-about-news-h #arrow.sc-ix-menu-about-news{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}";
 
 const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -27,7 +27,7 @@ const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       } }), h("slot", null), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("button", { class: "btn btn-primary", onClick: (e) => {
         this.show = false;
         this.showMore.emit(e);
-      } }, this.i18nShowMore))) : null, h("svg", { id: "arrow", xmlns: "http://www.w3.org/2000/svg", width: "8", height: "12", viewBox: "0 0 8 12" }, h("path", { d: "M8 0 L0 6 L8 12" }))));
+      } }, this.i18nShowMore))) : null, h("div", { id: "arrow" })));
   }
   static get style() { return menuAboutNewsCss; }
 }, [6, "ix-menu-about-news", {

package/dist/components/ix-split-button.js

@@ -3,7 +3,7 @@ import { g as getButtonClasses } from './base-button.js';
 import { d as defineCustomElement$3 } from './dropdown.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const splitButtonCss = ".sc-ix-split-button-h{display:block}";
+const splitButtonCss = ".sc-ix-split-button-h{display:inline-block}.sc-ix-split-button-h .middle-gap.sc-ix-split-button{gap:0.125rem}.sc-ix-split-button-h .left-button-border.sc-ix-split-button{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
 
 const SplitButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -33,9 +33,11 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.linkTriggerRef();
   }
   render() {
-    return (h(Host, { class: "btn-group" }, h("button", { class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? h("ix-icon", { name: this.icon }) : null, " ", this.label), h("button", { ref: (r) => (this.triggerElement = r), class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
+    return (h(Host, null, h("div", { class: { 'btn-group': true, 'middle-gap': !this.outline } }, h("button", { class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled)), {
+        'left-button-border': !this.outline,
+      }), onClick: (e) => this.buttonClick.emit(e) }, this.icon ? h("ix-icon", { name: this.icon }) : null, " ", this.label), h("button", { ref: (r) => (this.triggerElement = r), class: Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled)), {
         anchor: true,
-      }) }, h("ix-icon", { name: this.splitIcon }), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null)))));
+      }) }, h("ix-icon", { name: this.splitIcon }))), h("ix-dropdown", { ref: (r) => (this.dropdownElement = r) }, h("slot", null))));
   }
   get hostElement() { return this; }
   static get style() { return splitButtonCss; }

package/dist/esm/{index-6f4f3582.js → index-6b660a23.js}

@@ -63,6 +63,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let slotName = null;
     let simple = false;
     let lastSimple = false;
@@ -91,6 +92,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
@@ -115,6 +120,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     {
         vnode.$name$ = slotName;
     }
@@ -131,6 +139,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     {
         vnode.$name$ = null;
     }
@@ -358,6 +369,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -703,6 +716,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -710,6 +725,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -811,7 +827,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -862,7 +912,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
         if (leftVNode.$tag$ === 'slot') {
             return leftVNode.$name$ === rightVNode.$name$;
         }
-        return true;
+        // this will be set if components in the build have `key` attrs set on them
+        {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
     }
     return false;
 };

package/dist/esm/index.js

@@ -1,12 +1,12 @@
 export { I as InputState, L as LogicalFilterOperator } from './logical-filter-operator-1bf83315.js';
 export { F as FlipTileState } from './flip-tile-state-28a1f8ce.js';
-export { a as Modal, M as ModalContainer } from './modal-df0a62f2.js';
+export { a as Modal, M as ModalContainer } from './modal-3618eb44.js';
 export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util-4a61a4b8.js';
 export { c as closeModal, d as dismissModal, m as modal } from './modal-utils-df50b35a.js';
 export { r as renderDefaultItem } from './default-tree-item-638c435a.js';
 export { U as UploadFileState } from './upload-file-state-631bb8a2.js';
 export { T as ThemeSwitcher, t as themeSwitcher } from './theme-switcher-9ecc9b69.js';
-import './index-6f4f3582.js';
+import './index-6b660a23.js';
 import './typed-event-ab58c27e.js';
 import './anime.es-185e9087.js';
 import './animation-b667a4c4.js';

package/dist/esm/ix-animated-tab_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-6f4f3582.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-6b660a23.js';
 import { a as anime } from './anime.es-185e9087.js';
 import { A as Animation } from './animation-b667a4c4.js';
 import { c as convertToAbbreviationString } from './rwd.util-4a61a4b8.js';

package/dist/esm/ix-application-header.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6f4f3582.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6b660a23.js';
 
-const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;padding-left:1rem;color:var(--theme-app-header-logo--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color)}:host .name{margin-left:2.5rem;margin-right:2.5rem}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem}";
+const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;padding-left:1rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color)}:host .name{margin-left:2.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color)}";
 
 const ApplicationHeader = class {
   constructor(hostRef) {

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6f4f3582.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6b660a23.js';
 
 const basicNavigationCss = ".sc-ix-basic-navigation-h{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.sc-ix-basic-navigation-h ix-application-header.sc-ix-basic-navigation{z-index:calc(var(--theme-z-index-sticky) + 1)}.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{display:flex;height:calc(100% - 2.75rem);width:calc(100% - 4rem);position:relative;margin-left:4rem;overflow:auto}.hide-header.sc-ix-basic-navigation-h .content.sc-ix-basic-navigation{height:100%}";