genesys-spark-components 4.26.0 → 4.26.1

package/dist/esm/gux-modal.entry.js

@@ -1,90 +1,91 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-39e65a0a.js';
-import { r as randomHTMLId } from './random-html-id-3354d85c.js';
-import { t as trackComponent } from './usage-66f89ebe.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-da21b737.js';
+import { r as randomHTMLId } from './random-html-id-81ac821b.js';
+import { t as trackComponent } from './usage-584e4793.js';
 
 const guxModalCss = "::slotted(button:active:enabled){color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}slot[name=start-align-buttons]::slotted(:not(button,gux-button-slot)){display:flex;flex-direction:row;gap:var(--gse-ui-modal-buttonBar-gap);align-content:flex-start;align-items:center}:host dialog{box-sizing:border-box;justify-content:space-between;border:1px solid #b4bccb;border-radius:var(--gse-ui-modal-borderRadius);box-shadow:var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color)}:host dialog::backdrop{background:rgba(77, 97, 130, 0.8)}:host dialog .gux-modal-container{display:flex;flex-direction:column;padding:var(--gse-ui-modal-padding)}:host dialog .gux-modal-container.gux-small{width:var(--gse-ui-modal-small-width);max-height:min(368px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-medium{width:var(--gse-ui-modal-medium-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-large{width:var(--gse-ui-modal-large-width);max-height:min(640px, 100vh - 2 * 24px)}:host dialog .gux-modal-container.gux-dynamic{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}:host dialog .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host dialog .gux-modal-container .gux-modal-header{margin:0;font-family:var(--gse-ui-modal-heading-fontFamily);font-size:var(--gse-ui-modal-heading-fontSize);font-weight:var(--gse-ui-modal-heading-fontWeight);line-height:var(--gse-ui-modal-heading-fontFamily);color:var(--gse-ui-modal-headerColor);letter-spacing:var(--gse-ui-modal-heading-letterSpacing);font-family:var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-xl-fontSize);line-height:var(--gse-core-typography-heading-xl-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}:host dialog .gux-modal-container .gux-modal-content{max-height:432px;margin-top:var(--gse-ui-modal-gap);margin-bottom:var(--gse-ui-modal-gap);overflow-y:auto}:host dialog .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host dialog .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}@media (max-width: 416px){:host dialog .gux-modal-container.gux-small,:host dialog .gux-modal-container.gux-medium,:host dialog .gux-modal-container.gux-large{width:100%;height:100%}}";
+const GuxModalStyle0 = guxModalCss;
 
 const GuxModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.guxdismiss = createEvent(this, "guxdismiss", 7);
-    this.size = 'dynamic';
-    this.open = false;
-  }
-  /**
-   * "Renders" the open state of the modal
-   */
-  syncOpenState() {
-    if (this.open) {
-      this.dialogElement.showModal();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.guxdismiss = createEvent(this, "guxdismiss", 7);
+        this.size = 'dynamic';
+        this.open = false;
     }
-    else {
-      this.dialogElement.close();
+    /**
+     * "Renders" the open state of the modal
+     */
+    syncOpenState() {
+        if (this.open) {
+            this.dialogElement.showModal();
+        }
+        else {
+            this.dialogElement.close();
+        }
     }
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async showModal() {
-    this.open = true;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async close() {
-    this.open = false;
-  }
-  /*
-   * This serves as a workaround for a specific issue found in Safari and Firefox browsers.
-   * In full-screen mode, pressing the "Escape" key would not only close the native HTML dialog but also minimize the browser window.
-   * By preventing the default behavior of the "Escape" key event and explicitly closing the dialog, this workaround ensures
-   * that the browser window remains unaffected when closing the dialog in full-screen mode.
-   * More info can be found here: https://discussions.apple.com/thread/251785881?answerId=253426808022&sortBy=best#253426808022
-   */
-  onKeydown(event) {
-    switch (event.key) {
-      case 'Escape':
-        event.preventDefault();
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async showModal() {
+        this.open = true;
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async close() {
+        this.open = false;
+    }
+    /*
+     * This serves as a workaround for a specific issue found in Safari and Firefox browsers.
+     * In full-screen mode, pressing the "Escape" key would not only close the native HTML dialog but also minimize the browser window.
+     * By preventing the default behavior of the "Escape" key event and explicitly closing the dialog, this workaround ensures
+     * that the browser window remains unaffected when closing the dialog in full-screen mode.
+     * More info can be found here: https://discussions.apple.com/thread/251785881?answerId=253426808022&sortBy=best#253426808022
+     */
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.dialogElement.close();
+                return;
+        }
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: `${this.size}` });
+    }
+    componentDidLoad() {
+        this.syncOpenState();
+    }
+    hasModalTitleSlot() {
+        return Boolean(this.root.querySelector('[slot="title"]'));
+    }
+    hasFooterButtons() {
+        return (Boolean(this.root.querySelector('[slot="start-align-buttons"]')) ||
+            Boolean(this.root.querySelector('[slot="end-align-buttons"]')));
+    }
+    render() {
+        const hasModalTitleSlot = this.hasModalTitleSlot();
+        const hasFooterButtons = this.hasFooterButtons();
+        const titleID = randomHTMLId();
+        return (h("dialog", { key: 'd9afdf1178dcb779b5eb7bc3c5ecec890a1a2f9d', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '0c463a14468fa97daa7a8a1bbe9a828e915fbf47', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '8277fed98f4bf29a041aae3f2172154e4b6ad355', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: 'afb975dbc64388a81bfd688dfca4b270c6388d0c', class: {
+                'gux-modal-content': true,
+                'gux-no-buttons': !hasFooterButtons
+            } }, h("p", { key: '7bf9d3c8805863b01ea01ed3b25b0ccba84a3392' }, h("slot", { key: '32f3089b0128b89da7913cf6b3d0f4e9f807889a', name: "content" }))), hasFooterButtons && this.renderButtonFooter())));
+    }
+    renderTitle(titleID) {
+        return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));
+    }
+    renderButtonFooter() {
+        return (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-start-align-buttons" }, h("slot", { name: "start-align-buttons" })), h("div", { class: "gux-end-align-buttons" }, h("slot", { name: "end-align-buttons" }))));
+    }
+    onCloseHandler() {
+        this.guxdismiss.emit();
+    }
+    onDismissHandler() {
         this.dialogElement.close();
-        return;
     }
-  }
-  componentWillLoad() {
-    trackComponent(this.root, { variant: `${this.size}` });
-  }
-  componentDidLoad() {
-    this.syncOpenState();
-  }
-  hasModalTitleSlot() {
-    return Boolean(this.root.querySelector('[slot="title"]'));
-  }
-  hasFooterButtons() {
-    return (Boolean(this.root.querySelector('[slot="start-align-buttons"]')) ||
-      Boolean(this.root.querySelector('[slot="end-align-buttons"]')));
-  }
-  render() {
-    const hasModalTitleSlot = this.hasModalTitleSlot();
-    const hasFooterButtons = this.hasFooterButtons();
-    const titleID = randomHTMLId();
-    return (h("dialog", { onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { class: {
-        'gux-modal-content': true,
-        'gux-no-buttons': !hasFooterButtons
-      } }, h("p", null, h("slot", { name: "content" }))), hasFooterButtons && this.renderButtonFooter())));
-  }
-  renderTitle(titleID) {
-    return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));
-  }
-  renderButtonFooter() {
-    return (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-start-align-buttons" }, h("slot", { name: "start-align-buttons" })), h("div", { class: "gux-end-align-buttons" }, h("slot", { name: "end-align-buttons" }))));
-  }
-  onCloseHandler() {
-    this.guxdismiss.emit();
-  }
-  onDismissHandler() {
-    this.dialogElement.close();
-  }
-  static get delegatesFocus() { return true; }
-  get root() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["syncOpenState"]
-  }; }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["syncOpenState"]
+    }; }
 };
-GuxModal.style = guxModalCss;
+GuxModal.style = GuxModalStyle0;
 
 export { GuxModal as gux_modal };

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
-import { b as buildI18nForComponent, g as getDesiredLocale } from './index-39266f37.js';
-import { r as readRegionalDatesCookie, a as determineDisplayLocale } from './check-regional-dates-cookie-5bd719be.js';
-import { s as simulateNativeEvent } from './simulate-native-event-bca7a1c9.js';
-import { b as afterNextRender } from './after-next-render-84ec18ad.js';
-import { g as getYearMonthObject, b as getCurrentISOYearMonth, a as getISOYearMonth } from './year-month-values-6ffe871f.js';
-import './get-closest-element-66f63212.js';
+import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
+import { b as buildI18nForComponent, g as getDesiredLocale } from './index-3f1e5ba8.js';
+import { r as readRegionalDatesCookie, a as determineDisplayLocale } from './check-regional-dates-cookie-a5438531.js';
+import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
+import { b as afterNextRender } from './after-next-render-07a41f53.js';
+import { g as getYearMonthObject, b as getCurrentISOYearMonth, a as getISOYearMonth } from './year-month-values-7461d213.js';
+import './get-closest-element-728b9f18.js';
 
 const changeYear = "Current year is {currentYear}, Click to change year to {changeYear}";
 const translationResources = {
@@ -12,137 +12,138 @@ const translationResources = {
 };
 
 const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:var(--gse-ui-calendarMenu-width);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-month-calendar .gux-current-month{font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);line-height:var(--gse-ui-calendarMenu-month-currentText-lineHeight);color:var(--gse-ui-calendarMenu-month-default-foregroundColor)}.gux-month-calendar .gux-year-header{position:relative;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-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);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-month-calendar .gux-year-header button{padding:var(--gse-ui-calendarMenu-header-arrow-padding);color:inherit;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus-visible{border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));outline:var(--gse-semantic-focusRing-width) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-month-calendar .gux-year-header button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);pointer-events:none}";
+const GuxMonthCalendarStyle0 = guxMonthCalendarCss;
 
 const GuxMonthCalendar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.value = undefined;
-    this.min = undefined;
-    this.max = undefined;
-    this.year = undefined;
-    this.locale = undefined;
-  }
-  onValueUpdate(newValue) {
-    const { year } = getYearMonthObject(newValue);
-    this.year = year;
-  }
-  /**
-   * Focus a month
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocus(iSOYearMonth) {
-    iSOYearMonth = iSOYearMonth || getCurrentISOYearMonth();
-    const { year } = getYearMonthObject(iSOYearMonth);
-    this.year = year;
-    afterNextRender(() => {
-      const target = this.root.shadowRoot.querySelector(`gux-month-list-item[value="${iSOYearMonth}"]`);
-      if (target) {
-        target.focus();
-      }
-    });
-  }
-  async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, translationResources);
-    if (readRegionalDatesCookie()) {
-      this.locale = determineDisplayLocale(this.root);
-    }
-    else {
-      this.locale = getDesiredLocale(this.root);
-    }
-    if (this.value) {
-      this.year = getYearMonthObject(this.value).year;
-    }
-    else {
-      this.year = getYearMonthObject(getCurrentISOYearMonth()).year;
-    }
-  }
-  updateValue(value) {
-    this.value = value;
-    simulateNativeEvent(this.root, 'input');
-    simulateNativeEvent(this.root, 'change');
-  }
-  isOutOfBounds(value) {
-    return (this.max && this.max < value) || (this.min && this.min > value);
-  }
-  onMonthClick(value) {
-    if (this.isOutOfBounds(value)) {
-      return;
-    }
-    this.updateValue(value);
-  }
-  isCurrentMonth(month) {
-    return (getYearMonthObject(getCurrentISOYearMonth()).year == this.year &&
-      getYearMonthObject(getCurrentISOYearMonth()).month == month);
-  }
-  getMonthAriaLabel(value) {
-    const { year, month } = getYearMonthObject(value);
-    return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
-  }
-  getYearLabel(year) {
-    return new Date(Number(year), 5).toLocaleDateString(this.locale, {
-      year: 'numeric'
-    });
-  }
-  isSelectedMonth(value) {
-    return value === this.value;
-  }
-  isAriaSelectedMonth(value) {
-    if (this.isSelectedMonth(value)) {
-      return 'true';
-    }
-    return false;
-  }
-  changeYear(increment) {
-    this.year = (parseInt(this.year) + increment).toString();
-  }
-  isPreviousYearLessThanMinYear(year, minISOYearMonth) {
-    return ((parseInt(year) - 1).toString() <
-      (minISOYearMonth && getYearMonthObject(minISOYearMonth).year));
-  }
-  isNextYearGreaterThanMaxYear(year, maxISOYearMonth) {
-    return ((parseInt(year) + 1).toString() >
-      (maxISOYearMonth && getYearMonthObject(maxISOYearMonth).year));
-  }
-  getMonthShortName(year, month) {
-    return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { month: 'short' });
-  }
-  doFocusTrap() {
-    if (!this.previousYearElement.disabled) {
-      this.previousYearElement.focus();
-    }
-    if (!this.nextYearElement.disabled) {
-      this.nextYearElement.focus();
-    }
-    this.monthListElement.focus();
-  }
-  renderHeader() {
-    return (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
-        currentYear: parseInt(this.year),
-        changeYear: parseInt(this.year) - 1
-      }) })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
-        currentYear: parseInt(this.year),
-        changeYear: parseInt(this.year) + 1
-      }) }))));
-  }
-  renderMonths() {
-    const monthButtons = Array.from(new Array(12), (_, i) => String(i + 1).padStart(2, '0')).map(month => {
-      const value = getISOYearMonth(this.year, month);
-      return (h("gux-month-list-item", { class: { 'gux-current-month': this.isCurrentMonth(month) }, value: value, selected: this.isSelectedMonth(value), "aria-selected": this.isAriaSelectedMonth(value), "aria-label": this.getMonthAriaLabel(value), onClick: () => this.onMonthClick(value), disabled: this.isOutOfBounds(value) }, this.getMonthShortName(this.year, month)));
-    });
-    return (h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
-  }
-  renderTrapFocusEl() {
-    return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
-  }
-  render() {
-    return (h("div", { class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
-  }
-  static get delegatesFocus() { return true; }
-  get root() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["onValueUpdate"]
-  }; }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.year = undefined;
+        this.locale = undefined;
+    }
+    onValueUpdate(newValue) {
+        const { year } = getYearMonthObject(newValue);
+        this.year = year;
+    }
+    /**
+     * Focus a month
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocus(iSOYearMonth) {
+        iSOYearMonth = iSOYearMonth || getCurrentISOYearMonth();
+        const { year } = getYearMonthObject(iSOYearMonth);
+        this.year = year;
+        afterNextRender(() => {
+            const target = this.root.shadowRoot.querySelector(`gux-month-list-item[value="${iSOYearMonth}"]`);
+            if (target) {
+                target.focus();
+            }
+        });
+    }
+    async componentWillLoad() {
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+        if (readRegionalDatesCookie()) {
+            this.locale = determineDisplayLocale(this.root);
+        }
+        else {
+            this.locale = getDesiredLocale(this.root);
+        }
+        if (this.value) {
+            this.year = getYearMonthObject(this.value).year;
+        }
+        else {
+            this.year = getYearMonthObject(getCurrentISOYearMonth()).year;
+        }
+    }
+    updateValue(value) {
+        this.value = value;
+        simulateNativeEvent(this.root, 'input');
+        simulateNativeEvent(this.root, 'change');
+    }
+    isOutOfBounds(value) {
+        return (this.max && this.max < value) || (this.min && this.min > value);
+    }
+    onMonthClick(value) {
+        if (this.isOutOfBounds(value)) {
+            return;
+        }
+        this.updateValue(value);
+    }
+    isCurrentMonth(month) {
+        return (getYearMonthObject(getCurrentISOYearMonth()).year == this.year &&
+            getYearMonthObject(getCurrentISOYearMonth()).month == month);
+    }
+    getMonthAriaLabel(value) {
+        const { year, month } = getYearMonthObject(value);
+        return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+    }
+    getYearLabel(year) {
+        return new Date(Number(year), 5).toLocaleDateString(this.locale, {
+            year: 'numeric'
+        });
+    }
+    isSelectedMonth(value) {
+        return value === this.value;
+    }
+    isAriaSelectedMonth(value) {
+        if (this.isSelectedMonth(value)) {
+            return 'true';
+        }
+        return false;
+    }
+    changeYear(increment) {
+        this.year = (parseInt(this.year) + increment).toString();
+    }
+    isPreviousYearLessThanMinYear(year, minISOYearMonth) {
+        return ((parseInt(year) - 1).toString() <
+            (minISOYearMonth && getYearMonthObject(minISOYearMonth).year));
+    }
+    isNextYearGreaterThanMaxYear(year, maxISOYearMonth) {
+        return ((parseInt(year) + 1).toString() >
+            (maxISOYearMonth && getYearMonthObject(maxISOYearMonth).year));
+    }
+    getMonthShortName(year, month) {
+        return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { month: 'short' });
+    }
+    doFocusTrap() {
+        if (!this.previousYearElement.disabled) {
+            this.previousYearElement.focus();
+        }
+        if (!this.nextYearElement.disabled) {
+            this.nextYearElement.focus();
+        }
+        this.monthListElement.focus();
+    }
+    renderHeader() {
+        return (h("div", { class: "gux-year-header" }, h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
+                currentYear: parseInt(this.year),
+                changeYear: parseInt(this.year) - 1
+            }) })), h("div", null, this.getYearLabel(this.year)), h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, h("gux-icon", { "icon-name": "chevron-small-right", "screenreader-text": this.i18n('changeYear', {
+                currentYear: parseInt(this.year),
+                changeYear: parseInt(this.year) + 1
+            }) }))));
+    }
+    renderMonths() {
+        const monthButtons = Array.from(new Array(12), (_, i) => String(i + 1).padStart(2, '0')).map(month => {
+            const value = getISOYearMonth(this.year, month);
+            return (h("gux-month-list-item", { class: { 'gux-current-month': this.isCurrentMonth(month) }, value: value, selected: this.isSelectedMonth(value), "aria-selected": this.isAriaSelectedMonth(value), "aria-label": this.getMonthAriaLabel(value), onClick: () => this.onMonthClick(value), disabled: this.isOutOfBounds(value) }, this.getMonthShortName(this.year, month)));
+        });
+        return (h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
+    }
+    renderTrapFocusEl() {
+        return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
+    }
+    render() {
+        return (h("div", { key: '4414615232e5f4e6e82a2d34d6713f586d3dcf9f', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueUpdate"]
+    }; }
 };
-GuxMonthCalendar.style = guxMonthCalendarCss;
+GuxMonthCalendar.style = GuxMonthCalendarStyle0;
 
 export { GuxMonthCalendar as gux_month_calendar };

package/dist/esm/gux-month-list_2.entry.js

@@ -1,85 +1,87 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-39e65a0a.js';
-import { l as last, f as first, n as next, p as previous, a as focusMove } from './gux-list.service-693f4ba7.js';
-import { g as getClosestElement } from './get-closest-element-66f63212.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-da21b737.js';
+import { l as last, f as first, n as next, p as previous, a as focusMove } from './gux-list.service-5da368db.js';
+import { g as getClosestElement } from './get-closest-element-728b9f18.js';
 
 const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:var(--gse-ui-calendarMenu-monthBody-padding);background-color:var(--gse-ui-calendarMenu-backgroundColor);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)}";
+const GuxMonthListStyle0 = guxMonthListCss;
 
 const validFocusableItems = ['gux-month-list-item'];
 const GuxMonthList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  onKeyDown(event) {
-    switch (event.key) {
-      case 'ArrowUp':
-        event.preventDefault();
-        focusMove(this.root, validFocusableItems, -3);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        focusMove(this.root, validFocusableItems, 3);
-        break;
-      case 'ArrowLeft':
-        event.preventDefault();
-        previous(this.root, validFocusableItems);
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        next(this.root, validFocusableItems);
-        break;
-      case 'Home':
-        event.preventDefault();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                focusMove(this.root, validFocusableItems, -3);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                focusMove(this.root, validFocusableItems, 3);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                previous(this.root, validFocusableItems);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                next(this.root, validFocusableItems);
+                break;
+            case 'Home':
+                event.preventDefault();
+                first(this.root, validFocusableItems);
+                break;
+            case 'End':
+                event.preventDefault();
+                last(this.root, validFocusableItems);
+                break;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxFocusFirstItem() {
         first(this.root, validFocusableItems);
-        break;
-      case 'End':
-        event.preventDefault();
-        last(this.root, validFocusableItems);
-        break;
     }
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocusFirstItem() {
-    first(this.root, validFocusableItems);
-  }
-  renderFocusTarget() {
-    return (h("span", { tabindex: "1" }));
-  }
-  render() {
-    return (h(Host, { role: "list" }, this.renderFocusTarget(), h("slot", null)));
-  }
-  static get delegatesFocus() { return true; }
-  get root() { return getElement(this); }
+    renderFocusTarget() {
+        return (h("span", { tabindex: "1" }));
+    }
+    render() {
+        return (h(Host, { key: 'daf32e350416fc874ca168416c91dac0f58a65c6', role: "list" }, this.renderFocusTarget(), h("slot", { key: 'dbbee1d4a001a4d479badcfbedb01da631795501' })));
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
 };
-GuxMonthList.style = guxMonthListCss;
+GuxMonthList.style = GuxMonthListStyle0;
 
 const guxMonthListItemCss = ":host([disabled]){pointer-events:none}:host([disabled=false]){pointer-events:auto}.gux-container{box-sizing:border-box;width:var(--gse-ui-calendarMenu-month-monthCell-width);height:var(--gse-ui-calendarMenu-month-monthCell-height);padding:10px 5px 9px}.gux-container button{all:unset;box-sizing:border-box;width:100%;height:100%;text-align:center;word-wrap:break-word;cursor:pointer;border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius);outline:none}.gux-container button.gux-selected{color:var(--gse-ui-calendarMenu-month-selected-foregroundColor);background:var(--gse-ui-calendarMenu-month-selected-backgroundColor)}.gux-container button:focus-visible:not(:disabled){border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-container button:hover:not(:disabled){color:var(--gse-ui-calendarMenu-month-default-foregroundColor);background:var(--gse-ui-calendarMenu-month-hover-backgroundColor)}.gux-container button:disabled{cursor:default;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}";
+const GuxMonthListItemStyle0 = guxMonthListItemCss;
 
 const GuxMonthListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.value = undefined;
-    this.disabled = false;
-    this.selected = false;
-  }
-  onMouseup() {
-    this.focusParentList();
-  }
-  onMouseover() {
-    this.focusParentList();
-  }
-  focusParentList() {
-    const parentList = getClosestElement('gux-month-list', this.root);
-    if (parentList && parentList.shadowRoot.activeElement === null) {
-      this.root.blur();
-      parentList.focus();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = undefined;
+        this.disabled = false;
+        this.selected = false;
+    }
+    onMouseup() {
+        this.focusParentList();
+    }
+    onMouseover() {
+        this.focusParentList();
+    }
+    focusParentList() {
+        const parentList = getClosestElement('gux-month-list', this.root);
+        if (parentList && parentList.shadowRoot.activeElement === null) {
+            this.root.blur();
+            parentList.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '0d37de3437568a8769522065242c4cff0baa07e5', role: "listitem", value: this.value }, h("div", { key: '557d40726bded727d5601dd3a8aebd82c627ccfa', class: "gux-container" }, h("button", { key: '967ec16e7c494a081059f4af5d654dbb842f3692', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '2ead0e3ebe3413b6ab588b8f5dddefdb14ee6bed' })))));
     }
-  }
-  render() {
-    return (h(Host, { role: "listitem", value: this.value }, h("div", { class: "gux-container" }, h("button", { class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", null)))));
-  }
-  static get delegatesFocus() { return true; }
-  get root() { return getElement(this); }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
 };
-GuxMonthListItem.style = guxMonthListItemCss;
+GuxMonthListItem.style = GuxMonthListItemStyle0;
 
 export { GuxMonthList as gux_month_list, GuxMonthListItem as gux_month_list_item };