genesys-spark-components 3.28.1 → 3.29.0

package/dist/cjs/gux-form-field-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
 const onMutation = require('./on-mutation-230d7667.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');
 require('./log-error-a57681bf.js');

package/dist/cjs/gux-form-field-color.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-dropdown.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-input-clear-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const index$1 = require('./index-13101536.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-form-field-legacy.cjs.entry.js

@@ -8,7 +8,7 @@ const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const logError = require('./log-error-a57681bf.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxFormFieldCss = "gux-form-field-legacy{display:block;color:#2e394c}gux-form-field-legacy .gux-label-and-input-and-error-container{margin:16px 0}gux-form-field-legacy .gux-label-and-input-and-error-container label{font-size:12px;font-weight:bold;line-height:20px}gux-form-field-legacy .gux-label-and-input-and-error-container input,gux-form-field-legacy .gux-label-and-input-and-error-container select{width:100%;font-size:12px}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-container input{overflow:hidden;text-overflow:ellipsis}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-container{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error textarea{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-color-main-element{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-and-error-container{flex-grow:1}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside{display:flex;flex-direction:row}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside .gux-label-container{position:relative;top:7px;width:fit-content;min-width:45px;margin-right:8px}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-range,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-select,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-text-like,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-search{flex:1 1 auto}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-screenreader label{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}gux-form-field-legacy .gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}gux-form-field-legacy .gux-error{display:none;margin:4px 0}gux-form-field-legacy .gux-error.gux-show{display:block}";
 

package/dist/cjs/gux-form-field-number.cjs.entry.js

@@ -8,7 +8,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const setInputValue = require('./set-input-value-610d7da3.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');

package/dist/cjs/gux-form-field-radio.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-262c2e3a.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66fb86b.js');
 const onMutation = require('./on-mutation-230d7667.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');
 require('./log-error-a57681bf.js');

package/dist/cjs/gux-form-field-range.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-search.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-select.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-text-like.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

package/dist/cjs/gux-form-field-textarea.cjs.entry.js

@@ -7,7 +7,7 @@ const onInputDisabledStateChange = require('./on-input-disabled-state-change-d66
 const onMutation = require('./on-mutation-230d7667.js');
 const onAttributeChange = require('./on-attribute-change-37556263.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-d21b1a56.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const guxFormFieldLabel = require('./gux-form-field-label-bc36c597.js');
 const guxFormField_service = require('./gux-form-field.service-c1cdde0e.js');
 require('./random-html-id-b86b61c0.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 const logError = require('./log-error-a57681bf.js');
 
 const iconNameMap = {

package/dist/cjs/gux-list-item-legacy_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxListItemCss = ":host:focus .gux-list-item,:host:active .gux-list-item,:host:hover:not([disabled]) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host(:focus) .gux-list-item,:host(:active) .gux-list-item,:host(:hover:not([disabled])) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host([disabled]) .gux-list-item{pointer-events:none;cursor:default;opacity:0.5}.gux-list-item{display:flex;height:max-content;padding:0 16px;line-height:32px;word-wrap:break-word;cursor:pointer}.gux-list-item .gux-text{width:100%}";
 

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

@@ -3,55 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
-
-const validFocusableItems = ['gux-list-item'];
-function getRootChildren(root) {
-  const slot = root.querySelector('slot');
-  return slot ? slot.assignedElements() : Array.from(root.children);
-}
-function getGuxListFocusableItems(root) {
-  return getRootChildren(root).filter(cv => {
-    if (validFocusableItems.includes(cv.tagName.toLowerCase())) {
-      return !cv.disabled;
-    }
-    return false;
-  });
-}
-function getCurrentFocusIndex(root) {
-  return getGuxListFocusableItems(root).findIndex(cv => cv.matches(':focus-within'));
-}
-function focusMove(root, delta) {
-  const currentFocusIndex = getCurrentFocusIndex(root);
-  const maxIndex = getGuxListFocusableItems(root).length;
-  focusIndex(root, (currentFocusIndex + delta) % maxIndex);
-}
-function focusIndex(root, focusIndex) {
-  var _a;
-  const items = getGuxListFocusableItems(root);
-  while (focusIndex < 0) {
-    focusIndex += items.length;
-  }
-  (_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-}
-function getLastChildIndex(root) {
-  return getGuxListFocusableItems(root).length - 1;
-}
-function first(root) {
-  focusIndex(root, 0);
-}
-function last(root) {
-  focusIndex(root, getLastChildIndex(root));
-}
-function next(root) {
-  focusMove(root, 1);
-}
-function previous(root) {
-  focusMove(root, -1);
-}
+const guxList_service = require('./gux-list.service-59f2b3e7.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";
 
+const validFocusableItems = ['gux-list-item'];
 const GuxList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -63,25 +20,25 @@ const GuxList = class {
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault();
-        previous(this.root);
+        guxList_service.previous(this.root, validFocusableItems);
         break;
       case 'Home':
         event.preventDefault();
-        first(this.root);
+        guxList_service.first(this.root, validFocusableItems);
         break;
       case 'ArrowDown':
         event.preventDefault();
-        next(this.root);
+        guxList_service.next(this.root, validFocusableItems);
         break;
       case 'End':
         event.preventDefault();
-        last(this.root);
+        guxList_service.last(this.root, validFocusableItems);
         break;
     }
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxFocusFirstItem() {
-    first(this.root);
+    guxList_service.first(this.root, validFocusableItems);
   }
   renderFocusTarget() {
     return (index.h("span", { tabindex: "-1" }));

package/dist/cjs/gux-list.service-59f2b3e7.js

@@ -0,0 +1,51 @@
+'use strict';
+
+function getRootChildren(root) {
+  const slot = root.querySelector('slot');
+  return slot ? slot.assignedElements() : Array.from(root.children);
+}
+function getGuxListFocusableItems(root, validFocusableItems) {
+  return getRootChildren(root).filter(cv => {
+    if (validFocusableItems.includes(cv.tagName.toLowerCase())) {
+      return !cv.disabled;
+    }
+    return false;
+  });
+}
+function getCurrentFocusIndex(root, validFocusableItems) {
+  return getGuxListFocusableItems(root, validFocusableItems).findIndex(cv => cv.matches(':focus-within'));
+}
+function focusMove(root, validFocusableItems, delta) {
+  const currentFocusIndex = getCurrentFocusIndex(root, validFocusableItems);
+  const maxIndex = getGuxListFocusableItems(root, validFocusableItems).length;
+  focusIndex(root, validFocusableItems, (currentFocusIndex + delta) % maxIndex);
+}
+function focusIndex(root, validFocusableItems, focusIndex) {
+  var _a;
+  const items = getGuxListFocusableItems(root, validFocusableItems);
+  while (focusIndex < 0) {
+    focusIndex += items.length;
+  }
+  (_a = items[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+}
+function getLastChildIndex(root, validFocusableItems) {
+  return getGuxListFocusableItems(root, validFocusableItems).length - 1;
+}
+function first(root, validFocusableItems) {
+  focusIndex(root, validFocusableItems, 0);
+}
+function last(root, validFocusableItems) {
+  focusIndex(root, validFocusableItems, getLastChildIndex(root, validFocusableItems));
+}
+function next(root, validFocusableItems) {
+  focusMove(root, validFocusableItems, 1);
+}
+function previous(root, validFocusableItems) {
+  focusMove(root, validFocusableItems, -1);
+}
+
+exports.first = first;
+exports.focusMove = focusMove;
+exports.last = last;
+exports.next = next;
+exports.previous = previous;

package/dist/cjs/gux-listbox-multi.cjs.entry.js

@@ -7,7 +7,7 @@ const guxListbox_service = require('./gux-listbox.service-d394da79.js');
 const index$1 = require('./index-13101536.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const noMatches = "No matches";

package/dist/cjs/gux-loading-message-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 /**
  * Below are the max-widths for the loading component.

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-262c2e3a.js');
-const usageTracking = require('./usage-tracking-fdbd0b75.js');
+const usageTracking = require('./usage-tracking-a1b34de9.js');
 
 const guxModalCss = ":host .gux-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--gux-zindex-modal, 1);display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{box-shadow:0 8px 24px rgba(32, 41, 55, 0.4);position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}:host .gux-modal .gux-modal-container.gux-small{width:416px;max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:672px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:940px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 2 * 24px);max-height:calc(100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding-bottom:24px;margin:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin:0 8px 24px;overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button{padding-right:5px}:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button{padding-left:5px}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
 

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

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-262c2e3a.js');
+const index$1 = require('./index-13101536.js');
+const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
+const yearMonthValues = require('./year-month-values-080373aa.js');
+require('./get-closest-element-ab4b2eee.js');
+
+const changeYear = "Current year is {currentYear}, Click to change year to {changeYear}";
+const translationResources = {
+	changeYear: changeYear
+};
+
+const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:255px;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-month-calendar .gux-year-header button{color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus{border-radius:4px;outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:0.5}.gux-month-calendar .gux-year-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-month-calendar .gux-year-header .gux-year{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-month-calendar .gux-months{padding:24px;background-color:#fdfdfd}.gux-month-calendar .gux-months button{width:65px;height:50px;margin:2px;text-align:center;cursor:pointer;background:none;border:none;border-radius:4px;outline:none;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-month-calendar .gux-months button:focus{outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-month-calendar .gux-months button.gux-selected,.gux-month-calendar .gux-months button:hover{color:#fdfdfd;background-color:#2a60c8}.gux-month-calendar .gux-months button:disabled{color:#596373;pointer-events:none;background-color:#fdfdfd}";
+
+const GuxMonthCalendar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  onValueUpdate(newValue) {
+    const { year } = yearMonthValues.getYearMonthObject(newValue);
+    this.year = year;
+  }
+  /**
+   * Focus a month
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus(iSOYearMonth) {
+    iSOYearMonth = iSOYearMonth || yearMonthValues.getCurrentISOYearMonth();
+    const { year } = yearMonthValues.getYearMonthObject(iSOYearMonth);
+    this.year = year;
+    yearMonthValues.afterRender(() => {
+      const target = this.root.shadowRoot.querySelector(`gux-month-list-item[value="${iSOYearMonth}"]`);
+      console.log({ target });
+      if (target) {
+        target.focus();
+      }
+    });
+  }
+  async componentWillLoad() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+    this.locale = index$1.getDesiredLocale(this.root);
+    if (this.value) {
+      this.year = yearMonthValues.getYearMonthObject(this.value).year;
+    }
+    else {
+      this.year = yearMonthValues.getYearMonthObject(yearMonthValues.getCurrentISOYearMonth()).year;
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent.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);
+  }
+  getMonthAriaLabel(value) {
+    const { year, month } = yearMonthValues.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 && yearMonthValues.getYearMonthObject(minISOYearMonth).year));
+  }
+  isNextYearGreaterThanMaxYear(year, maxISOYearMonth) {
+    return ((parseInt(year) + 1).toString() >
+      (maxISOYearMonth && yearMonthValues.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 (index.h("div", { class: "gux-year-header" }, index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(-1), disabled: this.isPreviousYearLessThanMinYear(this.year, this.min), ref: (el) => (this.previousYearElement = el) }, index.h("gux-icon", { "icon-name": "chevron-small-left", "screenreader-text": this.i18n('changeYear', {
+        currentYear: parseInt(this.year),
+        changeYear: parseInt(this.year) - 1
+      }) })), index.h("div", { class: "gux-year" }, this.getYearLabel(this.year)), index.h("button", { type: "button", class: "gux-year-change", onClick: () => this.changeYear(1), disabled: this.isNextYearGreaterThanMaxYear(this.year, this.max), ref: (el) => (this.nextYearElement = el) }, index.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 = yearMonthValues.getISOYearMonth(this.year, month);
+      return (index.h("gux-month-list-item", { 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 (index.h("gux-month-list", { tabIndex: 1, ref: (el) => (this.monthListElement = el) }, monthButtons));
+  }
+  renderTrapFocusEl() {
+    return (index.h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
+  }
+  render() {
+    return (index.h("div", { class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueUpdate"]
+  }; }
+};
+GuxMonthCalendar.style = guxMonthCalendarCss;
+
+exports.gux_month_calendar = GuxMonthCalendar;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-262c2e3a.js');
+const guxList_service = require('./gux-list.service-59f2b3e7.js');
+const getClosestElement = require('./get-closest-element-ab4b2eee.js');
+
+const guxMonthListCss = ":host{display:flex;flex-direction:row;flex-wrap:wrap;padding:12px 16px;background-color:#fdfdfd;border:1px solid #b4bccb}";
+
+const validFocusableItems = ['gux-month-list-item'];
+const GuxMonthList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        guxList_service.focusMove(this.root, validFocusableItems, -3);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        guxList_service.focusMove(this.root, validFocusableItems, 3);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        guxList_service.previous(this.root, validFocusableItems);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        guxList_service.next(this.root, validFocusableItems);
+        break;
+      case 'Home':
+        event.preventDefault();
+        guxList_service.first(this.root, validFocusableItems);
+        break;
+      case 'End':
+        event.preventDefault();
+        guxList_service.last(this.root, validFocusableItems);
+        break;
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocusFirstItem() {
+    guxList_service.first(this.root, validFocusableItems);
+  }
+  renderFocusTarget() {
+    return (index.h("span", { tabindex: "1" }));
+  }
+  render() {
+    return (index.h(index.Host, { role: "list" }, this.renderFocusTarget(), index.h("slot", null)));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+};
+GuxMonthList.style = guxMonthListCss;
+
+const guxMonthListItemCss = ":host{flex:0 0 33.3%}:host([disabled]){pointer-events:none}:host([disabled='false']){pointer-events:auto}::slotted(gux-icon){width:16px;height:16px;margin-right:8px;vertical-align:middle}.gux-container{padding:4px}.gux-container button{all:unset;box-sizing:border-box;width:100%;height:49px;padding:8px 0;color:#2e394c;text-align:center;word-wrap:break-word;cursor:pointer;border:none;border-radius:4px;outline:none}.gux-container button.gux-selected{color:#fdfdfd;background:#2a60c8}.gux-container button:focus:not(:disabled){outline:none;box-shadow:0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff}.gux-container button:hover:not(:disabled){color:#fdfdfd;background:#2a60c8}.gux-container button:active:not(:disabled){color:#fdfdfd;background:#2a60c8}.gux-container button:disabled{color:rgba(46, 57, 76, 0.5);cursor:default}";
+
+const GuxMonthListItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.disabled = false;
+    this.selected = false;
+  }
+  onMouseup() {
+    this.focusParentList();
+  }
+  onMouseover() {
+    this.focusParentList();
+  }
+  focusParentList() {
+    const parentList = getClosestElement.getClosestElement('gux-month-list', this.root);
+    if (parentList && parentList.shadowRoot.activeElement === null) {
+      this.root.blur();
+      parentList.focus();
+    }
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem", value: this.value }, index.h("div", { class: "gux-container" }, index.h("button", { class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, index.h("slot", null)))));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+};
+GuxMonthListItem.style = guxMonthListItemCss;
+
+exports.gux_month_list = GuxMonthList;
+exports.gux_month_list_item = GuxMonthListItem;