@siemens/ix 1.3.0 → 1.4.0-beta.0

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

@@ -7,23 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
-import { convertToRemString } from '../utils/rwd.util';
 import { InputState } from './input-state';
 import { LogicalFilterOperator } from './logical-filter-operator';
 export class CategoryFilter {
   constructor() {
     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;
@@ -40,25 +34,13 @@ export class CategoryFilter {
   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());
@@ -66,7 +48,6 @@ export class CategoryFilter {
       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;
     });
@@ -75,7 +56,6 @@ export class CategoryFilter {
       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));
   }
@@ -89,27 +69,27 @@ export class CategoryFilter {
     }
     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;
@@ -203,6 +183,9 @@ export class CategoryFilter {
     this.textInput.value = '';
     this.inputValue = '';
     this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    if (this.category) {
+      this.category = undefined;
+    }
     this.isScrollStateDirty = true;
     this.textInput.focus();
     if (emitEvent) {
@@ -223,43 +206,17 @@ export class CategoryFilter {
     }
     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;
@@ -296,23 +253,68 @@ export class CategoryFilter {
     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 [];
     }
-    // This will throw a warning
-    if (newOffsetYRem !== this.offsetDropdownY) {
-      this.offsetDropdownY = newOffsetYRem;
+    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();
+      }
+    }
+    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();
@@ -327,13 +329,13 @@ export class CategoryFilter {
       }, 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: {
@@ -342,39 +344,7 @@ export class CategoryFilter {
       } }, (_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())));
   }
   static get is() { return "ix-category-filter"; }
   static get encapsulation() { return "scoped"; }
@@ -477,7 +447,7 @@ export class CategoryFilter {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "In certain use cases some categories are not available for selection any more.\nTo allow proper display of set filters with these categories this ID to label mapping can be populated.\nConfiguration object hash used to supply labels to the filter chips in the input field.\nEach ID maps to a string representing the label to display."
+          "text": "In certain use cases some categories may not be available for selection anymore.\nTo allow proper display of set filters with these categories this ID to label mapping can be populated.\n\nConfiguration object hash used to supply labels to the filter chips in the input field.\nEach ID maps to a string representing the label to display."
         },
         "defaultValue": "{}"
       },
@@ -610,16 +580,12 @@ export class CategoryFilter {
   }
   static get states() {
     return {
+      "textInput": {},
       "hasFocus": {},
-      "showCategorySelection": {},
       "categoryLogicalOperator": {},
       "inputValue": {},
       "category": {},
-      "filterTokens": {},
-      "offsetDropdownX": {},
-      "offsetDropdownY": {},
-      "maxHeightDropdown": {},
-      "maxWidthDropdown": {}
+      "filterTokens": {}
     };
   }
   static get events() {
@@ -670,18 +636,6 @@ export class CategoryFilter {
     return [{
         "propName": "filterState",
         "methodName": "watchFilterState"
-      }, {
-        "propName": "showCategorySelection",
-        "methodName": "watchShowCategorySelection"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "setDropdownOffset",
-        "target": "window",
-        "capture": false,
-        "passive": true
       }];
   }
 }

package/dist/collection/components/date-picker/date-picker.js

@@ -51,11 +51,11 @@ export class DatePicker {
     return DateTime.fromFormat(this.from, this.format).month;
   }
   onDone() {
-    var _a;
+    var _a, _b;
     this.done.emit(this.getOutputFormat());
     this.dateSelect.emit({
-      from: this.start.toFormat(this.format),
-      to: (_a = this.end) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      from: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      to: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
     });
   }
   onDateChange() {

package/dist/collection/components/event-list-item/event-list-item.css

@@ -43,6 +43,7 @@
   border-radius: 0.25rem;
   background-color: var(--theme-event-item--background);
   overflow: hidden;
+  transition: 150ms;
   cursor: pointer;
   margin-bottom: 0.5rem;
 }
@@ -103,6 +104,9 @@
   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;
 }

package/dist/collection/components/map-navigation/map-navigation.css

@@ -99,7 +99,8 @@
   height: 100%;
   width: 100%;
   padding: 0 1rem;
-  --theme-app-header-logo--color: var(--theme-color-std-text);
+  --theme-app-header--color: var(--theme-map-navigation-header--color);
+  --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);
 }
 :host .map-nav-header .map-nav-header-brand button {
   margin-left: 1rem;

package/dist/collection/components/menu-about-news/menu-about-news.css

@@ -27,6 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  --margin: 0.5rem;
   display: block;
   position: fixed;
   width: 20rem;
@@ -38,8 +39,8 @@
   left: 4rem;
   z-index: 10000;
   transition: left var(--animate-duration);
-  margin-left: 0.5rem !important;
-  box-shadow: var(--theme-box-shadow-level-2);
+  margin-left: var(--margin) !important;
+  box-shadow: var(--theme-box-shadow-level-4);
 }
 :host.expanded {
   left: calc(4rem + 12rem);
@@ -78,22 +79,17 @@
   justify-content: flex-end;
   margin-top: 1rem;
 }
-:host #arrow {
-  bottom: 14px;
-  position: relative;
-  left: -10px;
-}
 :host ix-icon-button {
   top: 0.5rem;
   right: 0.5rem;
   position: absolute;
 }
-:host svg#arrow {
+:host #arrow {
   position: absolute;
-  left: -0.5rem;
-  bottom: 0.4rem;
-}
-:host svg#arrow path {
-  fill: var(--theme-color-1);
-  stroke: var(--theme-color-weak-bdr-1);
+  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);
 }

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

@@ -26,7 +26,7 @@ export class MenuAboutNews {
       } }), 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 is() { return "ix-menu-about-news"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/split-button/split-button.css

@@ -7,5 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
-  display: block;
+  display: inline-block;
+}
+:host .middle-gap {
+  gap: 0.125rem;
+}
+:host .left-button-border {
+  border-top-width: 0.125rem;
+  border-right-width: 0;
+  border-left-width: 0.125rem;
+  border-bottom-width: 0.125rem;
 }

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

@@ -33,9 +33,11 @@ export class SplitButton {
     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))));
   }
   static get is() { return "ix-split-button"; }
   static get encapsulation() { return "scoped"; }

package/dist/components/application-header.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/date-picker.js

@@ -57,11 +57,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return luxon.DateTime.fromFormat(this.from, this.format).month;
   }
   onDone() {
-    var _a;
+    var _a, _b;
     this.done.emit(this.getOutputFormat());
     this.dateSelect.emit({
-      from: this.start.toFormat(this.format),
-      to: (_a = this.end) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      from: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+      to: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
     });
   }
   onDateChange() {

package/dist/components/ix-blind.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as anime } from './anime.es.js';
 
-const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;max-height:1;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
+const blindCss = ".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:1rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-custom-header.sc-ix-blind{display:flex;align-items:center}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";
 
 const Blind = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() { super(); this.__registerHost(); this.collapsedChange = createEvent(this, "collapsedChange", 7); this.collapsed = false; this.label = undefined; }