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

package/dist/cjs/ix-date-picker_2.cjs.entry.js

@@ -8586,7 +8586,7 @@ exports.Zone = Zone;
 //# sourceMappingURL=luxon.js.map
 });
 
-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 = class {
   constructor(hostRef) {
@@ -8627,13 +8627,22 @@ const DatePicker = class {
     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;
@@ -8644,20 +8653,24 @@ const DatePicker = class {
     });
   }
   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,
       });
     }
   }
@@ -8753,54 +8766,57 @@ const DatePicker = class {
     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();
   }
@@ -8828,6 +8844,9 @@ const DatePicker = class {
       (!_maxDate || _maxDate.toISO() >= dateIso));
   }
   componentWillLoad() {
+    if (this.from === null) {
+      this.start = null;
+    }
     if (this.year !== null) {
       this.yearValue = this.year;
     }
@@ -8849,17 +8868,17 @@ const DatePicker = class {
     };
   }
   render() {
-    return (index.h(index.Host, null, index.h("ix-date-time-card", { individual: this.individual, corners: this.corners }, index.h("div", { class: "header", slot: "header" }, index.h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "Primary", class: "arrows" }), index.h("div", { class: "selector" }, index.h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, index.h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), index.h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom" }, index.h("div", { class: "wrapper" }, index.h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (index.h("div", { class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, index.h("ix-icon", { class: {
+    return (index.h(index.Host, null, index.h("ix-date-time-card", { individual: this.individual, corners: this.corners }, index.h("div", { class: "header", slot: "header" }, index.h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "Primary", class: "arrows" }), index.h("div", { class: "selector" }, index.h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, index.h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), index.h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom" }, index.h("div", { class: "wrapper" }, index.h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (index.h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, index.h("ix-icon", { class: {
         hidden: this.tempYear !== year,
         arrowPosition: true,
-      }, name: "chevron-right", size: "12" }), index.h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), index.h("div", { class: "overflow" }, this.monthNames.map((month, index$1) => (index.h("div", { class: {
+      }, name: "chevron-right", size: "12" }), index.h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), index.h("div", { class: "overflow" }, this.monthNames.map((month, index$1) => (index.h("div", { key: month, class: {
         arrowYear: true,
         selected: this.tempMonth - 1 === index$1,
       }, onClick: () => this.selectMonth((index$1 + 1)) }, index.h("ix-icon", { class: {
         hidden: this.tempMonth - 1 !== index$1,
         checkPosition: true,
-      }, name: "single-check", size: "16" }), index.h("div", null, index.h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), index.h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "Primary", class: "arrows" })), index.h("div", { class: "grid" }, index.h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (index.h("div", { class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
-      return (index.h(index.Fragment, null, index.h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (index.h("div", { class: this.todayClass(day), onClick: () => this.selectDay(day) }, day)))));
+      }, name: "single-check", size: "16" }), index.h("div", null, index.h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), index.h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "Primary", class: "arrows" })), index.h("div", { class: "grid" }, index.h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (index.h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      return (index.h(index.Fragment, null, index.h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (index.h("div", { key: day, class: this.getDayClasses(day), onClick: () => this.selectDay(day) }, day)))));
     })), index.h("div", { class: { button: true, hidden: !this.individual } }, index.h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
   }
 };