@siemens/ix 1.5.0-beta.0 → 1.5.0-beta.2

package/dist/components/date-picker.js

@@ -6,9 +6,9 @@ import { d as defineCustomElement$3 } from './dropdown.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
 
-const datePickerCss = ".sc-ix-date-picker-h .header.sc-ix-date-picker{display:flex;align-items:center;justify-content:space-between}.sc-ix-date-picker-h .selector.sc-ix-date-picker{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}.sc-ix-date-picker-h .selector.sc-ix-date-picker .dropdown.sc-ix-date-picker{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}.sc-ix-date-picker-h .selector.sc-ix-date-picker .fontSize.sc-ix-date-picker{font-size:16px}.sc-ix-date-picker-h .selector.sc-ix-date-picker .capitalize.sc-ix-date-picker{text-transform:capitalize}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker:hover{background-color:var(--theme-select-list-item--background--hover)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.selected.sc-ix-date-picker{background-color:var(--theme-select-list-item--background--selected)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .arrowPosition.sc-ix-date-picker{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .checkPosition.sc-ix-date-picker{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .monthMargin.sc-ix-date-picker{margin-left:10px}.sc-ix-date-picker-h .wrapper.sc-ix-date-picker{display:flex}.sc-ix-date-picker-h .wrapper.sc-ix-date-picker .overflow.sc-ix-date-picker{overflow-y:scroll;max-height:250px}.sc-ix-date-picker-h .grid.sc-ix-date-picker{display:grid;grid-template-columns:repeat(8, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker{border:1px solid var(--theme-datepicker-today--border-color)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker{box-shadow:inset 0 0 0 1px white}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--selected-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.disabled.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default;pointer-events:none}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--selected-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--range-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--range-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.week-day.sc-ix-date-picker{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.empty-day.sc-ix-date-picker{border:none;background:none;cursor:initial}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.week-number.sc-ix-date-picker{font-size:10px;line-height:14px;color:var(--theme-datepicker-ix--color);border:none;background:none;cursor:initial}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:focus-visible{background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}.sc-ix-date-picker-h .button.sc-ix-date-picker{display:flex;justify-content:flex-end}.sc-ix-date-picker-h .hidden.sc-ix-date-picker{display:none}";
+const datePickerCss = ".sc-ix-date-picker-h ix-date-time-card.sc-ix-date-picker{display:inline-block}.sc-ix-date-picker-h .header.sc-ix-date-picker{display:flex;align-items:center;justify-content:space-between}.sc-ix-date-picker-h .selector.sc-ix-date-picker{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}.sc-ix-date-picker-h .selector.sc-ix-date-picker .dropdown.sc-ix-date-picker{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}.sc-ix-date-picker-h .selector.sc-ix-date-picker .fontSize.sc-ix-date-picker{font-size:16px}.sc-ix-date-picker-h .selector.sc-ix-date-picker .capitalize.sc-ix-date-picker{text-transform:capitalize}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker:hover{background-color:var(--theme-select-list-item--background--hover)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.selected.sc-ix-date-picker{background-color:var(--theme-select-list-item--background--selected)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .arrowPosition.sc-ix-date-picker{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .checkPosition.sc-ix-date-picker{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}.sc-ix-date-picker-h .selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .monthMargin.sc-ix-date-picker{margin-left:10px}.sc-ix-date-picker-h .wrapper.sc-ix-date-picker{display:flex}.sc-ix-date-picker-h .wrapper.sc-ix-date-picker .overflow.sc-ix-date-picker{overflow-y:scroll;max-height:250px}.sc-ix-date-picker-h .grid.sc-ix-date-picker{display:grid;grid-template-columns:repeat(8, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker{border:1px solid var(--theme-datepicker-today--border-color)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker{box-shadow:inset 0 0 0 1px white}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--selected-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.selected.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.range.disabled.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.today.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default;pointer-events:none}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--selected-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.selected.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--range-hover)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--range-active)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.range.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.disabled.sc-ix-date-picker{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.week-day.sc-ix-date-picker{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.empty-day.sc-ix-date-picker{border:none;background:none;cursor:initial}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.week-number.sc-ix-date-picker{font-size:10px;line-height:14px;color:var(--theme-datepicker-ix--color);border:none;background:none;cursor:initial}.sc-ix-date-picker-h .grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:focus-visible{background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}.sc-ix-date-picker-h .button.sc-ix-date-picker{display:flex;justify-content:flex-end}.sc-ix-date-picker-h .hidden.sc-ix-date-picker{display:none}";
 
-const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -48,13 +48,22 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.yearContainerRef = undefined;
   }
   get year() {
-    return luxon.DateTime.fromFormat(this.from, this.format).year;
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).year;
+    }
+    return luxon.DateTime.now().year;
   }
   get day() {
-    return luxon.DateTime.fromFormat(this.from, this.format).day;
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).day;
+    }
+    return null;
   }
   get month() {
-    return luxon.DateTime.fromFormat(this.from, this.format).month;
+    if (this.from !== null) {
+      return luxon.DateTime.fromFormat(this.from, this.format).month;
+    }
+    return luxon.DateTime.now().month;
   }
   onDone() {
     var _a, _b;
@@ -65,20 +74,24 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   onDateChange() {
-    var _a, _b, _c, _d;
+    var _a, _b;
+    const from = (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format);
+    const to = (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format);
+    this.from = from;
+    this.to = to;
     if (this.eventDelimiter) {
       this.dateChange.emit(this.getOutputFormat());
     }
     else {
       this.dateChange.emit({
-        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),
+        from,
+        to,
       });
     }
     if (this.range) {
       this.dateRangeChange.emit({
-        from: (_c = this.start) === null || _c === void 0 ? void 0 : _c.toFormat(this.format),
-        to: (_d = this.end) === null || _d === void 0 ? void 0 : _d.toFormat(this.format),
+        from,
+        to,
       });
     }
   }
@@ -174,54 +187,57 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     event.stopPropagation();
     this.tempYear = year;
   }
-  todayClass(day) {
-    const today = luxon.DateTime.local();
-    const daaay = luxon.DateTime.local(this.yearValue, this.monthValue, day);
-    const isToday = Math.ceil(daaay.diff(today, 'days').days) === 0;
+  getDayClasses(day) {
+    var _a, _b;
+    if (!day) {
+      return;
+    }
+    const todayLocal = luxon.DateTime.local();
+    const dayLocal = luxon.DateTime.local(this.yearValue, this.monthValue, day);
+    const dayIso = dayLocal.toISO();
+    const startIso = (_a = this.start) === null || _a === void 0 ? void 0 : _a.toISO();
+    const endIso = (_b = this.end) === null || _b === void 0 ? void 0 : _b.toISO();
+    const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;
     return {
       'calendar-item': true,
       'empty-day': day === undefined,
       today: isToday,
-      selected: (this.start && daaay.toISO() === this.start.toISO()) ||
-        (this.end && daaay.toISO() === this.end.toISO()),
-      range: this.start &&
-        this.end &&
-        daaay.toISO() > this.start.toISO() &&
-        daaay.toISO() < this.end.toISO(),
-      disabled: !this.isWithinMinMax(daaay) ||
-        (this.start &&
-          daaay.toISO() < this.start.toISO() &&
-          this.end === null &&
-          this.range),
+      selected: (this.start && dayIso === startIso) || (this.end && dayIso === endIso),
+      range: this.start && this.end && dayIso > startIso && dayIso < endIso,
+      disabled: !this.isWithinMinMax(dayLocal),
     };
   }
   selectDay(day) {
     const date = luxon.DateTime.local(this.yearValue, this.monthValue, day);
-    const isNotDay = day === undefined;
-    const isFirstDay = this.start === null;
-    const isLastDay = this.end === null;
-    const isPeriod = this.start !== null && this.end !== null;
     const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();
     const isSameDay = this.start && !this.end && this.start.toISO() === date.toISO();
-    if (isNotDay)
+    if (day === undefined)
       return;
     if (isSameDay) {
       this.start = null;
       this.onDateChange();
       return;
     }
-    if (!this.range) {
-      this.start = date;
-    }
-    if (this.range && isFirstDay) {
-      this.start = date;
-    }
-    if (this.range && isLastDay && isStartBeforeEnd) {
-      this.end = date;
+    if (this.range) {
+      if (this.start === null) {
+        this.start = date;
+      }
+      else if (this.end === null) {
+        if (isStartBeforeEnd) {
+          this.end = date;
+        }
+        else {
+          this.end = this.start;
+          this.start = date;
+        }
+      }
+      else {
+        this.start = date;
+        this.end = null;
+      }
     }
-    if (this.range && isPeriod) {
+    else {
       this.start = date;
-      this.end = null;
     }
     this.onDateChange();
   }
@@ -249,6 +265,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       (!_maxDate || _maxDate.toISO() >= dateIso));
   }
   componentWillLoad() {
+    if (this.from === null) {
+      this.start = null;
+    }
     if (this.year !== null) {
       this.yearValue = this.year;
     }
@@ -270,17 +289,17 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
   }
   render() {
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "Primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "Primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
         hidden: this.tempYear !== year,
         arrowPosition: true,
-      }, name: "chevron-right", size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { class: {
+      }, name: "chevron-right", size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, class: {
         arrowYear: true,
         selected: this.tempMonth - 1 === index,
       }, onClick: () => this.selectMonth((index + 1)) }, h("ix-icon", { class: {
         hidden: this.tempMonth - 1 !== index,
         checkPosition: true,
-      }, name: "single-check", size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "Primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
-      return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (h("div", { class: this.todayClass(day), onClick: () => this.selectDay(day) }, day)))));
+      }, name: "single-check", size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "Primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (h("div", { key: day, class: this.getDayClasses(day), onClick: () => this.selectDay(day) }, day)))));
     })), h("div", { class: { button: true, hidden: !this.individual } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
   }
   static get style() { return datePickerCss; }

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

@@ -1 +1 @@
-{"file":"date-picker.js","mappings":"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","names":["Info","DateTime"],"sources":["./src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=scoped","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(8, 40px);\n    grid-template-rows: repeat(7, 40px);\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n              --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n              var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n              --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n          pointer-events: none;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-ix--color);\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &:focus-visible {\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n          var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime, Info, MonthNumbers } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type DateChangeEvent = {\n  from: string;\n  to: string;\n};\n\nexport type LegacyDateChangeEvent = DateChangeEvent | string;\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  scoped: true,\n})\nexport class DatePicker {\n  private daysInWeek = 7;\n  private dayNames = Info.weekdays();\n  private monthNames = Info.months();\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string = DateTime.now().toFormat(this.format);\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  @State() yearValue = this.year;\n  @State() today = DateTime.now();\n  @State() monthValue: number = this.month;\n  @State() calendar: [number, number[]][] = [];\n\n  @State() years = [...Array(10).keys()].map((year) => year + this.year - 5);\n  @State() tempYear: number = this.yearValue;\n  @State() tempMonth: number = this.monthValue;\n  @State() start: DateTime = DateTime.fromObject({\n    year: this.year,\n    month: this.month,\n    day: this.day,\n  });\n\n  @State() end: DateTime = this.to\n    ? DateTime.fromFormat(this.to, this.format)\n    : null;\n\n  @State() dropdownButtonRef: HTMLElement;\n  @State() yearContainerRef: HTMLElement;\n\n  /**\n   * Date change event\n   *\n   * If datepicker is in range mode the event detail will be sperated with a `-` e.g.\n   * `2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`.\n   *\n   * @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string\n   */\n  @Event() dateChange: EventEmitter<LegacyDateChangeEvent>;\n\n  /**\n   * Date range change.\n   * Only triggered if datepicker is in range mode\n   *\n   * @since 1.1.0\n   */\n  @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @deprecated Will be removed in 2.0.0. Use `dateSelect`\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n  get year() {\n    return DateTime.fromFormat(this.from, this.format).year;\n  }\n\n  get day() {\n    return DateTime.fromFormat(this.from, this.format).day;\n  }\n\n  get month() {\n    return DateTime.fromFormat(this.from, this.format).month;\n  }\n\n  private onDone() {\n    this.done.emit(this.getOutputFormat());\n\n    this.dateSelect.emit({\n      from: this.start?.toFormat(this.format),\n      to: this.end?.toFormat(this.format),\n    });\n  }\n\n  private onDateChange() {\n    if (this.eventDelimiter) {\n      this.dateChange.emit(this.getOutputFormat());\n    } else {\n      this.dateChange.emit({\n        from: this.start?.toFormat(this.format),\n        to: this.end?.toFormat(this.format),\n      });\n    }\n\n    if (this.range) {\n      this.dateRangeChange.emit({\n        from: this.start?.toFormat(this.format),\n        to: this.end?.toFormat(this.format),\n      });\n    }\n  }\n\n  private getStartOfMonth(\n    year = DateTime.local().get('year'),\n    month = DateTime.local().get('month')\n  ) {\n    return DateTime.local(year, month).startOf('month');\n  }\n\n  private getEndOfMonth(\n    year = DateTime.local().get('year'),\n    month = DateTime.local().get('month')\n  ) {\n    return DateTime.local(year, month).endOf('month');\n  }\n\n  private getDaysInMonth(\n    start = this.getStartOfMonth(),\n    end = this.getEndOfMonth()\n  ) {\n    return Math.ceil(end.diff(start, 'days').days);\n  }\n\n  private calculateCalendar() {\n    const start = this.getStartOfMonth(this.yearValue, this.monthValue);\n    const end = this.getEndOfMonth(this.yearValue, this.monthValue);\n    const totalDays = this.getDaysInMonth(start, end);\n    const totalWeeks = 6;\n    const totalDaysInWeeks = totalWeeks * this.daysInWeek;\n    const startWeekDay = start.weekday;\n    const prependDays = startWeekDay - 1;\n    const appendDays = totalDaysInWeeks - totalDays - prependDays;\n    let weekdays: number[][] = [];\n    const calendar: [number, number[]][] = [];\n\n    // create list of days\n    let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);\n\n    // add start empty days\n    days.unshift(...new Array(prependDays));\n\n    // remove & add end days\n    days = days.slice(0, days.length - prependDays - appendDays);\n    days.push(...new Array(appendDays));\n\n    // make weeks\n    weekdays = days.reduce((result, item, index) => {\n      const weekIndex = Math.floor(index / this.daysInWeek);\n\n      if (!result[weekIndex]) result[weekIndex] = [];\n\n      result[weekIndex].push(item);\n\n      return result;\n    }, []);\n\n    for (let index = 1; index <= totalWeeks; index++) {\n      const week = weekdays[index - 1];\n      const firstWeekDay = week.find((day) => day !== undefined);\n      const weekNumber = firstWeekDay\n        ? DateTime.local(\n            this.yearValue,\n            this.monthValue,\n            weekdays[index - 1][0]\n          ).weekNumber\n        : undefined;\n      calendar.push([weekNumber, week]);\n    }\n\n    this.calendar = calendar;\n  }\n\n  private changeMonth(number) {\n    if (this.monthValue + number < 1) {\n      this.yearValue--;\n      this.monthValue = 12;\n    } else if (this.monthValue + number > 12) {\n      this.yearValue++;\n      this.monthValue = 1;\n    } else {\n      this.monthValue += number;\n    }\n    this.calculateCalendar();\n  }\n\n  private selectMonth(month: MonthNumbers) {\n    this.monthValue = month;\n    this.yearValue = this.tempYear;\n    this.tempMonth = month;\n  }\n\n  private infiniteScrollYears() {\n    const scroll = this.yearContainerRef.scrollTop;\n    const maxScroll = this.yearContainerRef.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      scroll + this.yearContainerRef.getBoundingClientRect().height ===\n      maxScroll;\n    const limit = 200;\n\n    if (this.years.length > limit) return;\n\n    if (atTop) {\n      this.years = [\n        ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),\n        ...this.years,\n      ];\n      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });\n    }\n\n    if (atBottom) {\n      this.years = [\n        ...this.years,\n        ...[...Array(5).keys()].map(\n          (year) => year + this.years[this.years.length - 1]\n        ),\n      ];\n      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });\n    }\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private todayClass(day: number) {\n    const today = DateTime.local();\n    const daaay = DateTime.local(this.yearValue, this.monthValue, day);\n    const isToday = Math.ceil(daaay.diff(today, 'days').days) === 0;\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: isToday,\n      selected:\n        (this.start && daaay.toISO() === this.start.toISO()) ||\n        (this.end && daaay.toISO() === this.end.toISO()),\n      range:\n        this.start &&\n        this.end &&\n        daaay.toISO() > this.start.toISO() &&\n        daaay.toISO() < this.end.toISO(),\n      disabled:\n        !this.isWithinMinMax(daaay) ||\n        (this.start &&\n          daaay.toISO() < this.start.toISO() &&\n          this.end === null &&\n          this.range),\n    };\n  }\n\n  private selectDay(day: number) {\n    const date = DateTime.local(this.yearValue, this.monthValue, day);\n    const isNotDay = day === undefined;\n    const isFirstDay = this.start === null;\n    const isLastDay = this.end === null;\n    const isPeriod = this.start !== null && this.end !== null;\n    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();\n    const isSameDay =\n      this.start && !this.end && this.start.toISO() === date.toISO();\n\n    if (isNotDay) return;\n\n    if (isSameDay) {\n      this.start = null;\n      this.onDateChange();\n      return;\n    }\n\n    if (!this.range) {\n      this.start = date;\n    }\n\n    if (this.range && isFirstDay) {\n      this.start = date;\n    }\n\n    if (this.range && isLastDay && isStartBeforeEnd) {\n      this.end = date;\n    }\n\n    if (this.range && isPeriod) {\n      this.start = date;\n      this.end = null;\n    }\n\n    this.onDateChange();\n  }\n\n  private getOutputFormat() {\n    if (!this.start) {\n      return null;\n    }\n\n    if (!this.end) {\n      return this.start.toFormat(this.format);\n    }\n\n    return [\n      this.start.toFormat(this.format),\n      this.end.toFormat(this.format),\n    ].join(this.eventDelimiter);\n  }\n\n  private isWithinMinMax(date: DateTime) {\n    const dateIso = date.toISO();\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : null;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : null;\n    return (\n      (!_minDate || _minDate.toISO() <= dateIso) &&\n      (!_maxDate || _maxDate.toISO() >= dateIso)\n    );\n  }\n\n  componentWillLoad() {\n    if (this.year !== null) {\n      this.yearValue = this.year;\n    }\n    if (this.month) {\n      this.monthValue = this.month;\n    }\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  /**\n   * Get the current DateTime\n   */\n  @Method()\n  async getCurrentDate() {\n    return {\n      start: this.start?.toFormat(this.format),\n      end: this.end?.toFormat(this.format),\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeMonth(-1)}\n              ghost\n              icon=\"chevron-left\"\n              variant=\"Primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n\n            <div class=\"selector\">\n              <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.monthValue - 1]} {this.yearValue}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef}\n                placement=\"bottom\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={(ref) => (this.yearContainerRef = ref)}\n                  >\n                    {this.years.map((year) => (\n                      <div\n                        class={{ arrowYear: true }}\n                        onClick={(event) => this.selectTempYear(event, year)}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden: this.tempYear !== year,\n                            arrowPosition: true,\n                          }}\n                          name=\"chevron-right\"\n                          size=\"12\"\n                        ></ix-icon>\n                        <div\n                          style={{ 'min-width': 'max-content' }}\n                        >{`${year}`}</div>\n                      </div>\n                    ))}\n                  </div>\n                  <div class=\"overflow\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        class={{\n                          arrowYear: true,\n                          selected: this.tempMonth - 1 === index,\n                        }}\n                        onClick={() =>\n                          this.selectMonth((index + 1) as MonthNumbers)\n                        }\n                      >\n                        <ix-icon\n                          class={{\n                            hidden: this.tempMonth - 1 !== index,\n                            checkPosition: true,\n                          }}\n                          name=\"single-check\"\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span\n                            class={{ capitalize: true, monthMargin: true }}\n                          >{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n\n            <ix-icon-button\n              onClick={() => this.changeMonth(1)}\n              ghost\n              icon=\"chevron-right\"\n              variant=\"Primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"grid\">\n            <div class=\"calendar-item week-day\"></div>\n            {this.dayNames.map((name) => (\n              <div class=\"calendar-item week-day\">{name.slice(0, 3)}</div>\n            ))}\n\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  <div class=\"calendar-item week-number\">{week[0]}</div>\n                  {week[1].map((day) => (\n                    <div\n                      class={this.todayClass(day)}\n                      onClick={() => this.selectDay(day)}\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </Fragment>\n              );\n            })}\n          </div>\n\n          <div class={{ button: true, hidden: !this.individual }}>\n            <ix-button onClick={() => this.onDone()}>\n              {this.textSelectDate}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"date-picker.js","mappings":"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","names":["Info","DateTime"],"sources":["./src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=scoped","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  ix-date-time-card {\n    display: inline-block;\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(8, 40px);\n    grid-template-rows: repeat(7, 40px);\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n              --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n              var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n              --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n          pointer-events: none;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-ix--color);\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &:focus-visible {\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n          var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime, Info, MonthNumbers } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type DateChangeEvent = {\n  from: string;\n  to: string;\n};\n\nexport type LegacyDateChangeEvent = DateChangeEvent | string;\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  scoped: true,\n})\nexport class DatePicker {\n  private daysInWeek = 7;\n  private dayNames = Info.weekdays();\n  private monthNames = Info.months();\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | null = DateTime.now().toFormat(this.format);\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  @State() yearValue = this.year;\n  @State() today = DateTime.now();\n  @State() monthValue: number = this.month;\n  @State() calendar: [number, number[]][] = [];\n\n  @State() years = [...Array(10).keys()].map((year) => year + this.year - 5);\n  @State() tempYear: number = this.yearValue;\n  @State() tempMonth: number = this.monthValue;\n  @State() start: DateTime = DateTime.fromObject({\n    year: this.year,\n    month: this.month,\n    day: this.day,\n  });\n\n  @State() end: DateTime = this.to\n    ? DateTime.fromFormat(this.to, this.format)\n    : null;\n\n  @State() dropdownButtonRef: HTMLElement;\n  @State() yearContainerRef: HTMLElement;\n\n  /**\n   * Date change event\n   *\n   * If datepicker is in range mode the event detail will be sperated with a `-` e.g.\n   * `2022/10/22 - 2022/10/24` (start and end). If range mode is chosen consider to use `dateRangeChange`.\n   *\n   * @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string\n   */\n  @Event() dateChange: EventEmitter<LegacyDateChangeEvent>;\n\n  /**\n   * Date range change.\n   * Only triggered if datepicker is in range mode\n   *\n   * @since 1.1.0\n   */\n  @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @deprecated Will be removed in 2.0.0. Use `dateSelect`\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n  get year() {\n    if (this.from !== null) {\n      return DateTime.fromFormat(this.from, this.format).year;\n    }\n\n    return DateTime.now().year;\n  }\n\n  get day() {\n    if (this.from !== null) {\n      return DateTime.fromFormat(this.from, this.format).day;\n    }\n\n    return null;\n  }\n\n  get month() {\n    if (this.from !== null) {\n      return DateTime.fromFormat(this.from, this.format).month;\n    }\n\n    return DateTime.now().month;\n  }\n\n  private onDone() {\n    this.done.emit(this.getOutputFormat());\n\n    this.dateSelect.emit({\n      from: this.start?.toFormat(this.format),\n      to: this.end?.toFormat(this.format),\n    });\n  }\n\n  private onDateChange() {\n    const from = this.start?.toFormat(this.format);\n    const to = this.end?.toFormat(this.format);\n\n    this.from = from;\n    this.to = to;\n\n    if (this.eventDelimiter) {\n      this.dateChange.emit(this.getOutputFormat());\n    } else {\n      this.dateChange.emit({\n        from,\n        to,\n      });\n    }\n\n    if (this.range) {\n      this.dateRangeChange.emit({\n        from,\n        to,\n      });\n    }\n  }\n\n  private getStartOfMonth(\n    year = DateTime.local().get('year'),\n    month = DateTime.local().get('month')\n  ) {\n    return DateTime.local(year, month).startOf('month');\n  }\n\n  private getEndOfMonth(\n    year = DateTime.local().get('year'),\n    month = DateTime.local().get('month')\n  ) {\n    return DateTime.local(year, month).endOf('month');\n  }\n\n  private getDaysInMonth(\n    start = this.getStartOfMonth(),\n    end = this.getEndOfMonth()\n  ) {\n    return Math.ceil(end.diff(start, 'days').days);\n  }\n\n  private calculateCalendar() {\n    const start = this.getStartOfMonth(this.yearValue, this.monthValue);\n    const end = this.getEndOfMonth(this.yearValue, this.monthValue);\n    const totalDays = this.getDaysInMonth(start, end);\n    const totalWeeks = 6;\n    const totalDaysInWeeks = totalWeeks * this.daysInWeek;\n    const startWeekDay = start.weekday;\n    const prependDays = startWeekDay - 1;\n    const appendDays = totalDaysInWeeks - totalDays - prependDays;\n    let weekdays: number[][] = [];\n    const calendar: [number, number[]][] = [];\n\n    // create list of days\n    let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);\n\n    // add start empty days\n    days.unshift(...new Array(prependDays));\n\n    // remove & add end days\n    days = days.slice(0, days.length - prependDays - appendDays);\n    days.push(...new Array(appendDays));\n\n    // make weeks\n    weekdays = days.reduce((result, item, index) => {\n      const weekIndex = Math.floor(index / this.daysInWeek);\n\n      if (!result[weekIndex]) result[weekIndex] = [];\n\n      result[weekIndex].push(item);\n\n      return result;\n    }, []);\n\n    for (let index = 1; index <= totalWeeks; index++) {\n      const week = weekdays[index - 1];\n      const firstWeekDay = week.find((day) => day !== undefined);\n      const weekNumber = firstWeekDay\n        ? DateTime.local(\n            this.yearValue,\n            this.monthValue,\n            weekdays[index - 1][0]\n          ).weekNumber\n        : undefined;\n      calendar.push([weekNumber, week]);\n    }\n\n    this.calendar = calendar;\n  }\n\n  private changeMonth(number) {\n    if (this.monthValue + number < 1) {\n      this.yearValue--;\n      this.monthValue = 12;\n    } else if (this.monthValue + number > 12) {\n      this.yearValue++;\n      this.monthValue = 1;\n    } else {\n      this.monthValue += number;\n    }\n    this.calculateCalendar();\n  }\n\n  private selectMonth(month: MonthNumbers) {\n    this.monthValue = month;\n    this.yearValue = this.tempYear;\n    this.tempMonth = month;\n  }\n\n  private infiniteScrollYears() {\n    const scroll = this.yearContainerRef.scrollTop;\n    const maxScroll = this.yearContainerRef.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      scroll + this.yearContainerRef.getBoundingClientRect().height ===\n      maxScroll;\n    const limit = 200;\n\n    if (this.years.length > limit) return;\n\n    if (atTop) {\n      this.years = [\n        ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),\n        ...this.years,\n      ];\n      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });\n    }\n\n    if (atBottom) {\n      this.years = [\n        ...this.years,\n        ...[...Array(5).keys()].map(\n          (year) => year + this.years[this.years.length - 1]\n        ),\n      ];\n      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });\n    }\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private getDayClasses(day: number) {\n    if (!day) {\n      return;\n    }\n\n    const todayLocal = DateTime.local();\n    const dayLocal = DateTime.local(this.yearValue, this.monthValue, day);\n    const dayIso = dayLocal.toISO();\n    const startIso = this.start?.toISO();\n    const endIso = this.end?.toISO();\n    const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: isToday,\n      selected:\n        (this.start && dayIso === startIso) || (this.end && dayIso === endIso),\n      range: this.start && this.end && dayIso > startIso && dayIso < endIso,\n      disabled: !this.isWithinMinMax(dayLocal),\n    };\n  }\n\n  private selectDay(day: number) {\n    const date = DateTime.local(this.yearValue, this.monthValue, day);\n    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();\n    const isSameDay =\n      this.start && !this.end && this.start.toISO() === date.toISO();\n\n    if (day === undefined) return;\n\n    if (isSameDay) {\n      this.start = null;\n      this.onDateChange();\n      return;\n    }\n\n    if (this.range) {\n      if (this.start === null) {\n        this.start = date;\n      } else if (this.end === null) {\n        if (isStartBeforeEnd) {\n          this.end = date;\n        } else {\n          this.end = this.start;\n          this.start = date;\n        }\n      } else {\n        this.start = date;\n        this.end = null;\n      }\n    } else {\n      this.start = date;\n    }\n\n    this.onDateChange();\n  }\n\n  private getOutputFormat() {\n    if (!this.start) {\n      return null;\n    }\n\n    if (!this.end) {\n      return this.start.toFormat(this.format);\n    }\n\n    return [\n      this.start.toFormat(this.format),\n      this.end.toFormat(this.format),\n    ].join(this.eventDelimiter);\n  }\n\n  private isWithinMinMax(date: DateTime) {\n    const dateIso = date.toISO();\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : null;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : null;\n    return (\n      (!_minDate || _minDate.toISO() <= dateIso) &&\n      (!_maxDate || _maxDate.toISO() >= dateIso)\n    );\n  }\n\n  componentWillLoad() {\n    if (this.from === null) {\n      this.start = null;\n    }\n\n    if (this.year !== null) {\n      this.yearValue = this.year;\n    }\n    if (this.month) {\n      this.monthValue = this.month;\n    }\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  /**\n   * Get the current DateTime\n   */\n  @Method()\n  async getCurrentDate() {\n    return {\n      start: this.start?.toFormat(this.format),\n      end: this.end?.toFormat(this.format),\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeMonth(-1)}\n              ghost\n              icon=\"chevron-left\"\n              variant=\"Primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n\n            <div class=\"selector\">\n              <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.monthValue - 1]} {this.yearValue}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef}\n                placement=\"bottom\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={(ref) => (this.yearContainerRef = ref)}\n                  >\n                    {this.years.map((year) => (\n                      <div\n                        key={year}\n                        class={{ arrowYear: true }}\n                        onClick={(event) => this.selectTempYear(event, year)}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden: this.tempYear !== year,\n                            arrowPosition: true,\n                          }}\n                          name=\"chevron-right\"\n                          size=\"12\"\n                        ></ix-icon>\n                        <div\n                          style={{ 'min-width': 'max-content' }}\n                        >{`${year}`}</div>\n                      </div>\n                    ))}\n                  </div>\n                  <div class=\"overflow\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        class={{\n                          arrowYear: true,\n                          selected: this.tempMonth - 1 === index,\n                        }}\n                        onClick={() =>\n                          this.selectMonth((index + 1) as MonthNumbers)\n                        }\n                      >\n                        <ix-icon\n                          class={{\n                            hidden: this.tempMonth - 1 !== index,\n                            checkPosition: true,\n                          }}\n                          name=\"single-check\"\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span\n                            class={{ capitalize: true, monthMargin: true }}\n                          >{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n\n            <ix-icon-button\n              onClick={() => this.changeMonth(1)}\n              ghost\n              icon=\"chevron-right\"\n              variant=\"Primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"grid\">\n            <div class=\"calendar-item week-day\"></div>\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                {name.slice(0, 3)}\n              </div>\n            ))}\n\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  <div class=\"calendar-item week-number\">{week[0]}</div>\n                  {week[1].map((day) => (\n                    <div\n                      key={day}\n                      class={this.getDayClasses(day)}\n                      onClick={() => this.selectDay(day)}\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </Fragment>\n              );\n            })}\n          </div>\n\n          <div class={{ button: true, hidden: !this.individual }}>\n            <ix-button onClick={() => this.onDone()}>\n              {this.textSelectDate}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/date-time-card.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const dateTimeCardCss = ".card.sc-ix-date-time-card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset}.card.individual.sc-ix-date-time-card{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}.card.left.sc-ix-date-time-card{border-radius:4px 0 0 4px;height:100%}.card.right.sc-ix-date-time-card{border-radius:0 4px 4px 0;height:100%}.card.sc-ix-date-time-card .header.sc-ix-date-time-card{padding:1rem}.card.sc-ix-date-time-card .separator.sc-ix-date-time-card{border:1px solid var(--theme-datepicker-separator--background);width:100%}.card.sc-ix-date-time-card .content.sc-ix-date-time-card{height:100%;padding:0px 1rem 1rem 1rem}";
 
-const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class DateTimeCard extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();

package/dist/components/dropdown-item.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const dropdownItemCss = ".sc-ix-dropdown-item-h{display:block;min-width:10rem}.icon-only.sc-ix-dropdown-item-h{min-width:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item>.glyph.sc-ix-dropdown-item{-webkit-margin-end:0;margin-inline-end:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item{padding:0.25rem 0.5rem}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-dropdown-item-h .sc-ix-dropdown-item:focus{background-color:transparent;color:var(--theme-menu-item--color)}.sc-ix-dropdown-item-h .checkmark.sc-ix-dropdown-item{position:absolute;left:0.5rem}.checked.sc-ix-dropdown-item-h{background-color:var(--theme-select-list-item--background--selected)}.sc-ix-dropdown-item-h .label.sc-ix-dropdown-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.disabled.sc-ix-dropdown-item-h{pointer-events:none}.sc-ix-dropdown-item-s>ix-icon{-webkit-margin-start:auto;margin-inline-start:auto}";
+const dropdownItemCss = ".sc-ix-dropdown-item-h{display:block}.icon-only.sc-ix-dropdown-item-h{min-width:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item>.glyph.sc-ix-dropdown-item{-webkit-margin-end:0;margin-inline-end:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item{padding:0.25rem 0.5rem}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-dropdown-item-h .sc-ix-dropdown-item:focus{background-color:transparent;color:var(--theme-menu-item--color)}.sc-ix-dropdown-item-h .checkmark.sc-ix-dropdown-item{position:absolute;left:0.5rem}.checked.sc-ix-dropdown-item-h{background-color:var(--theme-select-list-item--background--selected)}.sc-ix-dropdown-item-h .label.sc-ix-dropdown-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.disabled.sc-ix-dropdown-item-h{pointer-events:none}.sc-ix-dropdown-item-s>ix-icon{-webkit-margin-start:auto;margin-inline-start:auto}";
 
-const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -26,11 +26,11 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         'icon-text': this.label !== undefined && this.icon !== undefined,
         'icon-only': this.label === undefined && this.icon !== undefined,
         disabled: this.disabled,
-      } }, h("button", { class: {
+      } }, h("button", { type: "button", class: {
         'dropdown-item': true,
         hover: this.hover,
         disabled: this.disabled,
-      }, onClick: () => this.emitItemClick() }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null, this.icon ? (h("span", { class: {
+      }, onClick: () => this.emitItemClick(), tabindex: 0 }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null, this.icon ? (h("span", { class: {
         glyph: true,
         [`glyph-${this.icon}`]: true,
         disabled: this.disabled,

package/dist/components/dropdown-item.js.map

@@ -1 +1 @@
-{"file":"dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,y+BAAy+B;;MCyBp/B,YAAY;;;;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;;;;;EAWvB,MAAM,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAElC,IAAI,CAAC,OAAO,IACX,eAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW,IACjE,IAAI,EAEP,IAAI,CAAC,IAAI,IACR,YACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACK,IACN,IAAI,EAEP,IAAI,CAAC,KAAK,GAAG,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,GAAG,IAAI,EAC5D,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  min-width: 10rem;\n\n  &.icon-only {\n    min-width: 0;\n\n    .dropdown-item > .glyph {\n      margin-inline-end: 0;\n    }\n\n    .dropdown-item {\n      padding: $tiny-space $small-space;\n\n      @include focus-visible {\n        border-color: #199fff;\n      }\n    }\n  }\n\n  :focus {\n    background-color: transparent;\n    color: var(--theme-menu-item--color);\n  }\n\n  .checkmark {\n    position: absolute;\n    left: $small-space;\n  }\n\n  &.checked {\n    background-color: var(--theme-select-list-item--background--selected);\n  }\n\n  .label {\n    @include ellipsis;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n::slotted(ix-icon) {\n  margin-inline-start: auto;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,y9BAAy9B;;MCyBp+B,YAAY;;;;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;;;;;EAWvB,MAAM,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,OAAO,IACX,eAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW,IACjE,IAAI,EAEP,IAAI,CAAC,IAAI,IACR,YACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACK,IACN,IAAI,EAEP,IAAI,CAAC,KAAK,GAAG,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,GAAG,IAAI,EAC5D,eAAa,CACN,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=scoped","./src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n\n  &.icon-only {\n    min-width: 0;\n\n    .dropdown-item > .glyph {\n      margin-inline-end: 0;\n    }\n\n    .dropdown-item {\n      padding: $tiny-space $small-space;\n\n      @include focus-visible {\n        border-color: #199fff;\n      }\n    }\n  }\n\n  :focus {\n    background-color: transparent;\n    color: var(--theme-menu-item--color);\n  }\n\n  .checkmark {\n    position: absolute;\n    left: $small-space;\n  }\n\n  &.checked {\n    background-color: var(--theme-select-list-item--background--selected);\n  }\n\n  .label {\n    @include ellipsis;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n::slotted(ix-icon) {\n  margin-inline-start: auto;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  scoped: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          checked: this.checked,\n          'icon-text': this.label !== undefined && this.icon !== undefined,\n          'icon-only': this.label === undefined && this.icon !== undefined,\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type=\"button\"\n          class={{\n            'dropdown-item': true,\n            hover: this.hover,\n            disabled: this.disabled,\n          }}\n          onClick={() => this.emitItemClick()}\n          tabindex={0}\n        >\n          {this.checked ? (\n            <ix-icon class=\"checkmark\" name=\"single-check\" size=\"16\"></ix-icon>\n          ) : null}\n\n          {this.icon ? (\n            <span\n              class={{\n                glyph: true,\n                [`glyph-${this.icon}`]: true,\n                disabled: this.disabled,\n              }}\n            ></span>\n          ) : null}\n\n          {this.label ? <span class=\"label\">{this.label}</span> : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/dropdown.js

@@ -3,7 +3,7 @@ import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as
 
 const dropdownCss = ".dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid;border-right:0.3em solid transparent;border-bottom:0;border-left:0.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:#212529;--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:0.375rem;--bs-dropdown-border-width:1px;--bs-dropdown-inner-border-radius:calc(0.375rem - 1px);--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-dropdown-link-color:#212529;--bs-dropdown-link-hover-color:#1e2125;--bs-dropdown-link-hover-bg:#e9ecef;--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width: 576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0;border-right:0.3em solid transparent;border-bottom:0.3em solid;border-left:0.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0;border-bottom:0.3em solid transparent;border-left:0.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\"}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0.3em solid;border-bottom:0.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:0.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-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);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color 150ms;box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}:host{min-width:0px}:host(.overflow){max-height:50vh;overflow-y:auto}";
 
-const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -205,7 +205,8 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       positionConfig.placement = 'right-start';
     }
     if (this.placement.includes('auto') || isSubmenu) {
-      positionConfig.middleware.push(flip());
+      positionConfig.middleware.push(flip({ fallbackStrategy: 'initialPlacement' }));
+      positionConfig.placement = 'bottom-start';
     }
     else {
       positionConfig.placement = this.placement;

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '~bootstrap/scss/functions';\n@import 'common-variables';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n@import '~bootstrap/scss/dropdown';\n\n@import 'mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'components/dropdown';\n\n:host {\n  min-width: 0px;\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BasePlacement, Placement, PlacementWithAlignment } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Close behavior\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * Adjust dropdown width to the parent width\n   * @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.\n   */\n  @Prop() adjustDropdownWidthToReferenceWith = false;\n\n  /**\n   * Adjust dropdown width to the parent width\n   *\n   * @deprecated Will be removed. Not used anymore\n   */\n  @Prop() adjustDropdownWidthToReferenceWidth = false;\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          this.triggerElement.addEventListener('click', this.openBind);\n        } else {\n          this.triggerElement.addEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: Event) {\n    const target = event.target as HTMLElement;\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!this.dropdownRef.contains(target)) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) this.close();\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = !this.show;\n    this.showChanged.emit(this.show);\n  }\n\n  private open(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = true;\n    this.showChanged.emit(true);\n  }\n\n  private close(event?: Event) {\n    if (event?.defaultPrevented) {\n      return;\n    }\n\n    this.show = false;\n    this.showChanged.emit(false);\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (isSubmenu) {\n      positionConfig.placement = 'right-start';\n    }\n\n    if (this.placement.includes('auto') || isSubmenu) {\n      positionConfig.middleware.push(flip());\n    } else {\n      positionConfig.placement = this.placement as\n        | BasePlacement\n        | PlacementWithAlignment;\n    }\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    if (this.trigger) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '~bootstrap/scss/functions';\n@import 'common-variables';\n@import '~bootstrap/scss/variables';\n@import '~bootstrap/scss/mixins';\n@import '~bootstrap/scss/dropdown';\n\n@import 'mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'components/dropdown';\n\n:host {\n  min-width: 0px;\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BasePlacement, Placement, PlacementWithAlignment } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Close behavior\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * Adjust dropdown width to the parent width\n   * @deprecated Will be removed in 2.0.0. Property has a typo use `adjustDropdownWidthToReferenceWidth` instead.\n   */\n  @Prop() adjustDropdownWidthToReferenceWith = false;\n\n  /**\n   * Adjust dropdown width to the parent width\n   *\n   * @deprecated Will be removed. Not used anymore\n   */\n  @Prop() adjustDropdownWidthToReferenceWidth = false;\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          this.triggerElement.addEventListener('click', this.openBind);\n        } else {\n          this.triggerElement.addEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: Event) {\n    const target = event.target as HTMLElement;\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!this.dropdownRef.contains(target)) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) this.close();\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = !this.show;\n    this.showChanged.emit(this.show);\n  }\n\n  private open(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = true;\n    this.showChanged.emit(true);\n  }\n\n  private close(event?: Event) {\n    if (event?.defaultPrevented) {\n      return;\n    }\n\n    this.show = false;\n    this.showChanged.emit(false);\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (isSubmenu) {\n      positionConfig.placement = 'right-start';\n    }\n\n    if (this.placement.includes('auto') || isSubmenu) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n      positionConfig.placement = 'bottom-start';\n    } else {\n      positionConfig.placement = this.placement as\n        | BasePlacement\n        | PlacementWithAlignment;\n    }\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    if (this.trigger) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}