@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-col_4.entry-CZ49GtRE.js

@@ -0,0 +1,553 @@
+import { r as registerInstance, f as forceUpdate, h, H as Host, c as createEvent, F as Fragment, g as getElement } from "./global-7ZbTfMw3.js";
+import { m as matchBreakpoint } from "./breakpoints-D_Hmobxf-DBbixPq4.js";
+import { w as iconChevronRightSmall, D as iconChevronLeftSmall, O as iconSingleCheck } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { D as DateTime, I as Info } from "./datetime-D1WplX1z-grPSvmS5.js";
+import { O as OnListener } from "./listener-DcAn-vyA-vMwX8dLP.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+const colCss = () => `:host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}`;
+const Col = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  onResize() {
+    forceUpdate(this);
+  }
+  getSize(breakpoint) {
+    if (breakpoint === "") {
+      return this.size;
+    }
+    if (breakpoint === "sm") {
+      return this.sizeSm;
+    }
+    if (breakpoint === "md") {
+      return this.sizeMd;
+    }
+    if (breakpoint === "lg") {
+      return this.sizeLg;
+    }
+  }
+  getColumnSize() {
+    let size;
+    Col.Breakpoints.forEach((breakpoint) => {
+      const isMediaQueryActive = breakpoint !== "" ? matchBreakpoint(breakpoint) : true;
+      if (!isMediaQueryActive) {
+        return;
+      }
+      const currentSize = this.getSize(breakpoint);
+      if (currentSize) {
+        size = currentSize;
+      }
+    });
+    return size;
+  }
+  getColumnSizeStyling() {
+    const size = this.getColumnSize();
+    if (!size) {
+      return;
+    }
+    if (size === "auto") {
+      return {
+        flex: "0 0 auto",
+        width: "auto",
+        "max-width": "auto"
+      };
+    }
+    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;
+    return {
+      flex: `0 0 ${colSize}`,
+      width: `${colSize}`,
+      "max-width": `${colSize}`
+    };
+  }
+  render() {
+    return h(Host, { key: "552bf87dd4905b2cfc67dbda7c33e1edf89a9cf8", style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: "293331e4b2de069f550f0d47e1525228e49fc159" }));
+  }
+};
+Col.Breakpoints = ["", "sm", "md", "lg"];
+Col.style = colCss();
+const datePickerCss = () => `:host{display:block;position:relative;max-width:21rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{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}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);box-shadow:inset 0 0 0 1px var(--theme-color-inv-contrast-text);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}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{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)}:host .grid .calendar-item.today.range{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}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{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)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected);font-weight:var(--theme-font-weight-bold)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:var(--theme-ms-0);line-height:143%;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const DatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
+    this.format = "yyyy/LL/dd";
+    this.singleSelection = false;
+    this.corners = "rounded";
+    this.minDate = "";
+    this.maxDate = "";
+    this.i18nDone = "Done";
+    this.ariaLabelPreviousMonthButton = "Previous month";
+    this.ariaLabelNextMonthButton = "Next month";
+    this.weekStartIndex = 0;
+    this.showWeekNumbers = false;
+    this.embedded = false;
+    this.today = DateTime.now().toISO();
+    this.enableTopLayer = false;
+    this.selectedYear = 0;
+    this.tempYear = 0;
+    this.startYear = 0;
+    this.endYear = 0;
+    this.selectedMonth = 0;
+    this.tempMonth = 0;
+    this.dropdownButtonRef = makeRef();
+    this.yearContainerRef = makeRef();
+    this.firstMonthRef = makeRef();
+    this.focusedDay = 1;
+    this.isDayFocus = false;
+    this.monthChangedFromFocus = false;
+    this.DAYS_IN_WEEK = 7;
+    this.calendar = [];
+  }
+  watchFromPropHandler(newValue) {
+    if (!newValue) {
+      this.currFromDate = void 0;
+      return;
+    }
+    const date = this.parseDateString(newValue);
+    if (date) {
+      this.currFromDate = date;
+      this.updateSelectedYearMonth(date);
+    }
+  }
+  watchToPropHandler(newValue) {
+    if (!newValue) {
+      this.currToDate = void 0;
+      return;
+    }
+    const date = this.parseDateString(newValue);
+    if (date) {
+      this.currToDate = date;
+      this.updateSelectedYearMonth(date);
+    }
+  }
+  onLocaleChange() {
+    this.setTranslations();
+  }
+  /**
+   * Get the currently selected date or range. The object returned contains `from` and `to` properties.
+   * The property strings are formatted according to the `format` property and not affected by the `locale` property.
+   * The locale applied is always `en-US`.
+   */
+  async getCurrentDate() {
+    var _a, _b, _c, _d;
+    const _from = ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.isValid) ? (_b = this.currFromDate) === null || _b === void 0 ? void 0 : _b.toFormat(this.format) : void 0;
+    const _to = ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.isValid) ? (_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.toFormat(this.format) : void 0;
+    if (!this.singleSelection) {
+      return {
+        from: _from,
+        to: _to
+      };
+    }
+    return {
+      from: _from,
+      to: void 0
+    };
+  }
+  handleKeyUp(event) {
+    if (!this.isDayFocus) {
+      return;
+    }
+    let _focusedDay = this.focusedDay;
+    switch (event.key) {
+      case "ArrowLeft":
+        _focusedDay--;
+        break;
+      case "ArrowRight":
+        _focusedDay++;
+        break;
+      case "ArrowUp":
+        _focusedDay = _focusedDay - 7;
+        break;
+      case "ArrowDown":
+        _focusedDay = _focusedDay + 7;
+        break;
+      default:
+        return;
+    }
+    if (_focusedDay > this.getDaysInCurrentMonth()) {
+      _focusedDay = _focusedDay - this.getDaysInCurrentMonth();
+      this.changeToAdjacentMonth(1);
+      this.monthChangedFromFocus = true;
+    } else if (_focusedDay < 1) {
+      this.changeToAdjacentMonth(-1);
+      _focusedDay = _focusedDay + this.getDaysInCurrentMonth();
+      this.monthChangedFromFocus = true;
+    }
+    this.focusedDay = _focusedDay;
+  }
+  getDaysInCurrentMonth() {
+    return DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0;
+  }
+  getDateTimeNow() {
+    return DateTime.fromISO(this.today);
+  }
+  parseDateString(dateString) {
+    const date = DateTime.fromFormat(dateString, this.format);
+    if (!date.isValid) {
+      console.error(date.invalidExplanation);
+      return void 0;
+    }
+    return date;
+  }
+  updateSelectedYearMonth(date) {
+    this.selectedYear = date.year;
+    this.selectedMonth = date.month - 1;
+  }
+  onDayBlur() {
+    this.isDayFocus = false;
+  }
+  onDayFocus() {
+    this.isDayFocus = true;
+  }
+  componentWillLoad() {
+    var _a, _b, _c, _d;
+    this.setTranslations();
+    this.currFromDate = this.from ? DateTime.fromFormat(this.from, this.format) : void 0;
+    this.currToDate = this.to ? DateTime.fromFormat(this.to, this.format) : void 0;
+    const year = (_b = (_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : this.getDateTimeNow().year;
+    this.startYear = year - 5;
+    this.endYear = year + 5;
+    this.selectedMonth = ((_d = (_c = this.currFromDate) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : this.getDateTimeNow().month) - 1;
+    this.selectedYear = year;
+    this.tempMonth = this.selectedMonth;
+    this.tempYear = this.selectedYear;
+  }
+  componentWillRender() {
+    this.calculateCalendar();
+  }
+  componentDidRender() {
+    if (!this.monthChangedFromFocus && !this.isDayFocus) {
+      return;
+    }
+    const dayElem = this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);
+    dayElem.focus();
+  }
+  setTranslations() {
+    this.dayNames = this.rotateWeekDayNames(Info.weekdays("long", {
+      locale: this.locale
+    }), this.weekStartIndex);
+    this.monthNames = Info.months("long", {
+      locale: this.locale
+    });
+  }
+  /**
+   * Rotate the WeekdayNames array.
+   * Based on the position that should be the new 0-index.
+   */
+  rotateWeekDayNames(weekdays, index) {
+    const clone = [...weekdays];
+    if (index === 0) {
+      return clone;
+    }
+    index = -index;
+    const len = weekdays.length;
+    clone.push(...clone.splice(0, (-index % len + len) % len));
+    return clone;
+  }
+  async onDone() {
+    const date = await this.getCurrentDate();
+    this.dateSelect.emit(date);
+  }
+  calculateCalendar() {
+    const calendar = [];
+    const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);
+    const monthStart = month.startOf("month");
+    const monthEnd = month.endOf("month");
+    let startWeek = monthStart.weekNumber;
+    let endWeek = monthEnd.weekNumber;
+    let monthStartWeekDayIndex = monthStart.weekday - 1;
+    let monthEndWeekDayIndex = monthEnd.weekday - 1;
+    if (this.weekStartIndex !== 0) {
+      const weekdays = Info.weekdays();
+      const monthStartWeekDayName = weekdays[monthStart.weekday];
+      monthStartWeekDayIndex = this.dayNames.findIndex((d) => d === monthStartWeekDayName);
+      const monthEndWeekDayName = weekdays[monthEnd.weekday];
+      monthEndWeekDayIndex = this.dayNames.findIndex((d) => d === monthEndWeekDayName);
+    }
+    let correctLastWeek = false;
+    if (endWeek === 1) {
+      endWeek = monthEnd.weeksInWeekYear + 1;
+      correctLastWeek = true;
+    }
+    let correctFirstWeek = false;
+    if (startWeek === monthStart.weeksInWeekYear) {
+      startWeek = 1;
+      endWeek++;
+      correctFirstWeek = true;
+    }
+    let currDayNumber = 1;
+    for (let weekIndex = startWeek; weekIndex <= endWeek && currDayNumber <= 31; weekIndex++) {
+      const daysArr = [];
+      for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {
+        if (weekIndex === startWeek && j < monthStartWeekDayIndex || weekIndex === endWeek && j > monthEndWeekDayIndex) {
+          daysArr.push(void 0);
+        } else {
+          daysArr.push(currDayNumber++);
+        }
+      }
+      if (correctFirstWeek || correctLastWeek) {
+        if (weekIndex === 1) {
+          calendar.push({
+            weekNumber: monthStart.weeksInWeekYear,
+            dayNumbers: daysArr
+          });
+        } else if (weekIndex === monthEnd.weekNumber) {
+          calendar.push({
+            weekNumber: 1,
+            dayNumbers: daysArr
+          });
+        } else {
+          calendar.push({
+            weekNumber: weekIndex - 1,
+            dayNumbers: daysArr
+          });
+        }
+        continue;
+      }
+      calendar.push({
+        weekNumber: weekIndex,
+        dayNumbers: daysArr
+      });
+    }
+    this.calendar = calendar;
+  }
+  selectTempYear(event, year) {
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.tempYear = year;
+  }
+  focusMonth() {
+    var _a;
+    (_a = this.firstMonthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  infiniteScrollYears() {
+    const yearContainer = this.yearContainerRef.current;
+    if (!yearContainer) {
+      return;
+    }
+    const scroll = yearContainer.scrollTop;
+    const maxScroll = yearContainer.scrollHeight;
+    const atTop = scroll === 0;
+    const atBottom = Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;
+    const limit = 200;
+    if (this.endYear - this.startYear > limit)
+      return;
+    if (atTop) {
+      const first = yearContainer.firstElementChild;
+      this.startYear -= 5;
+      yearContainer.scrollTo(0, first.offsetTop);
+      return;
+    }
+    if (atBottom) {
+      const last = yearContainer.lastElementChild;
+      this.endYear += 5;
+      yearContainer.scrollTo(0, last.offsetTop);
+    }
+  }
+  selectMonth(month) {
+    this.selectedMonth = month;
+    this.selectedYear = this.tempYear;
+    this.tempMonth = month;
+    const dropdown = this.hostElement.shadowRoot.querySelector("ix-dropdown");
+    if (dropdown) {
+      dropdown.show = false;
+    }
+  }
+  changeToAdjacentMonth(number) {
+    if (this.selectedMonth + number < 0) {
+      this.selectedYear--;
+      this.selectedMonth = 11;
+    } else if (this.selectedMonth + number > 11) {
+      this.selectedYear++;
+      this.selectedMonth = 0;
+    } else {
+      this.selectedMonth += number;
+    }
+  }
+  selectDay(selectedDay, target) {
+    if (target.classList.contains("disabled")) {
+      return;
+    }
+    const date = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, selectedDay));
+    if (this.singleSelection || this.currFromDate === void 0) {
+      this.currFromDate = date;
+      this.onDateChange();
+      return;
+    }
+    if (this.currToDate !== void 0) {
+      this.currFromDate = date;
+      this.currToDate = void 0;
+      this.onDateChange();
+      return;
+    }
+    if (date < this.currFromDate) {
+      this.currToDate = this.currFromDate;
+      this.currFromDate = date;
+      this.onDateChange();
+      return;
+    }
+    this.currToDate = date;
+    this.onDateChange();
+  }
+  onDateChange() {
+    this.getCurrentDate().then((date) => {
+      this.dateChange.emit(date);
+      if (!this.singleSelection) {
+        this.dateRangeChange.emit(date);
+      }
+    });
+  }
+  getDayClasses(day) {
+    var _a, _b, _c;
+    const todayObj = this.getDateTimeNow();
+    const selectedDayObj = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
+    return {
+      "calendar-item": true,
+      "empty-day": day === void 0,
+      today: todayObj.hasSame(selectedDayObj, "day"),
+      selected: !!(((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, "day")) || ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, "day"))),
+      range: !!(this.currFromDate && selectedDayObj.startOf("day") > this.currFromDate.startOf("day") && this.currToDate !== void 0 && selectedDayObj.startOf("day") < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf("day"))),
+      disabled: !this.isWithinMinMaxDate(selectedDayObj)
+    };
+  }
+  isWithinMinMaxYear(year) {
+    const minDateYear = this.minDate ? DateTime.fromFormat(this.minDate, this.format).year : void 0;
+    const maxDateYear = this.maxDate ? DateTime.fromFormat(this.maxDate, this.format).year : void 0;
+    const isBefore = minDateYear ? year < minDateYear : false;
+    const isAfter = maxDateYear ? year > maxDateYear : false;
+    return !isBefore && !isAfter;
+  }
+  isWithinMinMaxMonth(month) {
+    const minDateObj = this.minDate ? DateTime.fromFormat(this.minDate, this.format) : void 0;
+    const maxDateObj = this.maxDate ? DateTime.fromFormat(this.maxDate, this.format) : void 0;
+    const minDateMonth = minDateObj === null || minDateObj === void 0 ? void 0 : minDateObj.month;
+    const maxDateMonth = maxDateObj === null || maxDateObj === void 0 ? void 0 : maxDateObj.month;
+    const isBefore = minDateMonth ? this.tempYear === minDateObj.year && month < minDateMonth : false;
+    const isAfter = maxDateMonth ? this.tempYear === maxDateObj.year && month > maxDateMonth : false;
+    return !isBefore && !isAfter;
+  }
+  isWithinMinMaxDate(date) {
+    const _minDate = this.minDate ? DateTime.fromFormat(this.minDate, this.format) : void 0;
+    const _maxDate = this.maxDate ? DateTime.fromFormat(this.maxDate, this.format) : void 0;
+    const isBefore = _minDate ? date.startOf("day") < _minDate.startOf("day") : false;
+    const isAfter = _maxDate ? date.startOf("day") > _maxDate.startOf("day") : false;
+    return !isBefore && !isAfter;
+  }
+  renderYears() {
+    const rows = [];
+    for (let year = this.startYear; year <= this.endYear; year++) {
+      rows.push(h("div", { key: year, class: {
+        arrowYear: true,
+        "month-dropdown-item": true,
+        "disabled-item": !this.isWithinMinMaxYear(year)
+      }, onClick: (event) => this.selectTempYear(event, year), onKeyUp: (event) => {
+        if (event.key === "Enter") {
+          this.tempYear = year;
+          this.focusMonth();
+        }
+      }, tabIndex: 0 }, h("ix-icon", { class: {
+        hidden: this.tempYear !== year,
+        arrowPosition: true
+      }, name: iconChevronRightSmall, size: "12" }), h("div", { style: { "min-width": "max-content" } }, `${year}`)));
+    }
+    return rows;
+  }
+  render() {
+    return h(Host, { key: "98ea6b7a88faa52ff75b8bba1cb2c9e22c4e73e8" }, h("ix-date-time-card", { key: "e16c7a978263147e3e6b4a71f32d934eddf06d2c", corners: this.corners, embedded: this.embedded }, h("div", { key: "b96e24b6b2d1876c9e10be3791a8a7417d83a380", class: "header", slot: "header" }, h("ix-icon-button", { key: "10ca5417cb64bb25679269f4608868d057cb9f54", onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: "9a286af048e16def6e92bb5aaeef56ca63eeb819", class: "selector" }, h("ix-button", { key: "9c95aef10ee98999301b796562109b62ab460328", variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: "87f8874169536008fc5a95ebb5f27c2d90c74013", class: "capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: "03b7ee75c45fbf966782b6685956ca16f1b9ea7d", "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start", enableTopLayer: this.enableTopLayer }, h("div", { key: "6ebe9445e018d9ea0d8ea234ffe04bd5b7c756d6", class: "wrapper" }, h("div", { key: "560f769508c69c1ca7ae836f657d6b2a9a0f54dc", "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: "8a933460c220113a5bfe96d8b59948c43095e073", class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => h("div", { key: month, ref: (ref) => {
+      if (month === this.monthNames[0]) {
+        this.firstMonthRef(ref);
+      }
+    }, class: {
+      arrowYear: true,
+      "month-dropdown-item": true,
+      selected: this.tempYear === this.selectedYear && this.tempMonth === index,
+      "disabled-item": !this.isWithinMinMaxMonth(index)
+    }, onClick: () => this.selectMonth(index), onKeyUp: (event) => event.key === "Enter" && this.selectMonth(index), tabIndex: 0 }, h("ix-icon", { class: {
+      hidden: this.tempYear !== this.selectedYear || this.tempMonth !== index,
+      checkPosition: true
+    }, name: iconSingleCheck, size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`)))))))), h("ix-icon-button", { key: "d183b81face1835095ebf6b0f0b741f3bd177434", onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: "747249d090059b0beea2d522efaafa0e816bd9b5", class: {
+      grid: true,
+      "grid--show-week-numbers": this.showWeekNumbers
+    } }, this.showWeekNumbers && h("div", { key: "30566707d9ad58aea828bc579abb42fab5078d4e", class: "calendar-item week-day" }), this.dayNames.map((name) => h("div", { key: name, class: "calendar-item week-day" }, h("div", { class: "overflow" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      return h(Fragment, null, this.showWeekNumbers && h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => {
+        return day ? h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
+          const target = e.currentTarget;
+          this.selectDay(day, target);
+        }, onKeyUp: (e) => {
+          const target = e.currentTarget;
+          if (e.key === "Enter") {
+            this.selectDay(day, target);
+          }
+        }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${this.selectedMonth}: ${day}` }, day) : h("div", null);
+      }));
+    })), h("div", { key: "2b9a45684c662329a1e6e16062f5710d62112210", class: {
+      button: true,
+      hidden: this.singleSelection || this.embedded
+    } }, h("ix-button", { key: "35de7243b5de0016794880b7287a96b60dc2676c", onClick: () => this.onDone() }, this.i18nDone))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "from": [{
+        "watchFromPropHandler": 0
+      }],
+      "to": [{
+        "watchToPropHandler": 0
+      }],
+      "locale": [{
+        "onLocaleChange": 0
+      }]
+    };
+  }
+};
+__decorate([
+  OnListener("keydown")
+], DatePicker.prototype, "handleKeyUp", null);
+DatePicker.style = datePickerCss();
+const layoutGridCss = () => `:host{--ix-layout-grid-gutter:24px;display:block;flex:1 1 0%;width:100%;padding-left:calc(var(--ix-layout-grid-gutter) * 0.5);padding-right:calc(var(--ix-layout-grid-gutter) * 0.5)}:host(.no-margin){padding-left:0;padding-right:0}`;
+const LayoutGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.noMargin = false;
+    this.gap = "24";
+    this.columns = 12;
+  }
+  render() {
+    return h(Host, { key: "7ca75d3fb578d30d3b8e3d5d4455123ee7344456", class: {
+      "no-margin": this.noMargin
+    }, style: {
+      "--ix-layout-grid-columns": `${this.columns}`,
+      "--ix-layout-grid-gutter": `${this.gap}px`
+    } }, h("slot", { key: "566e2bf1294f8780e4aedb8e2874bd2f216d3712" }));
+  }
+};
+LayoutGrid.style = layoutGridCss();
+const rowCss = () => `:host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}`;
+const Row = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h(Host, { key: "f38fd53867857b85a1b2d618125c81bba478cdac" }, h("slot", { key: "1fbd414a8c0bb275dcdc88a0e4ff54e944212739" }));
+  }
+};
+Row.style = rowCss();
+export {
+  Col as ix_col,
+  DatePicker as ix_date_picker,
+  LayoutGrid as ix_layout_grid,
+  Row as ix_row
+};

package/build/static/demo/v2/preview/html/assets/ix-content-header.entry-B2rb6wwv.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+import { n as iconArrowLeft } from "./index-BBzEV-f4-ChQfUIyc.js";
+const contentHeaderCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;padding:0}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0;min-width:0;white-space:nowrap;margin-right:0.5rem}:host .titleGroup .titleOverflow{overflow:hidden;text-overflow:ellipsis}:host .titleGroup .headerTitleRow{display:flex}:host .titleGroup .headerTitleRow .headerSlot{display:inline-flex;margin-left:0.5rem}:host .titleGroup .secondary{padding:0.25rem 0}:host .subtitle{margin-top:-0.125rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}`;
+const ContentHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.backButtonClick = createEvent(this, "backButtonClick", 7);
+    this.variant = "primary";
+    this.headerSubtitle = void 0;
+    this.hasBackButton = false;
+  }
+  render() {
+    return h(Host, { key: "b422be3706aac399ed76b4c491d61e2da8561b24" }, this.hasBackButton ? h("ix-icon-button", { class: "backButton", variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() }) : null, h("div", { key: "7606ba97f834f591a78fc2cca74bdaf3b3a09feb", class: "titleGroup" }, h("div", { key: "df174e297a1b2075bcab0182a80f626162d1c319", class: "headerTitleRow" }, h("ix-typography", { key: "d8ab10dc801306dafe0f3e6e39ed93e0fa162ca1", format: this.variant === "secondary" ? "h4" : "h3", class: {
+      secondary: this.variant === "secondary",
+      titleOverflow: true
+    } }, this.headerTitle), h("div", { key: "e24d6b450426931aaead3732fa20161bc5aab4e2", class: "headerSlot" }, h("slot", { key: "e9a471492f2693fc6abe546d1febbc06834fef1c", name: "header" }))), !!this.headerSubtitle && h("ix-typography", { key: "5fdb5ebce68a3aae09df3299093bca156468933c", format: "h6", "text-color": "soft", class: {
+      subtitle: this.variant === "secondary",
+      titleOverflow: true
+    }, title: this.headerSubtitle }, this.headerSubtitle)), h("div", { key: "6648f93246d2e8d79cc2d3e7eae65009d578632c", class: "buttons" }, h("slot", { key: "1c3ee8084521a9a799e3b2444b1edc0c1cee5066" })));
+  }
+};
+ContentHeader.style = contentHeaderCss();
+export {
+  ContentHeader as ix_content_header
+};

package/build/static/demo/v2/preview/html/assets/ix-content.entry-DGPFvRYj.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { h as hasSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+const contentCss = () => `:host{display:flex;flex-direction:column;position:relative;padding:1.5rem 2rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1rem}`;
+const Content = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isContentHeaderSlotted = false;
+  }
+  get contentHeaderSlot() {
+    return this.hostElement.shadowRoot.querySelector(".content-header slot");
+  }
+  render() {
+    return h(Host, { key: "2ca4af3b088beab36b86cb3431f1d1b59fcf8756" }, h("div", { key: "04f73ba733dc7fbf57ecf6fdc0afc1fec8249b8e", class: {
+      "content-header": true,
+      slotted: this.isContentHeaderSlotted
+    } }, h("slot", { key: "962e83643e1ebcd86384cae1e7a3632b6f47554e", name: "header", onSlotchange: () => {
+      this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
+    } })), h("div", { key: "4315ac1e71743ba30c7b8f592997c662eed392b4", class: "content" }, h("slot", { key: "c1f31f8e283bcc55011b9f2d5746d9b7c10988da" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+Content.style = contentCss();
+export {
+  Content as ix_content
+};

package/build/static/demo/v2/preview/html/assets/ix-css-grid-item.entry-te-lGhkq.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const cssGridItemCss = () => `:host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}`;
+const CssGridItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const style = {};
+    style["grid-area"] = this.itemName;
+    return h(Host, { key: "0f7a1001629ec09b7e6f44470b733f3d1d691bcb", style }, h("slot", { key: "1fce4a329cea68181bc52e60d155d6c6b7bb41bc" }));
+  }
+};
+CssGridItem.style = cssGridItemCss();
+export {
+  CssGridItem as ix_css_grid_item
+};