@siemens/ix 1.0.0-beta.5 → 1.1.0-beta.0

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

@@ -8582,41 +8582,123 @@ exports.Zone = Zone;
 //# sourceMappingURL=luxon.js.map
 });
 
-const datePickerCss = ".header.sc-ix-date-picker{display:flex;align-items:center;justify-content:space-between}.selector.sc-ix-date-picker{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}.selector.sc-ix-date-picker .dropdown.sc-ix-date-picker{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}.selector.sc-ix-date-picker .fontSize.sc-ix-date-picker{font-size:16px}.selector.sc-ix-date-picker .capitalize.sc-ix-date-picker{text-transform:capitalize}.selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}.selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker:hover{background-color:var(--theme-select-list-item--background--hover)}.selector.sc-ix-date-picker .arrowYear.selected.sc-ix-date-picker{background-color:var(--theme-select-list-item--background--selected)}.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)}.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)}.selector.sc-ix-date-picker .arrowYear.sc-ix-date-picker .monthMargin.sc-ix-date-picker{margin-left:10px}.wrapper.sc-ix-date-picker{display:flex}.wrapper.sc-ix-date-picker .overflow.sc-ix-date-picker{overflow-y:scroll;max-height:250px}.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)}.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}.grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker{border:1px solid var(--theme-datepicker-today--border-color)}.grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--hover)}.grid.sc-ix-date-picker .calendar-item.today.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--active)}.grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker{box-shadow:inset 0 0 0 1px white}.grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}.grid.sc-ix-date-picker .calendar-item.today.selected.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--selected-active)}.grid.sc-ix-date-picker .calendar-item.today.selected.disabled.sc-ix-date-picker{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)}.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}.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)}.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)}.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)}.grid.sc-ix-date-picker .calendar-item.today.disabled.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}.grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--hover)}.grid.sc-ix-date-picker .calendar-item.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--active)}.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)}.grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}.grid.sc-ix-date-picker .calendar-item.selected.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--selected-active)}.grid.sc-ix-date-picker .calendar-item.selected.disabled.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}.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)}.grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker:hover{background-color:var(--theme-datepicker-day--background--range-hover)}.grid.sc-ix-date-picker .calendar-item.range.sc-ix-date-picker:active{background-color:var(--theme-datepicker-day--background--range-active)}.grid.sc-ix-date-picker .calendar-item.range.disabled.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}.grid.sc-ix-date-picker .calendar-item.disabled.sc-ix-date-picker{background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}.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}.grid.sc-ix-date-picker .calendar-item.empty-day.sc-ix-date-picker{border:none;background:none;cursor:initial}.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}.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}.button.sc-ix-date-picker{display:flex;justify-content:flex-end}.hidden.sc-ix-date-picker{display:none}";
+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 DatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
     this.done = createEvent(this, "done", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
+    this.daysInWeek = 7;
+    this.dayNames = luxon.Info.weekdays();
+    this.monthNames = luxon.Info.months();
     /**
-     * output date format
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
      */
     this.format = 'yyyy/LL/dd';
     /**
-     * Set range size
+     * If true a range of dates can be selected.
      */
     this.range = true;
     /**
-     * set styles
+     * @deprecated - will get removed with next major release
      */
     this.individual = true;
     /**
-     * Set corners style
+     * Corner style
      */
     this.corners = 'rounded';
-    this.daysInWeek = 7;
-    this.dayNames = luxon.Info.weekdays();
-    this.monthNames = luxon.Info.months();
-    this.year = luxon.DateTime.now().year;
-    this.month = luxon.DateTime.now().month;
-    this.calendar = [];
+    /**
+     * Picker date. If the picker is in range mode this property is the start date.
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.from = luxon.DateTime.now().toFormat(this.format);
+    /**
+     * Picker date. If the picker is in range mode this property is the end date.
+     * If the picker is not in range mode leave this value `null`
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.to = null;
+    /**
+     * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+     * This combination can be configured over the delimiter
+     *
+     * @since 1.1.0
+     */
+    this.eventDelimiter = ' - ';
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectDate = 'Done';
+    this.yearValue = this.year;
     this.today = luxon.DateTime.now();
-    this.years = [...Array(10).keys()].map((year) => year + luxon.DateTime.now().year - 5);
-    this.tempYear = this.year;
-    this.tempMonth = this.month;
-    this.start = null;
-    this.end = null;
+    this.monthValue = this.month;
+    this.calendar = [];
+    this.years = [...Array(10).keys()].map((year) => year + this.year - 5);
+    this.tempYear = this.yearValue;
+    this.tempMonth = this.monthValue;
+    this.start = luxon.DateTime.fromObject({
+      year: this.year,
+      month: this.month,
+      day: this.day,
+    });
+    this.end = this.to
+      ? luxon.DateTime.fromFormat(this.to, this.format)
+      : null;
+  }
+  get year() {
+    return luxon.DateTime.fromFormat(this.from, this.format).year;
+  }
+  get day() {
+    return luxon.DateTime.fromFormat(this.from, this.format).day;
+  }
+  get month() {
+    return luxon.DateTime.fromFormat(this.from, this.format).month;
+  }
+  onDone() {
+    var _a;
+    this.done.emit(this.getOutputFormat());
+    this.dateSelect.emit({
+      from: this.start.toFormat(this.format),
+      to: (_a = this.end) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+    });
+  }
+  onDateChange() {
+    var _a, _b, _c, _d;
+    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),
+      });
+    }
+    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),
+      });
+    }
+  }
+  selectionProps() {
+    if (this.year !== null) {
+      this.yearValue = this.year;
+    }
+    if (this.month !== null) {
+      this.monthValue = this.month;
+    }
   }
   getStartOfMonth(year = luxon.DateTime.local().get('year'), month = luxon.DateTime.local().get('month')) {
     return luxon.DateTime.local(year, month).startOf('month');
@@ -8628,8 +8710,9 @@ const DatePicker = class {
     return Math.ceil(end.diff(start, 'days').days);
   }
   calculateCalendar() {
-    const start = this.getStartOfMonth(this.year, this.month);
-    const end = this.getEndOfMonth(this.year, this.month);
+    this.selectionProps();
+    const start = this.getStartOfMonth(this.yearValue, this.monthValue);
+    const end = this.getEndOfMonth(this.yearValue, this.monthValue);
     const totalDays = this.getDaysInMonth(start, end);
     const totalWeeks = 6;
     const totalDaysInWeeks = totalWeeks * this.daysInWeek;
@@ -8657,30 +8740,29 @@ const DatePicker = class {
       const week = weekdays[index - 1];
       const firstWeekDay = week.find((day) => day !== undefined);
       const weekNumber = firstWeekDay
-        ? luxon.DateTime.local(this.year, this.month, weekdays[index - 1][0])
-          .weekNumber
+        ? luxon.DateTime.local(this.yearValue, this.monthValue, weekdays[index - 1][0]).weekNumber
         : undefined;
       calendar.push([weekNumber, week]);
     }
     this.calendar = calendar;
   }
   changeMonth(number) {
-    if (this.month + number < 1) {
-      this.year--;
-      this.month = 12;
+    if (this.monthValue + number < 1) {
+      this.yearValue--;
+      this.monthValue = 12;
     }
-    else if (this.month + number > 12) {
-      this.year++;
-      this.month = 1;
+    else if (this.monthValue + number > 12) {
+      this.yearValue++;
+      this.monthValue = 1;
     }
     else {
-      this.month += number;
+      this.monthValue += number;
     }
     this.calculateCalendar();
   }
   selectMonth(month) {
-    this.month = month;
-    this.year = this.tempYear;
+    this.monthValue = month;
+    this.yearValue = this.tempYear;
     this.tempMonth = month;
   }
   infiniteScrollYears() {
@@ -8713,7 +8795,7 @@ const DatePicker = class {
   }
   todayClass(day) {
     const today = luxon.DateTime.local();
-    const daaay = luxon.DateTime.local(this.year, this.month, day);
+    const daaay = luxon.DateTime.local(this.yearValue, this.monthValue, day);
     const isToday = Math.ceil(daaay.diff(today, 'days').days) === 0;
     return {
       'calendar-item': true,
@@ -8725,14 +8807,15 @@ const DatePicker = class {
         this.end &&
         daaay.toISO() > this.start.toISO() &&
         daaay.toISO() < this.end.toISO(),
-      disabled: this.start &&
-        daaay.toISO() < this.start.toISO() &&
-        this.end === null &&
-        this.range,
+      disabled: !this.isWithinMinMax(daaay) ||
+        (this.start &&
+          daaay.toISO() < this.start.toISO() &&
+          this.end === null &&
+          this.range),
     };
   }
   selectDay(day) {
-    const date = luxon.DateTime.local(this.year, this.month, 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;
@@ -8743,7 +8826,7 @@ const DatePicker = class {
       return;
     if (isSameDay) {
       this.start = null;
-      this.dateChange.emit(this.getOutputFormat());
+      this.onDateChange();
       return;
     }
     if (!this.range) {
@@ -8759,18 +8842,45 @@ const DatePicker = class {
       this.start = date;
       this.end = null;
     }
-    this.dateChange.emit(this.getOutputFormat());
+    this.onDateChange();
   }
   getOutputFormat() {
-    if (!this.end)
+    if (!this.start) {
+      return null;
+    }
+    if (!this.end) {
       return this.start.toFormat(this.format);
-    return (this.start.toFormat(this.format) + ' - ' + this.end.toFormat(this.format));
+    }
+    return [
+      this.start.toFormat(this.format),
+      this.end.toFormat(this.format),
+    ].join(this.eventDelimiter);
+  }
+  isWithinMinMax(date) {
+    const dateIso = date.toISO();
+    const _minDate = this.minDate
+      ? luxon.DateTime.fromFormat(this.minDate, this.format)
+      : null;
+    const _maxDate = this.maxDate
+      ? luxon.DateTime.fromFormat(this.maxDate, this.format)
+      : null;
+    return ((!_minDate || _minDate.toISO() <= dateIso) &&
+      (!_maxDate || _maxDate.toISO() >= dateIso));
   }
   componentWillRender() {
     this.calculateCalendar();
   }
+  /**
+   * Get the current DateTime
+   */
+  async getCurrentDate() {
+    return {
+      start: this.start,
+      end: this.end,
+    };
+  }
   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.month - 1], " ", this.year)), 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", { 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: {
@@ -8781,7 +8891,7 @@ const DatePicker = class {
         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)))));
-    })), h("div", { class: { button: true, hidden: !this.individual } }, h("ix-button", { onClick: () => this.done.emit(this.getOutputFormat()) }, "Done")))));
+    })), h("div", { class: { button: true, hidden: !this.individual } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
   }
 };
 DatePicker.style = datePickerCss;
@@ -8794,30 +8904,63 @@ const TimePicker = class {
     this.done = createEvent(this, "done", 7);
     this.timeChange = createEvent(this, "timeChange", 7);
     /**
-     * Set corners style
+     * Format of time string
+     *
+     * @since 1.1.0
+     */
+    this.format = 'TT';
+    /**
+     * Corner style
      */
     this.corners = 'rounded';
     /**
-     * set styles
+     * @deprecated - will get removed with next major release
      */
     this.individual = true;
     /**
-     * Show Hour Input
+     * Show hour input
      */
     this.showHour = false;
     /**
-     * Show Minutes Input
+     * Show minutes input
      */
     this.showMinutes = false;
     /**
-     * Show Seconds Input
+     * Show seconds input
      */
     this.showSeconds = false;
     /**
-     * Show Time Reference Input
+     * Select time with format string
+     *
+     * @since 1.1.0
      */
-    this.showTimeReference = false;
-    this.time = luxon.DateTime.fromFormat('00:00:00 AM', 'tt');
+    this.time = luxon.DateTime.now().toFormat(this.format);
+    /**
+     * Show time reference input
+     *
+     * @since 1.1.0 time reference is default aligned with formt tt
+     */
+    this.showTimeReference = undefined;
+    /**
+     * Set time reference
+     */
+    this.timeReference = luxon.DateTime.fromFormat(this.time, this.format).toFormat('a');
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectTime = 'Done';
+    this._time = luxon.DateTime.fromFormat(this.time, this.format);
+  }
+  get hour() {
+    return this._time.hour;
+  }
+  get minutes() {
+    return this._time.minute;
+  }
+  get seconds() {
+    return this._time.second;
   }
   updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
     if (hours)
@@ -8830,25 +8973,40 @@ const TimePicker = class {
       step === 'up'
         ? this.secondInputRef.stepUp()
         : this.secondInputRef.stepDown();
-    this.time = this.time.set({
+    this._time = this._time.set({
       hour: Number(this.hourInputRef.value),
       minute: Number(this.minuteInputRef.value),
       second: Number(this.secondInputRef.value),
     });
-    this.setHourAccordingToReference();
-    this.timeChange.emit(this.time.toFormat('TT'));
+    this.emitTimeChange();
   }
   changeReference() {
     this.referenceInputRef.value =
       this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';
     this.setHourAccordingToReference();
-    this.timeChange.emit(this.time.toFormat('TT'));
+    this.emitTimeChange();
   }
   setHourAccordingToReference() {
     let hour = Number(this.hourInputRef.value);
     if (this.referenceInputRef.value === 'PM')
       hour += 12;
-    this.time = this.time.set({ hour });
+    this._time = this._time.set({ hour });
+  }
+  emitTimeChange() {
+    const time = this._time.toFormat(this.format);
+    this.timeChange.emit(time);
+  }
+  componentWillLoad() {
+    if (this.showTimeReference === undefined) {
+      const matchedKeys = Object.keys(luxon.DateTime.fromFormatExplain(this.time, this.format).matches);
+      this.showTimeReference = matchedKeys.includes('a');
+    }
+  }
+  /**
+   * Get current time
+   */
+  async getCurrentTime() {
+    return this._time;
   }
   render() {
     let hideHour = !this.showHour;
@@ -8863,11 +9021,11 @@ const TimePicker = class {
     }
     const hideHourSeperator = hideMinutes || hideHour;
     const hideMinutesSeperator = hideSeconds || hideMinutes;
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("div", { class: "title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "hours", type: "number", placeholder: "00", min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "minutes", type: "number", placeholder: "00", min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "seconds", type: "number", placeholder: "00", disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("div", { class: "title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "hours", type: "number", placeholder: "00", value: this.hour, min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "minutes", type: "number", placeholder: "00", value: this.minutes, min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "seconds", type: "number", placeholder: "00", value: this.seconds, disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: {
         columns: true,
         'default-space': true,
         hidden: hideTimeReference,
-      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: "AM", disabled: true, class: "text-align" }), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this.time.toFormat('TT')) }, "Done")))));
+      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: this.timeReference, disabled: true, class: "text-align" }), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-date-time-card.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
 
-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 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);border:1px solid var(--theme-menu--border-color);border-radius:4px}.card.left.sc-ix-date-time-card{border-radius:4px 0 0 4px}.card.right.sc-ix-date-time-card{border-radius:0 4px 4px 0}.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 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 = class {
   constructor(hostRef) {

package/dist/esm/ix-datetime-picker.entry.js

@@ -1,38 +1,107 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-55cfd20d.js';
 
-const datetimePickerCss = ".sc-ix-datetime-picker-h{background-color:var(--theme-menu--background);box-shadow:0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex}.done.sc-ix-datetime-picker{display:flex;justify-content:flex-end;margin:0 1rem 1rem 0}";
+const datetimePickerCss = ".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.done.sc-ix-datetime-picker{display:inline-flex;justify-content:flex-end;padding:1rem;width:100%}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
 
 const DatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.done = createEvent(this, "done", 7);
+    this.timeChange = createEvent(this, "timeChange", 7);
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
     /**
      * Set range size
      */
     this.range = true;
     /**
-     * Show Hour Input
+     * Show hour input
      */
     this.showHour = false;
     /**
-     * Show Minutes Input
+     * Show minutes input
      */
     this.showMinutes = false;
     /**
-     * Show Seconds Input
+     * Show seconds input
      */
     this.showSeconds = false;
     /**
-     * Show Time Reference Input
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
      */
-    this.showTimeReference = false;
+    this.dateFormat = 'yyyy/LL/dd';
+    /**
+     * Time format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
+     */
+    this.timeFormat = 'TT';
+    /**
+     * Picker date. If the picker is in range mode this property is the end date.
+     * If the picker is not in range mode leave this value `null`
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.to = null;
+    /**
+     * Show time reference input
+     *
+     * @since 1.1.0 time reference is default aligned with formt tt
+     */
+    this.showTimeReference = undefined;
+    /**
+     * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+     * This combination can be configured over the delimiter
+     *
+     * @since 1.1.0
+     */
+    this.eventDelimiter = ' - ';
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectDate = 'Done';
+  }
+  onDone() {
+    var _a;
+    this.done.emit([this._from, (_a = this._to) !== null && _a !== void 0 ? _a : '', this._time].join(this.eventDelimiter));
+    this.dateSelect.emit({
+      from: this._from,
+      to: this._to,
+      time: this._time,
+    });
+  }
+  async onDateChange(event) {
+    var _a, _b;
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: date } = event;
+    this.dateChange.emit(date);
+    const currentDateTime = await this.datePickerElement.getCurrentDate();
+    this._from = (_a = currentDateTime.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.dateFormat);
+    this._to = (_b = currentDateTime.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.dateFormat);
+  }
+  async onTimeChange(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: time } = event;
+    this.timeChange.emit(time);
+    const currentDateTime = await this.timePickerElement.getCurrentTime();
+    this._time = currentDateTime.toFormat(this.timeFormat);
   }
-  doneEvent() {
-    console.log(this.date + ' ' + this.time);
-    this.done.emit(this.date + ' ' + this.time);
+  componentDidLoad() {
+    this._from = this.from;
+    this._to = this.to;
+    this._time = this.time;
   }
   render() {
-    return (h(Host, null, h("div", { class: "flex" }, h("ix-date-picker", { corners: "left", individual: false, range: this.range, onDateChange: (date) => (this.date = date.detail) }), h("ix-time-picker", { corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (time) => (this.time = time.detail) })), h("div", { class: "done" }, h("ix-button", { onClick: () => this.doneEvent() }, "Done"))));
+    return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("div", { class: "done" }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate))));
   }
 };
 DatePicker.style = datetimePickerCss;

package/dist/esm/ix-drawer.entry.js

@@ -68,7 +68,7 @@ const Drawer = class {
     const target = evt.target;
     const closestElement = target.closest('#div-container');
     const btn = target.closest('#drawer-btn');
-    if (closestElement !== this.divElement && target !== btn) {
+    if (evt.target.type !== "button" && closestElement !== this.divElement && target !== btn) {
       this.show = false;
     }
   }