genesys-spark-components 3.28.0 → 3.29.0

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -0,0 +1,313 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { buildI18nForComponent, getDesiredLocale } from '../../../i18n';
+import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { afterRender } from '../../../utils/dom/after-render';
+import { getCurrentISOYearMonth, getISOYearMonth, getYearMonthObject } from '../../../utils/date/year-month-values';
+import translationResources from './i18n/en.json';
+const DateTimeFormats = { year: 'numeric', month: 'long' };
+const YearFirstLocales = ['ar', 'he', 'ja', 'ko', 'zh-cn', 'zh-tw'];
+export class GuxMonthPicker {
+  constructor() {
+    this.disabled = false;
+    this.expanded = false;
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.expanded = false;
+        this.calendarToggleButtonElement.focus();
+        break;
+    }
+  }
+  onValueUpdate(newValue) {
+    if (this.isOutOfBounds(newValue)) {
+      if (this.isBeforeMin(newValue)) {
+        this.value = this.min;
+      }
+      else {
+        this.value = this.max;
+      }
+    }
+    else {
+      this.value = newValue;
+    }
+    simulateNativeEvent(this.root, 'input');
+    simulateNativeEvent(this.root, 'change');
+  }
+  onClickOutside() {
+    this.expanded = false;
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+    this.locale = getDesiredLocale(this.root);
+  }
+  isOutOfBounds(value) {
+    return this.isBeforeMin(value) || this.isAfterMax(value);
+  }
+  isBeforeMin(value) {
+    return this.min && this.min > value;
+  }
+  isAfterMax(value) {
+    return this.max && this.max < value;
+  }
+  toggleCalendar() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      afterRender(() => {
+        void this.monthCalendarElement.guxFocus(this.value);
+      });
+    }
+  }
+  onMonthCalendarInput() {
+    this.value = this.monthCalendarElement.value;
+    this.expanded = false;
+    this.calendarToggleButtonElement.focus();
+  }
+  incrementMonth(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = getYearMonthObject(this.value);
+      const newMonth = (((parseInt(currentMonth) + 11 + delta) % 12) + 1)
+        .toString()
+        .padStart(2, '0');
+      this.value = getISOYearMonth(currentYear, newMonth);
+    }
+    else {
+      this.value = getCurrentISOYearMonth();
+    }
+  }
+  incrementYear(delta) {
+    if (this.value) {
+      const { year: currentYear, month: currentMonth } = getYearMonthObject(this.value);
+      const newYear = Math.max(Number(currentYear) + delta, 0).toString();
+      this.value = getISOYearMonth(newYear, currentMonth);
+    }
+    else {
+      this.value = getCurrentISOYearMonth();
+    }
+  }
+  onSpinnerKeyDown(event, incrementor, nextFocusElement) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        incrementor(-1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        incrementor(1);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        event.preventDefault();
+        nextFocusElement.focus();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        this.expanded = true;
+        afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+      case ' ':
+        event.preventDefault();
+        break;
+    }
+  }
+  onSpinnerKeyUp(event) {
+    event.stopPropagation();
+    switch (event.key) {
+      case ' ':
+        event.preventDefault();
+        this.expanded = true;
+        afterRender(() => {
+          void this.monthCalendarElement.guxFocus(this.value);
+        });
+        break;
+    }
+  }
+  onSpinnerClick() {
+    console.log('onSpinnerClick');
+    this.expanded = true;
+  }
+  getSpinnerLabel(period) {
+    if (this.value) {
+      const { year, month } = getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { [period]: DateTimeFormats[period] });
+    }
+    return this.i18n(period);
+  }
+  getSpinnerValueNow(period) {
+    return this.value ? getYearMonthObject(this.value)[period] : '0';
+  }
+  getSpinnerValueText() {
+    if (this.value) {
+      const { year, month } = getYearMonthObject(this.value);
+      return new Date(Number(year), Number(month) - 1).toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+    }
+    return this.i18n('unset');
+  }
+  renderMonthSpinnerButton() {
+    return (h("div", { role: "spinbutton", class: {
+        'gux-spinner': true,
+        'gux-empty': Boolean(!this.value)
+      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementMonth(d), this.yearSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.monthSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('month'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "1", "aria-valuemax": "12", "aria-label": this.i18n('month') }, this.getSpinnerLabel('month')));
+  }
+  renderYearSpinnerButton() {
+    return (h("div", { role: "spinbutton", class: {
+        'gux-spinner': true,
+        'gux-empty': Boolean(!this.value)
+      }, tabIndex: this.disabled ? -1 : 0, onKeyDown: (e) => this.onSpinnerKeyDown(e, d => this.incrementYear(d), this.monthSpinnerElement), onKeyUp: (e) => this.onSpinnerKeyUp(e), onClick: () => this.onSpinnerClick(), ref: (el) => (this.yearSpinnerElement = el), "aria-valuenow": this.getSpinnerValueNow('year'), "aria-valuetext": this.getSpinnerValueText(), "aria-valuemin": "0", "aria-label": this.i18n('year') }, this.getSpinnerLabel('year')));
+  }
+  renderSpinnerButtons() {
+    if (YearFirstLocales.includes(this.locale)) {
+      return (h("span", { class: "gux-display" },
+        this.renderYearSpinnerButton(),
+        this.renderMonthSpinnerButton()));
+    }
+    return (h("span", { class: "gux-display" },
+      this.renderMonthSpinnerButton(),
+      this.renderYearSpinnerButton()));
+  }
+  renderCalendarToggleButton() {
+    return (h("button", { class: {
+        'gux-popup-toggle': true,
+        'gux-expanded': this.expanded
+      }, ref: (el) => (this.calendarToggleButtonElement = el), type: "button", onClick: () => this.toggleCalendar(), disabled: this.disabled },
+      h("gux-icon", { "icon-name": "calendar", "screenreader-text": this.i18n('toggleCalendar') })));
+  }
+  renderTarget() {
+    return (h("div", { class: "gux-target", slot: "target" },
+      this.renderSpinnerButtons(),
+      this.renderCalendarToggleButton()));
+  }
+  renderPopup() {
+    return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
+  }
+  render() {
+    return (h("gux-popup", { expanded: this.expanded, disabled: this.disabled },
+      this.renderTarget(),
+      this.renderPopup()));
+  }
+  static get is() { return "gux-month-picker-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-month-picker.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-month-picker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current selected year and month in ISO8601 format (yyyy-mm)"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The min year and month selectable in ISO8601 format (yyyy-mm)"
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "max": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxISOYearMonth",
+        "resolved": "`${string}-${string}`",
+        "references": {
+          "GuxISOYearMonth": {
+            "location": "import",
+            "path": "../../../utils/date/year-month-values"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The max year and month selectable in ISO8601 format (yyyy-mm)"
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "expanded": {},
+    "locale": {}
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "onValueUpdate"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxMonthPicker.prototype, "onClickOutside", null);

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.css

@@ -60,6 +60,11 @@
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input:focus-within {
+  border-color: #2a60c8;
+  outline: none;
+  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
+}
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input {
   flex: 1 1 auto;
   align-self: auto;

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.js

@@ -16,13 +16,16 @@ import { createPopper } from '@popperjs/core';
 export class GuxDatepicker {
   constructor() {
     this.yearFormat = 'yyyy';
-    this.focusingRange = false;
-    this.isSelectingRange = false;
+    /**
+     * Indicates if the user is selecting the range with the mouse.
+     * This prevents other events from processing on the input range.
+     */
+    this.isSelectingRangeWithMouse = false;
     this.lastYear = new Date().getFullYear();
     this.startInputId = randomHTMLId('gux-datepicker');
     this.endInputId = randomHTMLId('gux-datepicker');
     /**
-     * The datepicker label (can be a single label, or two seperated by a comma if it's a range datepicker)
+     * The datepicker label (can be a single label, or two separated by a comma if it's a range datepicker)
      */
     this.label = '';
     /**
@@ -52,11 +55,14 @@ export class GuxDatepicker {
     /**
      * The datepicker current value
      */
-    this.formatedValue = '';
+    this.formattedValue = '';
     /**
      * The datepicker current value
      */
-    this.toFormatedValue = '';
+    this.toFormattedValue = '';
+    /**
+     * Uses styling to control visibility of the calendar element
+     */
     this.active = false;
   }
   watchValue() {
@@ -83,7 +89,7 @@ export class GuxDatepicker {
       this.yearFormat = 'yy';
     }
     this.intervalOrder = getIntervalOrder(newFormat);
-    this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, 0));
+    this.lastIntervalRange = this.initialIntervalRange;
   }
   watchActiveCalendar(active) {
     if (active === true) {
@@ -93,7 +99,7 @@ export class GuxDatepicker {
     }
   }
   onKeyDown(event) {
-    if (this.isFocusedFieldEvent(event)) {
+    if (this.isInputFieldEvent(event)) {
       this.focusedField = this.getInputFieldFromEvent(event);
       switch (event.key) {
         case 'Enter':
@@ -102,8 +108,7 @@ export class GuxDatepicker {
           this.active = false;
           break;
         case 'Tab':
-          this.isSelectingRange = true;
-          this.setRange();
+          // Allow default behavior of tabbing to the next element - the calendar toggle button
           break;
         case 'ArrowDown':
           event.preventDefault();
@@ -131,12 +136,14 @@ export class GuxDatepicker {
         }
         default:
           event.preventDefault();
-          this.setIntervalRange({
-            selectionStart: this.focusedField.selectionStart,
-            selectionEnd: this.focusedField.selectionEnd
-          });
-          this.updateIntervalValue(event);
-          this.setCursorRange();
+          if (!this.isSelectingRangeWithMouse) {
+            this.setIntervalRange({
+              selectionStart: this.focusedField.selectionStart,
+              selectionEnd: this.focusedField.selectionEnd
+            });
+            this.updateIntervalValue(event);
+            this.setCursorRange();
+          }
           break;
       }
     }
@@ -160,23 +167,9 @@ export class GuxDatepicker {
       }
     }
   }
-  onFocusIn(event) {
-    if (this.isFocusedFieldEvent(event)) {
-      if (!this.isSelectingRange) {
-        this.focusedField = this.getInputFieldFromEvent(event);
-        this.setRange();
-      }
-    }
-  }
-  onFocusOut(event) {
-    const composedPath = event.composedPath();
-    if (!composedPath.includes(this.root)) {
-      this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, 0));
-    }
-  }
   onMouseDown(event) {
-    if (this.isFocusedFieldEvent(event)) {
-      this.isSelectingRange = true;
+    if (this.isInputFieldEvent(event)) {
+      this.isSelectingRangeWithMouse = true;
     }
     const composedPath = event.composedPath();
     const inDatepicker = composedPath.includes(this.datepickerElement);
@@ -185,22 +178,35 @@ export class GuxDatepicker {
       this.active = inDatepicker;
     }
   }
-  onMouseUp(event) {
-    event.preventDefault();
-    if (this.isSelectingRange && this.isFocusedFieldEvent(event)) {
-      this.focusedField = this.getInputFieldFromEvent(event);
-      this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, this.focusedField.selectionStart));
-      this.setRange();
-    }
-  }
   onClickOutside() {
     this.active = false;
   }
-  isFocusedFieldEvent(event) {
+  /*********  Event Handlers  **********/
+  onInputFocusIn(event) {
+    this.focusedField = this.getInputFieldFromEvent(event);
+    if (!this.isSelectingRangeWithMouse) {
+      // When focusing the input the Safari browser will fight for control of the cursor unless it is done asynchronously
+      setTimeout(() => this.setRange());
+    }
+  }
+  onInputFocusOut() {
+    this.lastIntervalRange = this.initialIntervalRange;
+  }
+  onInputMouseUp(event) {
+    event.preventDefault();
+    this.lastIntervalRange = getIntervalRange(this.format, getIntervalLetter(this.format, this.focusedField.selectionStart));
+    this.setRange();
+    this.isSelectingRangeWithMouse = false;
+  }
+  /********  Other Methods  **********/
+  isInputFieldEvent(event) {
     const composedPath = event.composedPath();
     return (composedPath.includes(this.inputElement) ||
       composedPath.includes(this.toInputElement));
   }
+  get initialIntervalRange() {
+    return getIntervalRange(this.format, getIntervalLetter(this.format, 0));
+  }
   getInputFieldFromEvent(event) {
     const composedPath = event.composedPath();
     return composedPath[0];
@@ -240,9 +246,9 @@ export class GuxDatepicker {
     ]);
   }
   stringToDate(stringDate) {
-    const formatSeperator = getFormatSeparator(this.format);
-    const formatItems = this.format.toLowerCase().split(formatSeperator);
-    const dateItems = stringDate.split(formatSeperator);
+    const formatSeparator = getFormatSeparator(this.format);
+    const formatItems = this.format.toLowerCase().split(formatSeparator);
+    const dateItems = stringDate.split(formatSeparator);
     const year = parseInt(dateItems[formatItems.indexOf(this.yearFormat)], 10);
     const month = parseInt(dateItems[formatItems.indexOf('mm')], 10) - 1;
     const day = parseInt(dateItems[formatItems.indexOf('dd')], 10);
@@ -260,9 +266,9 @@ export class GuxDatepicker {
     inputEvent.stopPropagation(); // Don't let both events bubble.
     this.input.emit(this.value);
     this.updateDate();
-    this.inputElement.value = this.formatedValue;
+    this.inputElement.value = this.formattedValue;
     if (this.mode === "range" /* Range */) {
-      this.toInputElement.value = this.toFormatedValue;
+      this.toInputElement.value = this.toFormattedValue;
     }
     if (document.activeElement !== this.inputElement ||
       document.activeElement !== this.toInputElement) {
@@ -286,7 +292,6 @@ export class GuxDatepicker {
     this.input.emit(this.value);
   }
   setRange() {
-    this.isSelectingRange = false;
     this.setIntervalRange(this.lastIntervalRange);
     this.setCursorRange();
   }
@@ -348,24 +353,29 @@ export class GuxDatepicker {
     if (this.mode === "range" /* Range */) {
       const [from, to] = fromIsoDateRange(this.value);
       const { map: map1, regexp: regexp1 } = this.getMapAndRegexFromField(from);
-      this.formatedValue = this.format.replace(regexp1, match => {
+      this.formattedValue = this.format.replace(regexp1, match => {
         return map1[match];
       });
       const { map: map2, regexp: regexp2 } = this.getMapAndRegexFromField(to);
-      this.toFormatedValue = this.format.replace(regexp2, match => {
+      this.toFormattedValue = this.format.replace(regexp2, match => {
         return map2[match];
       });
     }
     else {
       const dateValue = fromIsoDate(this.value);
       const { map: map3, regexp: regexp3 } = this.getMapAndRegexFromField(dateValue);
-      this.formatedValue = this.format.replace(regexp3, match => {
+      this.formattedValue = this.format.replace(regexp3, match => {
         return map3[match];
       });
     }
   }
+  /** Selects a range of the input text based on the intervalRange property. */
   setCursorRange() {
     if (this.intervalRange) {
+      // If the selection is the same as what you are trying to set, setSelectionRange will deselect it.
+      // To prevent this, the line below sets the selection to the full field before setting the range we actually want.
+      this.focusedField.setSelectionRange(0, 100);
+      // Select the range we want
       this.focusedField.setSelectionRange(this.intervalRange.selectionStart, this.intervalRange.selectionEnd);
     }
   }
@@ -438,9 +448,9 @@ export class GuxDatepicker {
         this.numberOfMonths = 2;
       }
     }
+    this.updateDate();
   }
   componentDidLoad() {
-    this.updateDate();
     this.popperInstance = createPopper(this.datepickerElement, this.calendarElement, {
       modifiers: [
         {
@@ -454,17 +464,19 @@ export class GuxDatepicker {
     });
   }
   componentDidUpdate() {
-    this.popperInstance.forceUpdate();
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.forceUpdate();
   }
   disconnectedCallback() {
-    this.popperInstance.destroy();
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   renderCalendarToggleButton() {
     return (h("button", { class: "gux-calendar-toggle-button", type: "button", onClick: () => this.toggleCalendar(), "aria-expanded": this.active.toString(), "aria-label": this.i18n('toggleCalendar'), disabled: this.disabled },
       h("gux-icon", { decorative: true, "icon-name": "calendar" })));
   }
   renderCalendar() {
-    return (h("gux-calendar", { ref: (el) => (this.calendarElement = el), value: this.value, mode: this.mode, onInput: (event) => this.onCalendarSelect(event), minDate: this.minDate, maxDate: this.maxDate, numberOfMonths: this.numberOfMonths }));
+    return (h("gux-calendar", { tabIndex: -1, ref: (el) => (this.calendarElement = el), value: this.value, mode: this.mode, onInput: (event) => this.onCalendarSelect(event), minDate: this.minDate, maxDate: this.maxDate, numberOfMonths: this.numberOfMonths }));
   }
   renderStartDateField() {
     return (h("div", { class: "gux-datepicker-field" },
@@ -474,7 +486,7 @@ export class GuxDatepicker {
         } }, this.getCalendarLabels()[0]),
       h("div", { class: "gux-datepicker-field-input" },
         h("div", { class: "gux-datepicker-field-text-input" },
-          h("input", { id: this.startInputId, type: "text", ref: (el) => (this.inputElement = el), value: this.formatedValue, disabled: this.disabled }),
+          h("input", { id: this.startInputId, type: "text", onClick: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), ref: (el) => (this.inputElement = el), value: this.formattedValue, disabled: this.disabled }),
           this.renderCalendarToggleButton()),
         this.renderCalendar())));
   }
@@ -486,7 +498,7 @@ export class GuxDatepicker {
       h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]),
       h("div", { class: "gux-datepicker-field-input" },
         h("div", { class: "gux-datepicker-field-text-input" },
-          h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), value: this.toFormatedValue, disabled: this.disabled }),
+          h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }),
           this.renderCalendarToggleButton()))));
   }
   render() {
@@ -536,7 +548,7 @@ export class GuxDatepicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The datepicker label (can be a single label, or two seperated by a comma if it's a range datepicker)"
+        "text": "The datepicker label (can be a single label, or two separated by a comma if it's a range datepicker)"
       },
       "attribute": "label",
       "reflect": false,
@@ -657,10 +669,10 @@ export class GuxDatepicker {
     }
   }; }
   static get states() { return {
-    "formatedValue": {},
+    "formattedValue": {},
     "minDateDate": {},
     "maxDateDate": {},
-    "toFormatedValue": {},
+    "toFormattedValue": {},
     "active": {}
   }; }
   static get events() { return [{
@@ -702,30 +714,12 @@ export class GuxDatepicker {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "focusin",
-      "method": "onFocusIn",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focusout",
-      "method": "onFocusOut",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }, {
       "name": "mousedown",
       "method": "onMouseDown",
       "target": undefined,
       "capture": false,
       "passive": true
-    }, {
-      "name": "mouseup",
-      "method": "onMouseUp",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }]; }
 }
 __decorate([

package/dist/collection/components/stable/gux-list/gux-list.js

@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Listen, Method } from '@stencil/core';
 import { first, last, next, previous } from './gux-list.service';
 import { trackComponent } from '../../../usage-tracking';
+const validFocusableItems = ['gux-list-item'];
 export class GuxList {
   componentWillLoad() {
     trackComponent(this.root);
@@ -9,25 +10,25 @@ export class GuxList {
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault();
-        previous(this.root);
+        previous(this.root, validFocusableItems);
         break;
       case 'Home':
         event.preventDefault();
-        first(this.root);
+        first(this.root, validFocusableItems);
         break;
       case 'ArrowDown':
         event.preventDefault();
-        next(this.root);
+        next(this.root, validFocusableItems);
         break;
       case 'End':
         event.preventDefault();
-        last(this.root);
+        last(this.root, validFocusableItems);
         break;
     }
   }
   // eslint-disable-next-line @typescript-eslint/require-await
   async guxFocusFirstItem() {
-    first(this.root);
+    first(this.root, validFocusableItems);
   }
   renderFocusTarget() {
     return (h("span", { tabindex: "-1" }));