genesys-spark-components 4.26.1-beta.0 → 4.26.1

package/dist/cjs/gux-calendar.cjs.entry.js

@@ -2,393 +2,394 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
-const afterNextRender = require('./after-next-render-a023ef47.js');
-const isoDates = require('./iso-dates-d0cd4802.js');
-const usage = require('./usage-287da480.js');
-const index$1 = require('./index-dee802be.js');
-const capitalizeFirstLetter = require('./capitalize-first-letter-251c82ed.js');
-const checkRegionalDatesCookie = require('./check-regional-dates-cookie-2b234ae2.js');
-require('./get-closest-element-26894e5a.js');
+const index = require('./index-7fb02c8c.js');
+const afterNextRender = require('./after-next-render-162425fe.js');
+const isoDates = require('./iso-dates-2daf4199.js');
+const usage = require('./usage-623a7a81.js');
+const index$1 = require('./index-a1a48d79.js');
+const capitalizeFirstLetter = require('./capitalize-first-letter-424667dc.js');
+const checkRegionalDatesCookie = require('./check-regional-dates-cookie-406e21e2.js');
+require('./get-closest-element-9e41d6b9.js');
 
 function addClassToElements(elements, className) {
-  manipulateElementsClasses(elements, 'add', className);
+    manipulateElementsClasses(elements, 'add', className);
 }
 function removeClassToElements(elements, className) {
-  manipulateElementsClasses(elements, 'remove', className);
+    manipulateElementsClasses(elements, 'remove', className);
 }
 function manipulateElementsClasses(elements = [], action, className) {
-  const arr = [].concat(elements);
-  for (const el of arr) {
-    el.classList[action](className);
-  }
+    const arr = [].concat(elements);
+    for (const el of arr) {
+        el.classList[action](className);
+    }
 }
 
 function firstDateInMonth(month, year, startDayOfWeek) {
-  const startDate = new Date(year, month, 1, 1, 0, 0, 0);
-  const firstDayOfMonth = startDate.getDay();
-  const firstDayOffset = (-1 * (startDayOfWeek - firstDayOfMonth - 7)) % 7;
-  return new Date(startDate.getTime() - firstDayOffset * (86400 * 1000));
+    const startDate = new Date(year, month, 1, 1, 0, 0, 0);
+    const firstDayOfMonth = startDate.getDay();
+    const firstDayOffset = (-1 * (startDayOfWeek - firstDayOfMonth - 7)) % 7;
+    return new Date(startDate.getTime() - firstDayOffset * (86400 * 1000));
 }
 function getWeekdays(locale, startDayOfWeek) {
-  const days = [];
-  // Sunday
-  const day = new Date(1970, 0, 4);
-  for (let i = 0; i < 7; i++) {
-    const weekday = day.toLocaleString(locale, { weekday: 'narrow' });
-    days.push(weekday);
-    day.setDate(day.getDate() + 1);
-  }
-  return shiftArray(days, startDayOfWeek);
+    const days = [];
+    // Sunday
+    const day = new Date(1970, 0, 4);
+    for (let i = 0; i < 7; i++) {
+        const weekday = day.toLocaleString(locale, { weekday: 'narrow' });
+        days.push(weekday);
+        day.setDate(day.getDate() + 1);
+    }
+    return shiftArray(days, startDayOfWeek);
 }
 function shiftArray(arr, n) {
-  const times = n > arr.length ? n % arr.length : n;
-  return arr.concat(arr.splice(0, times));
+    const times = n > arr.length ? n % arr.length : n;
+    return arr.concat(arr.splice(0, times));
 }
 function getOffsetMonthDate(baseDate, monthDelta) {
-  const date = new Date(baseDate);
-  date.setDate(1);
-  date.setMonth(date.getMonth() + monthDelta);
-  return date;
+    const date = new Date(baseDate);
+    date.setDate(1);
+    date.setMonth(date.getMonth() + monthDelta);
+    return date;
 }
 function getDateMonthAndYearString(date, locale) {
-  if (checkRegionalDatesCookie.readRegionalDatesCookie()) {
-    return capitalizeFirstLetter.capitalizeFirstLetter(checkRegionalDatesCookie.dateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'long'
-    })
-      .format(date));
-  }
-  else {
-    return capitalizeFirstLetter.capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
-  }
+    if (checkRegionalDatesCookie.readRegionalDatesCookie()) {
+        return capitalizeFirstLetter.capitalizeFirstLetter(checkRegionalDatesCookie.dateTimeFormat(locale, {
+            year: 'numeric',
+            month: 'long'
+        })
+            .format(date));
+    }
+    else {
+        return capitalizeFirstLetter.capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
+    }
 }
 
 const guxCalendarCss = ":host{display:inline-block}.gux-calendar{margin-top:2px;border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);box-shadow:var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color)}.gux-calendar .gux-header{position:relative;display:flex;gap:var(--gse-ui-calendarMenu-header-gap);align-items:center;justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar .gux-header button{position:absolute;color:var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);cursor:pointer;background:none;border:none;outline:none}.gux-calendar .gux-header button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color)}.gux-calendar .gux-header button.gux-left{left:18px}.gux-calendar .gux-header button.gux-right{right:18px}.gux-calendar .gux-header button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);pointer-events:none}.gux-calendar .gux-header .gux-month-list{display:flex;justify-content:space-between;width:100%;font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight)}.gux-calendar .gux-header .gux-month-list label{width:100%;text-align:center}.gux-calendar .gux-content{display:flex;align-items:flex-start;padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-ui-calendarMenu-month-default-foregroundColor);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar .gux-content table{width:var(--gse-ui-calendarMenu-day-input-width);text-align:left;table-layout:fixed;border-spacing:0;-ms-user-select:none;user-select:none}.gux-calendar .gux-content table:not(:last-child){padding-right:24px}.gux-calendar .gux-content table tr{height:var(--gse-ui-calendarMenu-day-input-height)}.gux-calendar .gux-content table tr:empty{display:none}.gux-calendar .gux-content table tr th,.gux-calendar .gux-content table tr td{width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-date-size);padding:0;margin:0;text-align:center}.gux-calendar .gux-content table tr th{font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);line-height:var(--gse-ui-calendarMenu-day-headerText-lineHeight)}.gux-calendar .gux-content table tr td{font-family:var(--gse-ui-calendarMenu-date-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-defaultText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-defaultText-fontWeight);line-height:var(--gse-ui-calendarMenu-date-defaultText-lineHeight);color:var(--gse-ui-calendarMenu-date-default-foregroundColor);cursor:pointer}.gux-calendar .gux-content table tr td.gux-hovered{background-color:var(--gse-ui-calendarMenu-date-range-backgroundColor)}.gux-calendar .gux-content table tr td.gux-selected{color:var(--gse-ui-calendarMenu-date-selected-foregroundColor);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar .gux-content table tr td.gux-selected:hover:not(.gux-calendar .gux-content table tr td.gux-selected.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-selected.gux-end-date){background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar .gux-content table tr td.gux-start-date,.gux-calendar .gux-content table tr td.gux-end-date{background-color:var(--gse-ui-calendarMenu-date-range-backgroundColor)}.gux-calendar .gux-content table tr td.gux-start-date .gux-date,.gux-calendar .gux-content table tr td.gux-end-date .gux-date{display:flex;align-items:center;justify-content:center;width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-date-size);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar .gux-content table tr td.gux-start-date .gux-date:hover,.gux-calendar .gux-content table tr td.gux-end-date .gux-date:hover{background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar .gux-content table tr td.gux-start-date{border-radius:16px 0 0 16px}.gux-calendar .gux-content table tr td.gux-end-date{border-radius:0 16px 16px 0}.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date):not(.gux-calendar .gux-content table tr td.gux-hovered):not(.gux-calendar .gux-content table tr td.gux-selected){background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar .gux-content table tr td.gux-disabled{pointer-events:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar .gux-content table tr td.gux-not-in-month{opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar .gux-content table tr td.gux-not-in-month:hover{background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor)}.gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden{visibility:hidden}.gux-calendar .gux-content table tr td.gux-current-date{font-family:var(--gse-ui-calendarMenu-date-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-currentText-fontWeight);line-height:var(--gse-ui-calendarMenu-date-currentText-lineHeight)}.gux-calendar .gux-content table tr td:focus-visible{border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-semantic-focusRing-default-border-width) solid var(--gse-semantic-focusRing-default-border-color)}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const GuxCalendarStyle0 = guxCalendarCss;
 
 const GuxCalendar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.calendarSelect = index.createEvent(this, "calendarSelect", 7);
-    this.locale = 'en';
-    this.value = '';
-    this.minDate = '';
-    this.maxDate = '';
-    this.mode = "single" /* CalendarModes.Single */;
-    this.numberOfMonths = 1;
-    this.startDayOfWeek = undefined;
-    this.previewValue = new Date();
-    this.selectingDate = null;
-  }
-  emitCalendarSelect() {
-    this.calendarSelect.emit(this.value);
-  }
-  /**
-   * Sets new value and rerender the calendar
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async setValue(value) {
-    if (this.mode === "range" /* CalendarModes.Range */ && value instanceof Array) {
-      const [date1, date2] = value;
-      this.value = isoDates.asIsoDateRange(date1, date2); // sorts
-      this.previewValue = isoDates.fromIsoDateRange(this.value)[0];
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calendarSelect = index.createEvent(this, "calendarSelect", 7);
+        this.locale = 'en';
+        this.value = '';
+        this.minDate = '';
+        this.maxDate = '';
+        this.mode = "single" /* CalendarModes.Single */;
+        this.numberOfMonths = 1;
+        this.startDayOfWeek = undefined;
+        this.previewValue = new Date();
+        this.selectingDate = null;
     }
-    else {
-      const selected = value;
-      this.value = isoDates.asIsoDate(selected);
-      this.previewValue = selected;
+    emitCalendarSelect() {
+        this.calendarSelect.emit(this.value);
     }
-  }
-  /**
-   * Focus the preview date
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async focusPreviewDate() {
-    const target = this.root.shadowRoot.querySelector(`td[data-date="${this.previewValue.getTime()}"]`);
-    if (target) {
-      target.focus();
-    }
-  }
-  /**
-   * Reset calendar view to show first selected date
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async resetCalendarView(value) {
-    this.previewValue = value;
-  }
-  incrementPreviewDateByMonth(increment) {
-    this.previewValue = new Date(this.previewValue.getFullYear(), this.previewValue.getMonth() + increment, 15, // Don't use the day from the old value, because we'll skip a month on the 31st
-    0, 0, 0);
-    // Wait for render before focusing preview date
-    afterNextRender.afterNextRenderTimeout(() => {
-      void this.focusPreviewDate();
-    });
-  }
-  async setValueAndEmit(value) {
-    await this.setValue(value);
-    this.emitCalendarSelect();
-  }
-  outOfBounds(date) {
-    return ((this.maxDate !== '' && isoDates.fromIsoDate(this.maxDate) < date) ||
-      (this.minDate !== '' && isoDates.fromIsoDate(this.minDate) > date));
-  }
-  generateDatesFrom(month, startDate, length) {
-    const arr = [];
-    const currentDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), 0, 0, 0, 0);
-    for (let i = 0; i < length; i++) {
-      const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0, 0);
-      const classes = [];
-      const today = new Date();
-      const isToday = currentDate.getFullYear() === today.getFullYear() &&
-        currentDate.getMonth() === today.getMonth() &&
-        currentDate.getDate() === today.getDate();
-      let disabled = false;
-      let hidden = false;
-      if (date.getMonth() !== month) {
-        classes.push('gux-not-in-month');
-        disabled = true;
-        if (this.mode === "range" /* CalendarModes.Range */) {
-          classes.push('gux-hidden');
-          hidden = true;
+    /**
+     * Sets new value and rerender the calendar
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async setValue(value) {
+        if (this.mode === "range" /* CalendarModes.Range */ && value instanceof Array) {
+            const [date1, date2] = value;
+            this.value = isoDates.asIsoDateRange(date1, date2); // sorts
+            this.previewValue = isoDates.fromIsoDateRange(this.value)[0];
         }
-      }
-      if (this.outOfBounds(date)) {
-        classes.push('gux-disabled');
-        disabled = true;
-      }
-      let isSelected = false;
-      if (isToday) {
-        classes.push('gux-current-date');
-      }
-      if (this.mode === "range" /* CalendarModes.Range */) {
-        const [start, end] = isoDates.fromIsoDateRange(this.value);
-        const fromTimeStamp = start.getTime();
-        const toTimeStamp = end.getTime();
-        if (date.getTime() === fromTimeStamp &&
-          date.getTime() === toTimeStamp) {
-          isSelected = true;
-          classes.push('gux-selected');
+        else {
+            const selected = value;
+            this.value = isoDates.asIsoDate(selected);
+            this.previewValue = selected;
         }
-        else if (date.getTime() === fromTimeStamp) {
-          isSelected = true;
-          classes.push('gux-selected');
-          classes.push('gux-start-date');
+    }
+    /**
+     * Focus the preview date
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async focusPreviewDate() {
+        const target = this.root.shadowRoot.querySelector(`td[data-date="${this.previewValue.getTime()}"]`);
+        if (target) {
+            target.focus();
         }
-        else if (date.getTime() === toTimeStamp) {
-          isSelected = true;
-          classes.push('gux-selected');
-          classes.push('gux-end-date');
+    }
+    /**
+     * Reset calendar view to show first selected date
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async resetCalendarView(value) {
+        this.previewValue = value;
+    }
+    incrementPreviewDateByMonth(increment) {
+        this.previewValue = new Date(this.previewValue.getFullYear(), this.previewValue.getMonth() + increment, 15, // Don't use the day from the old value, because we'll skip a month on the 31st
+        0, 0, 0);
+        // Wait for render before focusing preview date
+        afterNextRender.afterNextRenderTimeout(() => {
+            void this.focusPreviewDate();
+        });
+    }
+    async setValueAndEmit(value) {
+        await this.setValue(value);
+        this.emitCalendarSelect();
+    }
+    outOfBounds(date) {
+        return ((this.maxDate !== '' && isoDates.fromIsoDate(this.maxDate) < date) ||
+            (this.minDate !== '' && isoDates.fromIsoDate(this.minDate) > date));
+    }
+    generateDatesFrom(month, startDate, length) {
+        const arr = [];
+        const currentDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), 0, 0, 0, 0);
+        for (let i = 0; i < length; i++) {
+            const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0, 0);
+            const classes = [];
+            const today = new Date();
+            const isToday = currentDate.getFullYear() === today.getFullYear() &&
+                currentDate.getMonth() === today.getMonth() &&
+                currentDate.getDate() === today.getDate();
+            let disabled = false;
+            let hidden = false;
+            if (date.getMonth() !== month) {
+                classes.push('gux-not-in-month');
+                disabled = true;
+                if (this.mode === "range" /* CalendarModes.Range */) {
+                    classes.push('gux-hidden');
+                    hidden = true;
+                }
+            }
+            if (this.outOfBounds(date)) {
+                classes.push('gux-disabled');
+                disabled = true;
+            }
+            let isSelected = false;
+            if (isToday) {
+                classes.push('gux-current-date');
+            }
+            if (this.mode === "range" /* CalendarModes.Range */) {
+                const [start, end] = isoDates.fromIsoDateRange(this.value);
+                const fromTimeStamp = start.getTime();
+                const toTimeStamp = end.getTime();
+                if (date.getTime() === fromTimeStamp &&
+                    date.getTime() === toTimeStamp) {
+                    isSelected = true;
+                    classes.push('gux-selected');
+                }
+                else if (date.getTime() === fromTimeStamp) {
+                    isSelected = true;
+                    classes.push('gux-selected');
+                    classes.push('gux-start-date');
+                }
+                else if (date.getTime() === toTimeStamp) {
+                    isSelected = true;
+                    classes.push('gux-selected');
+                    classes.push('gux-end-date');
+                }
+            }
+            else {
+                const selectedTimestamp = isoDates.fromIsoDate(this.value).getTime();
+                if (date.getTime() === selectedTimestamp) {
+                    isSelected = true;
+                    classes.push('gux-selected');
+                }
+            }
+            arr.push({
+                class: classes.join(' '),
+                date,
+                hidden,
+                disabled,
+                selected: isSelected,
+                isToday
+            });
+            currentDate.setDate(currentDate.getDate() + 1);
         }
-      }
-      else {
-        const selectedTimestamp = isoDates.fromIsoDate(this.value).getTime();
-        if (date.getTime() === selectedTimestamp) {
-          isSelected = true;
-          classes.push('gux-selected');
+        return arr;
+    }
+    create2DArray(arr, chunkSize) {
+        const result = [];
+        for (let i = 0; i < chunkSize - 1; i++) {
+            const week = arr.slice(i * chunkSize, i * chunkSize + chunkSize);
+            if (this.weekShouldBeDisplayed(week)) {
+                result.push(week);
+            }
         }
-      }
-      arr.push({
-        class: classes.join(' '),
-        date,
-        hidden,
-        disabled,
-        selected: isSelected,
-        isToday
-      });
-      currentDate.setDate(currentDate.getDate() + 1);
+        return result;
     }
-    return arr;
-  }
-  create2DArray(arr, chunkSize) {
-    const result = [];
-    for (let i = 0; i < chunkSize - 1; i++) {
-      const week = arr.slice(i * chunkSize, i * chunkSize + chunkSize);
-      if (this.weekShouldBeDisplayed(week)) {
-        result.push(week);
-      }
+    isFocusableDate(day) {
+        return day.selected || this.previewValue.getTime() === day.date.getTime();
     }
-    return result;
-  }
-  isFocusableDate(day) {
-    return day.selected || this.previewValue.getTime() === day.date.getTime();
-  }
-  weekShouldBeDisplayed(week) {
-    const hasNonHiddenDate = week.find(date => {
-      return !date.hidden;
-    });
-    return week.length && !!hasNonHiddenDate;
-  }
-  getMonthDays(index) {
-    const month = new Date(this.previewValue.getTime());
-    month.setDate(1);
-    month.setMonth(month.getMonth() + index);
-    const monthIndex = month.getMonth();
-    const year = month.getFullYear();
-    const startDate = firstDateInMonth(monthIndex, year, this.startDayOfWeek);
-    const datesArray = this.generateDatesFrom(monthIndex, startDate, 42);
-    return this.create2DArray(datesArray, 7);
-  }
-  addDays(date, days) {
-    const newDate = new Date(date.valueOf());
-    newDate.setDate(newDate.getDate() + days);
-    return newDate;
-  }
-  getAllDatesElements() {
-    const targets = this.root.shadowRoot.querySelectorAll('td');
-    return Array.from(targets);
-  }
-  getAllSelectableDatesElements() {
-    const targets = this.root.shadowRoot.querySelectorAll('td[tabindex="0"]');
-    return Array.from(targets);
-  }
-  getRangeDatesElements(from, to) {
-    const elements = [];
-    let rangeDates;
-    if (to < from) {
-      rangeDates = this.getRangeDates(to, from);
+    weekShouldBeDisplayed(week) {
+        const hasNonHiddenDate = week.find(date => {
+            return !date.hidden;
+        });
+        return week.length && !!hasNonHiddenDate;
     }
-    else {
-      rangeDates = this.getRangeDates(from, to);
+    getMonthDays(index) {
+        const month = new Date(this.previewValue.getTime());
+        month.setDate(1);
+        month.setMonth(month.getMonth() + index);
+        const monthIndex = month.getMonth();
+        const year = month.getFullYear();
+        const startDate = firstDateInMonth(monthIndex, year, this.startDayOfWeek);
+        const datesArray = this.generateDatesFrom(monthIndex, startDate, 42);
+        return this.create2DArray(datesArray, 7);
     }
-    for (const date of rangeDates) {
-      const target = this.root.shadowRoot.querySelector(`td[data-date="${date.getTime()}"]:not(.gux-hidden)`);
-      if (target) {
-        elements.push(target);
-      }
+    addDays(date, days) {
+        const newDate = new Date(date.valueOf());
+        newDate.setDate(newDate.getDate() + days);
+        return newDate;
     }
-    return elements;
-  }
-  getRangeDates(from, to) {
-    const array = [];
-    let currentDate = from;
-    while (currentDate <= to) {
-      array.push(new Date(currentDate));
-      currentDate = this.addDays(currentDate, 1);
+    getAllDatesElements() {
+        const targets = this.root.shadowRoot.querySelectorAll('td');
+        return Array.from(targets);
     }
-    return array;
-  }
-  async onDateClick(date) {
-    if (!this.outOfBounds(date)) {
-      if (this.mode !== "range" /* CalendarModes.Range */) {
-        await this.setValueAndEmit(date);
-      }
-      else {
-        if (this.selectingDate === null) {
-          // First click
-          removeClassToElements(this.getAllDatesElements(), 'gux-hovered');
-          this.selectingDate = new Date(date.valueOf());
-          this.value = isoDates.asIsoDateRange(date, date);
+    getAllSelectableDatesElements() {
+        const targets = this.root.shadowRoot.querySelectorAll('td[tabindex="0"]');
+        return Array.from(targets);
+    }
+    getRangeDatesElements(from, to) {
+        const elements = [];
+        let rangeDates;
+        if (to < from) {
+            rangeDates = this.getRangeDates(to, from);
         }
         else {
-          // Second click
-          const target = this.root.shadowRoot.querySelector(`td[data-date="${date.getTime()}"]`);
-          if (target) {
-            target.classList.add('gux-selected');
-          }
-          this.updateRangeElements();
-          await this.setValueAndEmit([this.selectingDate, date]);
-          this.previewValue = date;
-          this.selectingDate = null;
+            rangeDates = this.getRangeDates(from, to);
+        }
+        for (const date of rangeDates) {
+            const target = this.root.shadowRoot.querySelector(`td[data-date="${date.getTime()}"]:not(.gux-hidden)`);
+            if (target) {
+                elements.push(target);
+            }
         }
-      }
+        return elements;
     }
-  }
-  onDateMouseEnter(date) {
-    if (this.mode === "range" /* CalendarModes.Range */ && this.selectingDate !== null) {
-      this.value = isoDates.asIsoDateRange(date, this.selectingDate);
-      this.updateRangeElements();
+    getRangeDates(from, to) {
+        const array = [];
+        let currentDate = from;
+        while (currentDate <= to) {
+            array.push(new Date(currentDate));
+            currentDate = this.addDays(currentDate, 1);
+        }
+        return array;
     }
-  }
-  updateRangeElements() {
-    if (this.mode === "range" /* CalendarModes.Range */) {
-      removeClassToElements(this.getAllDatesElements(), 'gux-hovered');
-      const [start, end] = isoDates.fromIsoDateRange(this.value);
-      const rangeElements = this.getRangeDatesElements(start, end);
-      addClassToElements(rangeElements, 'gux-hovered');
+    async onDateClick(date) {
+        if (!this.outOfBounds(date)) {
+            if (this.mode !== "range" /* CalendarModes.Range */) {
+                await this.setValueAndEmit(date);
+            }
+            else {
+                if (this.selectingDate === null) {
+                    // First click
+                    removeClassToElements(this.getAllDatesElements(), 'gux-hovered');
+                    this.selectingDate = new Date(date.valueOf());
+                    this.value = isoDates.asIsoDateRange(date, date);
+                }
+                else {
+                    // Second click
+                    const target = this.root.shadowRoot.querySelector(`td[data-date="${date.getTime()}"]`);
+                    if (target) {
+                        target.classList.add('gux-selected');
+                    }
+                    this.updateRangeElements();
+                    await this.setValueAndEmit([this.selectingDate, date]);
+                    this.previewValue = date;
+                    this.selectingDate = null;
+                }
+            }
+        }
     }
-  }
-  async onKeyDown(event) {
-    switch (event.key) {
-      case ' ':
-      case 'Enter':
-        event.preventDefault();
-        await this.onDateClick(this.previewValue);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() + 7));
-        this.onDateMouseEnter(this.previewValue);
-        afterNextRender.afterNextRenderTimeout(() => {
-          void this.focusPreviewDate();
-        });
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() - 7));
-        this.onDateMouseEnter(this.previewValue);
-        afterNextRender.afterNextRenderTimeout(() => {
-          void this.focusPreviewDate();
-        });
-        break;
-      case 'ArrowLeft':
-        event.preventDefault();
-        this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() - 1));
-        this.onDateMouseEnter(this.previewValue);
-        afterNextRender.afterNextRenderTimeout(() => {
-          void this.focusPreviewDate();
-        });
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() + 1));
-        this.onDateMouseEnter(this.previewValue);
-        afterNextRender.afterNextRenderTimeout(() => {
-          void this.focusPreviewDate();
-        });
-        break;
-      case 'PageUp':
-        this.incrementPreviewDateByMonth(1);
-        this.onDateMouseEnter(this.previewValue);
-        break;
-      case 'PageDown':
-        this.incrementPreviewDateByMonth(-1);
-        this.onDateMouseEnter(this.previewValue);
-        break;
+    onDateMouseEnter(date) {
+        if (this.mode === "range" /* CalendarModes.Range */ && this.selectingDate !== null) {
+            this.value = isoDates.asIsoDateRange(date, this.selectingDate);
+            this.updateRangeElements();
+        }
+    }
+    updateRangeElements() {
+        if (this.mode === "range" /* CalendarModes.Range */) {
+            removeClassToElements(this.getAllDatesElements(), 'gux-hovered');
+            const [start, end] = isoDates.fromIsoDateRange(this.value);
+            const rangeElements = this.getRangeDatesElements(start, end);
+            addClassToElements(rangeElements, 'gux-hovered');
+        }
+    }
+    async onKeyDown(event) {
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                await this.onDateClick(this.previewValue);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() + 7));
+                this.onDateMouseEnter(this.previewValue);
+                afterNextRender.afterNextRenderTimeout(() => {
+                    void this.focusPreviewDate();
+                });
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() - 7));
+                this.onDateMouseEnter(this.previewValue);
+                afterNextRender.afterNextRenderTimeout(() => {
+                    void this.focusPreviewDate();
+                });
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() - 1));
+                this.onDateMouseEnter(this.previewValue);
+                afterNextRender.afterNextRenderTimeout(() => {
+                    void this.focusPreviewDate();
+                });
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.previewValue = new Date(this.previewValue.setDate(this.previewValue.getDate() + 1));
+                this.onDateMouseEnter(this.previewValue);
+                afterNextRender.afterNextRenderTimeout(() => {
+                    void this.focusPreviewDate();
+                });
+                break;
+            case 'PageUp':
+                this.incrementPreviewDateByMonth(1);
+                this.onDateMouseEnter(this.previewValue);
+                break;
+            case 'PageDown':
+                this.incrementPreviewDateByMonth(-1);
+                this.onDateMouseEnter(this.previewValue);
+                break;
+        }
+    }
+    componentWillLoad() {
+        usage.trackComponent(this.root, { variant: this.mode });
+        this.locale = index$1.getDesiredLocale(this.root);
+        this.startDayOfWeek = this.startDayOfWeek || index$1.getStartOfWeek(this.locale);
+        if (!this.value) {
+            const now = new Date();
+            now.setHours(0, 0, 0, 0);
+            if (this.mode === "range" /* CalendarModes.Range */) {
+                this.value = isoDates.asIsoDateRange(now, now);
+            }
+            else {
+                this.value = isoDates.asIsoDate(now);
+            }
+        }
+        this.previewValue = isoDates.fromIsoDate(this.value);
+    }
+    componentDidRender() {
+        this.updateRangeElements();
+    }
+    renderMonthHeader() {
+        return (index.h("div", { class: "gux-month-list" }, Array.from(Array(this.numberOfMonths).keys()).map(index$1 => {
+            const offsetMonthDate = getOffsetMonthDate(this.previewValue, index$1);
+            return (index.h("label", null, getDateMonthAndYearString(offsetMonthDate, this.locale)));
+        })));
+    }
+    renderCalendarTable(index$1) {
+        return (index.h("table", null, index.h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("th", null, day)))), this.getMonthDays(index$1).map(week => (index.h("tr", null, week.map(day => (index.h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, index.h("div", { class: "gux-date" }, day.date.getDate(), index.h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
-  }
-  componentWillLoad() {
-    usage.trackComponent(this.root, { variant: this.mode });
-    this.locale = index$1.getDesiredLocale(this.root);
-    this.startDayOfWeek = this.startDayOfWeek || index$1.getStartOfWeek(this.locale);
-    if (!this.value) {
-      const now = new Date();
-      now.setHours(0, 0, 0, 0);
-      if (this.mode === "range" /* CalendarModes.Range */) {
-        this.value = isoDates.asIsoDateRange(now, now);
-      }
-      else {
-        this.value = isoDates.asIsoDate(now);
-      }
+    render() {
+        return (index.h("div", { key: 'f881d308fa3ebd243a2f3b407c8e3876e326fbae', class: "gux-calendar" }, index.h("div", { key: '5347c62b0f74550c43f1b4290a3ed74517528f02', class: "gux-header" }, index.h("button", { key: 'ff9073d487f8fbcf07e66b6346d63f20b03e0c7f', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '8caff3ad8ff84e39dcea819130576e3fa0bc9869', decorative: true, "icon-name": "chevron-small-left" })), this.renderMonthHeader(), index.h("button", { key: 'c225f43a7dffe632496e75d3ff708c6051f92ec4', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { key: '8e31f6b933ff7355df9d291a29c4d6163b4350f6', decorative: true, "icon-name": "chevron-small-right" }))), index.h("div", { key: '2e903ebfcde9688191f0b667db6c6ae64746bd4d', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
-    this.previewValue = isoDates.fromIsoDate(this.value);
-  }
-  componentDidRender() {
-    this.updateRangeElements();
-  }
-  renderMonthHeader() {
-    return (index.h("div", { class: "gux-month-list" }, Array.from(Array(this.numberOfMonths).keys()).map(index$1 => {
-      const offsetMonthDate = getOffsetMonthDate(this.previewValue, index$1);
-      return (index.h("label", null, getDateMonthAndYearString(offsetMonthDate, this.locale)));
-    })));
-  }
-  renderCalendarTable(index$1) {
-    return (index.h("table", null, index.h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("th", null, day)))), this.getMonthDays(index$1).map(week => (index.h("tr", null, week.map(day => (index.h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, index.h("div", { class: "gux-date" }, day.date.getDate(), index.h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
-  }
-  render() {
-    return (index.h("div", { class: "gux-calendar" }, index.h("div", { class: "gux-header" }, index.h("button", { type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), this.renderMonthHeader(), index.h("button", { type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("div", { class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
-  }
-  get root() { return index.getElement(this); }
+    get root() { return index.getElement(this); }
 };
-GuxCalendar.style = guxCalendarCss;
+GuxCalendar.style = GuxCalendarStyle0;
 
 exports.gux_calendar = GuxCalendar;