genesys-spark-components 4.26.0 → 4.26.1

package/dist/esm/gux-calendar-beta.entry.js

@@ -1,40 +1,40 @@
-import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
-import { f as fromIsoDate, a as asIsoDate } from './iso-dates-7bc9d07f.js';
-import { c as capitalizeFirstLetter } from './capitalize-first-letter-45fad3db.js';
-import { g as getDesiredLocale, a as getStartOfWeek, b as buildI18nForComponent } from './index-39266f37.js';
-import { a as afterNextRenderTimeout } from './after-next-render-84ec18ad.js';
-import { l as logError } from './log-error-0b15023e.js';
-import { s as simulateNativeEvent } from './simulate-native-event-bca7a1c9.js';
-import './get-closest-element-66f63212.js';
+import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
+import { f as fromIsoDate, a as asIsoDate } from './iso-dates-8d3f106d.js';
+import { c as capitalizeFirstLetter } from './capitalize-first-letter-404638dd.js';
+import { g as getDesiredLocale, a as getStartOfWeek, b as buildI18nForComponent } from './index-3f1e5ba8.js';
+import { a as afterNextRenderTimeout } from './after-next-render-07a41f53.js';
+import { l as logError } from './log-error-274efeb7.js';
+import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
+import './get-closest-element-728b9f18.js';
 
 function getFirstOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
+    return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
 }
 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 rotateArray(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 rotateArray(days, startDayOfWeek);
 }
 function getDateAsMonthYear(date, locale) {
-  return capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
+    return capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
 }
 function rotateArray(arr, n) {
-  const times = n % arr.length;
-  return arr.concat(arr.splice(0, times));
+    const times = n % arr.length;
+    return arr.concat(arr.splice(0, times));
 }
 function firstDateInMonth(month, year, startDayOfWeek) {
-  const startDate = new Date(year, month, 1, 0, 0, 0, 0);
-  const firstDayOfMonth = startDate.getDay();
-  const firstDayOffset = (-1 * (startDayOfWeek - firstDayOfMonth - 7)) % 7;
-  const firstDateInMonth = new Date(startDate.getTime() - firstDayOffset * (86400 * 1000));
-  firstDateInMonth.setHours(0, 0, 0, 0);
-  return firstDateInMonth;
+    const startDate = new Date(year, month, 1, 0, 0, 0, 0);
+    const firstDayOfMonth = startDate.getDay();
+    const firstDayOffset = (-1 * (startDayOfWeek - firstDayOfMonth - 7)) % 7;
+    const firstDateInMonth = new Date(startDate.getTime() - firstDayOffset * (86400 * 1000));
+    firstDateInMonth.setHours(0, 0, 0, 0);
+    return firstDateInMonth;
 }
 
 const previousMonth = "Previous month: {localizedPreviousMonthAndYear}";
@@ -45,195 +45,196 @@ const translationResources = {
 };
 
 const guxCalendarCss = ".gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);background:var(--gse-ui-calendarMenu-date-selected-foregroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);box-shadow:rgba(34, 37, 41, 0.24) 0 2px 4px}.gux-calendar-beta .gux-header{display:flex;align-items:center;justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar-beta .gux-header .gux-header-month-and-year{width:var(--gse-ui-calendarMenu-month-single-header-textWidth);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);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{color:var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);cursor:pointer;background:none;border:none;outline:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:2px solid #aac9ff;outline-offset:1px}.gux-calendar-beta .gux-header .gux-left gux-icon,.gux-calendar-beta .gux-header .gux-right gux-icon{width:16px;height:16px}.gux-calendar-beta .gux-week-days{padding-top:24px;padding-right:24px;padding-left:24px;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);color:var(--gse-ui-calendarMenu-day-dayHeader-foregroundColor);text-align:center}.gux-calendar-beta .gux-week-days .gux-week-day{display:inline-block;width:var(--gse-ui-calendarMenu-day-date-size);height:16px;font-weight:var(--gse-ui-calendarMenu-day-header-fontWeight)}.gux-calendar-beta .gux-content{padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-core-color-cornflower-900);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date{display:inline-block;width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-input-height);font-family:var(--gse-ui-calendarMenu-date-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-defaultText-fontSize);font-style:normal;font-weight:var(--gse-ui-calendarMenu-date-defaultText-fontWeight);line-height:32px;color:var(--gse-core-color-cornflower-600);text-align:center;vertical-align:middle;border:none;outline:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-month{color:var(--gse-ui-calendarMenu-month-default-foregroundColor);opacity:1}.gux-calendar-beta .gux-content-week .gux-content-date.gux-hidden{display:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-disabled{pointer-events:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected{color:var(--gse-ui-calendarMenu-date-selected-foregroundColor);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius);outline:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected:hover{background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar-beta .gux-content-week .gux-content-date:hover{cursor:pointer;background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date: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-calendar-beta .gux-content-week .gux-content-date .gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-date{font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-currentText-fontWeight)}";
+const GuxCalendarBetaStyle0 = guxCalendarCss;
 
 const GuxCalendar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.locale = 'en';
-    // Total number of dates that will display for each month in the calendar
-    this.MONTH_DATE_COUNT = 42;
-    this.focusedValue = undefined;
-    this.minValue = undefined;
-    this.maxValue = undefined;
-  }
-  get slottedInput() {
-    return this.root.querySelector('input[type="date"]');
-  }
-  async componentWillLoad() {
-    if (!this.slottedInput) {
-      logError(this.root, 'You must slot a date input element like so: input[type="date"].');
-    }
-    this.locale = getDesiredLocale(this.root);
-    // Set start day of week
-    const startDayOfWeek = this.slottedInput.getAttribute('start-day-of-week');
-    if (startDayOfWeek === null || startDayOfWeek === void 0 ? void 0 : startDayOfWeek.length) {
-      this.startDayOfWeek = parseInt(startDayOfWeek, 10);
-    }
-    this.startDayOfWeek = this.startDayOfWeek || getStartOfWeek(this.locale);
-    this.i18n = await buildI18nForComponent(this.root, translationResources);
-    if (this.slottedInput.value) {
-      this.focusedValue = fromIsoDate(this.slottedInput.value);
-    }
-    // Set min value from the "min" input prop
-    if (this.slottedInput.min) {
-      this.minValue = new Date(this.slottedInput.min);
-      this.minValue.setHours(0, 0, 0, 0);
-    }
-    // Set max value from the "max" input prop
-    if (this.slottedInput.max) {
-      this.maxValue = new Date(this.slottedInput.max);
-      this.maxValue.setHours(0, 0, 0, 0);
-    }
-  }
-  onDateClick(date) {
-    if (this.isInvalidDate(date)) {
-      return;
-    }
-    this.focusedValue = new Date(date.getTime());
-    this.slottedInput.value = asIsoDate(date);
-    simulateNativeEvent(this.root, 'input');
-  }
-  setDateAfterArrowKeyPress(event, newDayValue) {
-    event.preventDefault();
-    this.focusedValue = new Date(this.getFocusedValue().getFullYear(), this.getFocusedValue().getMonth(), this.getFocusedValue().getDate() + newDayValue, 0, 0, 0);
-    afterNextRenderTimeout(() => {
-      this.focusDate();
-    });
-  }
-  /**
-   * Focus the focused date
-   */
-  focusDate() {
-    const target = this.root.shadowRoot.querySelector(`.gux-content-date[data-date="${this.focusedValue.getTime()}"]`);
-    if (target) {
-      target.focus();
-    }
-  }
-  onKeyDown(event) {
-    switch (event.key) {
-      case ' ':
-        break;
-      case 'Enter':
-        event.preventDefault();
-        this.onDateClick(this.getFocusedValue());
-        afterNextRenderTimeout(() => {
-          this.focusDate();
-        });
-        break;
-      case 'ArrowDown':
-        this.setDateAfterArrowKeyPress(event, 7);
-        break;
-      case 'ArrowUp':
-        this.setDateAfterArrowKeyPress(event, -7);
-        break;
-      case 'ArrowLeft':
-        this.setDateAfterArrowKeyPress(event, -1);
-        break;
-      case 'ArrowRight':
-        this.setDateAfterArrowKeyPress(event, 1);
-        break;
-      case 'PageUp':
-        event.preventDefault();
-        this.setNewFocusedMonth(1);
-        afterNextRenderTimeout(() => {
-          this.focusDate();
-        });
-        break;
-      case 'PageDown':
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.locale = 'en';
+        // Total number of dates that will display for each month in the calendar
+        this.MONTH_DATE_COUNT = 42;
+        this.focusedValue = undefined;
+        this.minValue = undefined;
+        this.maxValue = undefined;
+    }
+    get slottedInput() {
+        return this.root.querySelector('input[type="date"]');
+    }
+    async componentWillLoad() {
+        if (!this.slottedInput) {
+            logError(this.root, 'You must slot a date input element like so: input[type="date"].');
+        }
+        this.locale = getDesiredLocale(this.root);
+        // Set start day of week
+        const startDayOfWeek = this.slottedInput.getAttribute('start-day-of-week');
+        if (startDayOfWeek === null || startDayOfWeek === void 0 ? void 0 : startDayOfWeek.length) {
+            this.startDayOfWeek = parseInt(startDayOfWeek, 10);
+        }
+        this.startDayOfWeek = this.startDayOfWeek || getStartOfWeek(this.locale);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+        if (this.slottedInput.value) {
+            this.focusedValue = fromIsoDate(this.slottedInput.value);
+        }
+        // Set min value from the "min" input prop
+        if (this.slottedInput.min) {
+            this.minValue = new Date(this.slottedInput.min);
+            this.minValue.setHours(0, 0, 0, 0);
+        }
+        // Set max value from the "max" input prop
+        if (this.slottedInput.max) {
+            this.maxValue = new Date(this.slottedInput.max);
+            this.maxValue.setHours(0, 0, 0, 0);
+        }
+    }
+    onDateClick(date) {
+        if (this.isInvalidDate(date)) {
+            return;
+        }
+        this.focusedValue = new Date(date.getTime());
+        this.slottedInput.value = asIsoDate(date);
+        simulateNativeEvent(this.root, 'input');
+    }
+    setDateAfterArrowKeyPress(event, newDayValue) {
         event.preventDefault();
-        this.setNewFocusedMonth(-1);
+        this.focusedValue = new Date(this.getFocusedValue().getFullYear(), this.getFocusedValue().getMonth(), this.getFocusedValue().getDate() + newDayValue, 0, 0, 0);
         afterNextRenderTimeout(() => {
-          this.focusDate();
+            this.focusDate();
         });
-        break;
-    }
-  }
-  isInvalidDate(date) {
-    return ((this.minValue && date.getTime() <= this.minValue.getTime()) ||
-      (this.maxValue && date.getTime() > this.maxValue.getTime()));
-  }
-  getMonthDays() {
-    var _a, _b;
-    const firstOfMonth = getFirstOfMonth(this.getFocusedValue());
-    const weeks = [];
-    let currentWeek = { dates: [] };
-    let weekDayIndex = 0;
-    const currentMonth = firstOfMonth.getMonth();
-    const selectedValue = this.getSelectedValue();
-    const firstOfMonthDate = new Date(firstOfMonth.getTime());
-    const currentDate = firstDateInMonth(currentMonth, firstOfMonthDate.getFullYear(), this.startDayOfWeek);
-    // Generate all of the dates in the current month
-    for (let d = 0; d < this.MONTH_DATE_COUNT + 1; d += 1) {
-      const selected = selectedValue.getTime() === currentDate.getTime() &&
-        this.focusedValue !== undefined;
-      if (weekDayIndex > 0 && weekDayIndex % 7 === 0) {
-        weeks.push(currentWeek);
-        currentWeek = {
-          dates: []
-        };
-      }
-      // Check if a date is outside the defined date range boundaries
-      const disabled = this.isInvalidDate(currentDate);
-      const focused = ((_a = this.getFocusedValue()) === null || _a === void 0 ? void 0 : _a.getTime()) === currentDate.getTime() &&
-        ((_b = this.getFocusedValue()) === null || _b === void 0 ? void 0 : _b.getTime()) !== selectedValue.getTime(); // Do not show preview value for date if it's already selected
-      const today = new Date();
-      currentWeek.dates.push({
-        date: new Date(currentDate),
-        disabled,
-        inCurrentMonth: currentMonth === currentDate.getMonth() && !disabled,
-        selected: selected && selectedValue,
-        focused,
-        isCurrentDate: currentDate.getDate() === today.getDate() &&
-          currentDate.getMonth() === today.getMonth() &&
-          currentDate.getFullYear() === today.getFullYear()
-      });
-      weekDayIndex += 1;
-      currentDate.setDate(currentDate.getDate() + 1);
-    }
-    return weeks;
-  }
-  getFocusedValue() {
-    if (this.focusedValue) {
-      return this.focusedValue;
-    }
-    return this.getSelectedValue();
-  }
-  changeMonth(newMonthValue) {
-    return new Date(this.getFocusedValue().getFullYear(), this.getFocusedValue().getMonth() + newMonthValue, 1, 0, 0, 0);
-  }
-  setNewFocusedMonth(newMonthValue) {
-    this.focusedValue = this.changeMonth(newMonthValue);
-  }
-  getSelectedValue() {
-    if (this.slottedInput.value) {
-      const value = fromIsoDate(this.slottedInput.value);
-      return value;
-    }
-    const now = new Date();
-    now.setHours(0, 0, 0, 0);
-    return now;
-  }
-  renderHeader() {
-    return (h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth', {
-        localizedPreviousMonthAndYear: getDateAsMonthYear(this.changeMonth(-1), this.locale)
-      }), onClick: () => this.setNewFocusedMonth(-1) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
-        localizedNextMonthAndYear: getDateAsMonthYear(this.changeMonth(1), this.locale)
-      }), onClick: () => this.setNewFocusedMonth(1) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))));
-  }
-  renderContent() {
-    return (h("div", null, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", { class: "gux-content" }, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => (h("div", { "data-date": day.date.getTime(), onClick: () => this.onDateClick(day.date), role: "button", "aria-current": day.selected ? 'true' : 'false', tabindex: day.selected || day.focused ? '0' : '-1', onKeyDown: e => void this.onKeyDown(e), "aria-disabled": day.disabled ? 'true' : 'false', class: {
-        'gux-content-date': true,
-        'gux-disabled': day.disabled,
-        'gux-current-month': day.inCurrentMonth,
-        'gux-selected': day.selected,
-        'gux-current-date': day.isCurrentDate
-      } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
-  }
-  render() {
-    return (h("div", { class: "gux-calendar-beta" }, h("slot", null), this.renderHeader(), this.renderContent()));
-  }
-  get root() { return getElement(this); }
+    }
+    /**
+     * Focus the focused date
+     */
+    focusDate() {
+        const target = this.root.shadowRoot.querySelector(`.gux-content-date[data-date="${this.focusedValue.getTime()}"]`);
+        if (target) {
+            target.focus();
+        }
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case ' ':
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.onDateClick(this.getFocusedValue());
+                afterNextRenderTimeout(() => {
+                    this.focusDate();
+                });
+                break;
+            case 'ArrowDown':
+                this.setDateAfterArrowKeyPress(event, 7);
+                break;
+            case 'ArrowUp':
+                this.setDateAfterArrowKeyPress(event, -7);
+                break;
+            case 'ArrowLeft':
+                this.setDateAfterArrowKeyPress(event, -1);
+                break;
+            case 'ArrowRight':
+                this.setDateAfterArrowKeyPress(event, 1);
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.setNewFocusedMonth(1);
+                afterNextRenderTimeout(() => {
+                    this.focusDate();
+                });
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.setNewFocusedMonth(-1);
+                afterNextRenderTimeout(() => {
+                    this.focusDate();
+                });
+                break;
+        }
+    }
+    isInvalidDate(date) {
+        return ((this.minValue && date.getTime() <= this.minValue.getTime()) ||
+            (this.maxValue && date.getTime() > this.maxValue.getTime()));
+    }
+    getMonthDays() {
+        var _a, _b;
+        const firstOfMonth = getFirstOfMonth(this.getFocusedValue());
+        const weeks = [];
+        let currentWeek = { dates: [] };
+        let weekDayIndex = 0;
+        const currentMonth = firstOfMonth.getMonth();
+        const selectedValue = this.getSelectedValue();
+        const firstOfMonthDate = new Date(firstOfMonth.getTime());
+        const currentDate = firstDateInMonth(currentMonth, firstOfMonthDate.getFullYear(), this.startDayOfWeek);
+        // Generate all of the dates in the current month
+        for (let d = 0; d < this.MONTH_DATE_COUNT + 1; d += 1) {
+            const selected = selectedValue.getTime() === currentDate.getTime() &&
+                this.focusedValue !== undefined;
+            if (weekDayIndex > 0 && weekDayIndex % 7 === 0) {
+                weeks.push(currentWeek);
+                currentWeek = {
+                    dates: []
+                };
+            }
+            // Check if a date is outside the defined date range boundaries
+            const disabled = this.isInvalidDate(currentDate);
+            const focused = ((_a = this.getFocusedValue()) === null || _a === void 0 ? void 0 : _a.getTime()) === currentDate.getTime() &&
+                ((_b = this.getFocusedValue()) === null || _b === void 0 ? void 0 : _b.getTime()) !== selectedValue.getTime(); // Do not show preview value for date if it's already selected
+            const today = new Date();
+            currentWeek.dates.push({
+                date: new Date(currentDate),
+                disabled,
+                inCurrentMonth: currentMonth === currentDate.getMonth() && !disabled,
+                selected: selected && selectedValue,
+                focused,
+                isCurrentDate: currentDate.getDate() === today.getDate() &&
+                    currentDate.getMonth() === today.getMonth() &&
+                    currentDate.getFullYear() === today.getFullYear()
+            });
+            weekDayIndex += 1;
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+        return weeks;
+    }
+    getFocusedValue() {
+        if (this.focusedValue) {
+            return this.focusedValue;
+        }
+        return this.getSelectedValue();
+    }
+    changeMonth(newMonthValue) {
+        return new Date(this.getFocusedValue().getFullYear(), this.getFocusedValue().getMonth() + newMonthValue, 1, 0, 0, 0);
+    }
+    setNewFocusedMonth(newMonthValue) {
+        this.focusedValue = this.changeMonth(newMonthValue);
+    }
+    getSelectedValue() {
+        if (this.slottedInput.value) {
+            const value = fromIsoDate(this.slottedInput.value);
+            return value;
+        }
+        const now = new Date();
+        now.setHours(0, 0, 0, 0);
+        return now;
+    }
+    renderHeader() {
+        return (h("div", { class: "gux-header" }, h("button", { type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth', {
+                localizedPreviousMonthAndYear: getDateAsMonthYear(this.changeMonth(-1), this.locale)
+            }), onClick: () => this.setNewFocusedMonth(-1) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), h("span", { class: "gux-header-month-and-year" }, getDateAsMonthYear(this.getFocusedValue(), this.locale)), h("button", { type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth', {
+                localizedNextMonthAndYear: getDateAsMonthYear(this.changeMonth(1), this.locale)
+            }), onClick: () => this.setNewFocusedMonth(1) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))));
+    }
+    renderContent() {
+        return (h("div", null, h("div", { class: "gux-week-days" }, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("div", { class: "gux-week-day" }, day)))), h("div", { class: "gux-content" }, this.getMonthDays().map(week => (h("div", { class: "gux-content-week" }, week.dates.map(day => (h("div", { "data-date": day.date.getTime(), onClick: () => this.onDateClick(day.date), role: "button", "aria-current": day.selected ? 'true' : 'false', tabindex: day.selected || day.focused ? '0' : '-1', onKeyDown: e => void this.onKeyDown(e), "aria-disabled": day.disabled ? 'true' : 'false', class: {
+                'gux-content-date': true,
+                'gux-disabled': day.disabled,
+                'gux-current-month': day.inCurrentMonth,
+                'gux-selected': day.selected,
+                'gux-current-date': day.isCurrentDate
+            } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
+    }
+    render() {
+        return (h("div", { key: 'de2977064f8c296d981085ff71ab4b534a490a90', class: "gux-calendar-beta" }, h("slot", { key: '236304c36e0d8995a167e6d437f0326b9d860a4c' }), this.renderHeader(), this.renderContent()));
+    }
+    get root() { return getElement(this); }
 };
-GuxCalendar.style = guxCalendarCss;
+GuxCalendar.style = GuxCalendarBetaStyle0;
 
 export { GuxCalendar as gux_calendar_beta };