genesys-spark-components 3.31.0 → 3.32.0

package/dist/cjs/gux-time-picker-beta.cjs.entry.js

@@ -2,34 +2,159 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4138a99.js');
+const index$1 = require('./index-a4138a99.js');
+const index = require('./index-d4f3e61e.js');
 const onClickOutside = require('./on-click-outside-64dc5f14.js');
-const usageTracking = require('./usage-tracking-f1397528.js');
-const index$1 = require('./index-d06e1e14.js');
+const usageTracking = require('./usage-tracking-188e7bcd.js');
+const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 require('./get-closest-element-ab4b2eee.js');
 
-/********************************************************
- * Time Utilities                                       *
- *                                                      *
- * Time parsing and comparison, for ISO 8601 hh:mm:ss   *
- ********************************************************/
-// Format should always adhere to: http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15
-const DATE_STRING_PREFIX = '1978-09-23T';
-const DATE_STRING_POSTFIX = 'Z'; // always use UTC
-/**
- * converts ISO 24hr time to a date that can be used for comparison
- * with other times converted with this function.
- */
-function fromIsoTime(timeStr) {
-  return new Date(DATE_STRING_PREFIX + timeStr.trim() + DATE_STRING_POSTFIX);
-}
-
-const defaultAriaLabel = "Time Picker";
+const am = "AM";
+const clockButton = "Toggle suggested times";
+const hoursInput = "Input hours";
+const minutesInput = "Input minutes";
+const pm = "PM";
+const timeOptionsState = "Time options open: {state}";
+const toggleAmPM = "{amOrPm} selected, click to toggle";
 const translationResources = {
-	defaultAriaLabel: defaultAriaLabel
+	am: am,
+	"time-separator": ":",
+	clockButton: clockButton,
+	hoursInput: hoursInput,
+	minutesInput: minutesInput,
+	pm: pm,
+	timeOptionsState: timeOptionsState,
+	toggleAmPM: toggleAmPM
 };
 
-const guxTimePickerCss = ":host{display:inline-block}input{box-sizing:border-box;width:100%;height:32px;padding:4px 12px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#fdfdfd;background-image:none;border:1px solid #6b7585;border-radius:2px;text-align:right}input::placeholder{color:#596373}input.gux-focused,input:focus{border:1px solid #2a60c8;outline:none;box-shadow:0 0 4px rgba(170, 201, 255, 0.5)}.gux-list-container{padding:8px 0;margin:0;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
+function getTimeDisplayValues(minuteInterval, clockType) {
+  const minuteOptions = [0, 15, 30, 45]
+    .filter(option => Number.isInteger(option / minuteInterval))
+    .map(x => String(x).padStart(2, '0'));
+  const hourOptions = clockType === '12h'
+    ? ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
+    : Array.from(Array(24).keys()).map(x => String(x).padStart(2, '0'));
+  return hourOptions.reduce((acc, hourOption) => {
+    return acc.concat(minuteOptions.map(minuteOption => `${hourOption}:${minuteOption}`));
+  }, []);
+}
+function getLocaleClockType(root) {
+  const locale = index.getDesiredLocale(root);
+  const date = new Date('January 19, 1975 15:00:00 UTC+00:00');
+  const time = new Intl.DateTimeFormat(locale, {
+    timeStyle: 'short',
+    timeZone: 'UTC'
+  }).format(date);
+  return new RegExp('.*15.*').test(time) ? '24h' : '12h';
+}
+function incrementHour(value, delta) {
+  const [hour, minute] = value.split(':');
+  const newHour = ((parseInt(hour, 10) + delta + 24) % 24)
+    .toString()
+    .padStart(2, '0');
+  return `${newHour}:${minute}`;
+}
+function incrementMinute(value, delta) {
+  const [hour, minute] = value.split(':');
+  const newMinute = ((parseInt(minute, 10) + delta + 60) % 60)
+    .toString()
+    .padStart(2, '0');
+  return `${hour}:${newMinute}`;
+}
+function getDisplayValue(value, clockType) {
+  const [hour, minute] = value.split(':');
+  if (clockType === '12h') {
+    return `${(parseInt(hour, 10) % 12 || 12).toString()}:${minute}`;
+  }
+  return `${hour}:${minute}`;
+}
+function getValue(displayValue, clockType, isAm) {
+  const [hour, minute] = displayValue.split(':');
+  if (clockType === '12h') {
+    if (isAm) {
+      return `${(parseInt(hour, 10) % 12)
+        .toString()
+        .padStart(2, '0')}:${minute}`;
+    }
+    return `${((parseInt(hour, 10) % 12) + 12)
+      .toString()
+      .padStart(2, '0')}:${minute}`;
+  }
+  return `${hour}:${minute}`;
+}
+function getHourDisplayValue(value, clockType) {
+  const [hour] = getDisplayValue(value, clockType).split(':');
+  return hour;
+}
+function getMinuteDisplayValue(value) {
+  const [, minute] = value.split(':');
+  return minute;
+}
+function isAm(value) {
+  const [hour] = value.split(':');
+  return parseInt(hour, 10) < 12;
+}
+function getHoursPattern(clockType) {
+  if (clockType === '12h') {
+    return '^(0?[1-9]|1[012])$';
+  }
+  return '^([01]?[0-9]|2[0-3])$';
+}
+function getMinutesPattern() {
+  return '^[0-5][0-9]$';
+}
+function getValidValueHourChange(value, clockType, change, selectionStart) {
+  const [displayValue, minute] = getDisplayValue(value, clockType).split(':');
+  let wantedDisplayValue = displayValue;
+  if (change === 'Backspace') {
+    wantedDisplayValue = wantedDisplayValue
+      .split('')
+      .filter((_, i) => i !== selectionStart - 1)
+      .join('')
+      .padStart(2, '0');
+  }
+  else {
+    wantedDisplayValue = parseInt(wantedDisplayValue.slice(0, selectionStart) +
+      change +
+      wantedDisplayValue.slice(selectionStart + 1), 10)
+      .toString()
+      .slice(-2)
+      .padStart(2, '0');
+  }
+  if (!new RegExp(getHoursPattern(clockType)).test(wantedDisplayValue)) {
+    if (clockType === '12h') {
+      wantedDisplayValue = change;
+    }
+    else {
+      wantedDisplayValue = change.padStart(2, '0');
+    }
+  }
+  return getValue(`${wantedDisplayValue}:${minute}`, clockType, isAm(value));
+}
+function getValidValueMinuteChange(value, change, selectionStart) {
+  const [hour, minute] = value.split(':');
+  let wanted = minute;
+  if (change === 'Backspace') {
+    wanted = wanted
+      .split('')
+      .filter((_, i) => i !== selectionStart - 1)
+      .join('')
+      .padStart(2, '0');
+  }
+  else {
+    wanted = (wanted.slice(0, selectionStart) +
+      change +
+      wanted.slice(selectionStart + 1))
+      .slice(-2)
+      .padStart(2, '0');
+  }
+  if (!new RegExp(getMinutesPattern()).test(wanted)) {
+    wanted = change.padStart(2, '0');
+  }
+  return `${hour}:${wanted}`;
+}
+
+const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:#ea0b0b}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:20px;padding:0;font-size:12px;color:#2e394c;text-align:center;text-align:left;background-color:#f6f7f9;border:none;outline:none}.gux-time-picker .gux-input-time input.gux-input-time-hours{text-align:right}.gux-time-picker .gux-input-time input::placeholder{color:#596373;opacity:1}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector{padding:0 0 0 8px;font-size:12px;font-weight:bold;color:#2e394c;background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{color:#2a60c8}.gux-time-picker .gux-input-time .gux-clock-button{flex:0 1 auto;align-self:auto;order:0;padding:0 0 0 8px;color:#596373;background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled):hover{color:#2a60c8 !important;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{border:none;outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible gux-icon{outline:none;box-shadow:0 0 0 1px transparent, 0 0 0 2px #aac9ff;border-radius:2px}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:16px;height:16px}.gux-time-picker .gux-list-container{max-height:150px;padding:8px 0;margin:0;overflow-y:scroll;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -41,218 +166,195 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         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;
 };
-const MAX_TIME = '23:59:59';
-const MIN_TIME = '00:00:00';
-const DEFAULT_INTERVAL = 15;
-const GuxTimePicker = class {
+const GuxTimePickerBeta = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.changed = index.createEvent(this, "changed", 7);
-    this.value = '';
-    this.interval = DEFAULT_INTERVAL;
-    this.max = MAX_TIME;
-    this.min = MIN_TIME;
-    this.label = '';
-    this.active = false;
-    this.openDropdown = false;
-    this.suggestion = '00';
-    this.isPressEvent = false;
-  }
-  watchValue(newValue) {
-    this.changed.emit(newValue);
-  }
-  getShadowDomEventTarget(event) {
-    return event.composedPath()[0];
-  }
-  onKeyDown(e) {
-    this.focusedField = this.getShadowDomEventTarget(e);
-    if (this.focusedField === this.inputElement) {
-      switch (e.key) {
-        case 'Enter':
-          this.updateChosenValue();
-          this.inputElement.focus();
-          break;
-        case 'Backspace':
-          e.preventDefault();
-          this.handleBackspace();
-          break;
-        case 'Tab':
-          this.updateChosenValue();
-          break;
-        case 'ArrowDown':
-          e.preventDefault();
-          if (this.listElement) {
-            void this.listElement.guxFocusFirstItem();
-          }
-          break;
-        case 'ArrowUp':
-        case 'ArrowRight':
-        case 'ArrowLeft':
-          e.preventDefault();
-          break;
-        default:
-          e.preventDefault();
-          if ('0' <= e.key && e.key <= '9') {
-            this.openDropdown = true;
-            if (this.focusedField.value.length < 8) {
-              let newValue = this.focusedField.value + String(parseInt(e.key, 10));
-              const arr = newValue.split(':');
-              if (newValue.length > 6 && Number(arr[2].padEnd(2, '0')) > 59) {
-                return;
-              }
-              if (!this.canBeCompletedToAValidTime(newValue)) {
-                return;
-              }
-              if (arr[arr.length - 1].length === 2 && newValue.length < 8) {
-                newValue += ':';
-              }
-              this.focusedField.value = newValue;
-              this.suggestion = arr[0].padEnd(2, '0');
-            }
-          }
-      }
-    }
-    else {
-      switch (e.key) {
-        case 'Escape':
-          this.updateChosenValue();
-          this.inputElement.focus();
-          break;
-      }
+    index$1.registerInstance(this, hostRef);
+    this.moveFocusDelay = 100;
+    this.value = '00:00';
+    this.interval = 60;
+    this.disabled = false;
+    this.required = false;
+    this.hasError = false;
+    this.expanded = false;
+  }
+  onFocus() {
+    this.valueLastChange = this.value;
+  }
+  onBlur() {
+    if (this.valueLastChange !== this.value) {
+      simulateNativeEvent.simulateNativeEvent(this.root, 'change');
     }
   }
-  canBeCompletedToAValidTime(str) {
-    const max = fromIsoTime(str + this.max.slice(str.length));
-    const min = fromIsoTime(str + this.min.slice(str.length));
-    if ((this.minTimeObj <= max && max <= this.maxTimeObj) ||
-      (this.minTimeObj <= min && min <= this.maxTimeObj)) {
-      return true;
+  onClickOutside() {
+    this.expanded = false;
+  }
+  handleKeydown(event) {
+    switch (event.key) {
+      case 'Escape':
+      case 'Tab':
+        this.expanded = false;
+        break;
     }
-    return false;
-  }
-  handleBackspace() {
-    this.openDropdown = true;
-    if (this.focusedField.selectionStart === this.focusedField.selectionEnd) {
-      const newEnd = this.focusedField.value.endsWith(':') ? -2 : -1;
-      this.focusedField.value = this.focusedField.value.slice(0, newEnd);
-      this.suggestion = this.focusedField.value.split(':')[0].padEnd(2, '0');
+  }
+  async componentWillLoad() {
+    usageTracking.trackComponent(this.root);
+    this.i18n = await index.buildI18nForComponent(this.root, translationResources);
+    this.clockType = this.clockType || getLocaleClockType(this.root);
+  }
+  updateValue(value, fireChange = false) {
+    if (value !== this.value) {
+      this.value = value;
+      simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+      if (fireChange) {
+        if (this.valueLastChange !== this.value) {
+          simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+          this.valueLastChange = this.value;
+        }
+      }
     }
-    else {
-      this.focusedField.value = '';
+  }
+  focusFirstItemInPopupList() {
+    setTimeout(() => {
+      void this.listElement.guxFocusFirstItem();
+    }, this.moveFocusDelay);
+  }
+  toggleDropdown() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.focusFirstItemInPopupList();
     }
   }
-  onListItemClick(value) {
-    this.inputElement.value = value;
-    this.updateChosenValue();
-    this.inputElement.focus();
+  handleClickDropdownValue(displayValue) {
+    const value = getValue(displayValue, this.clockType, isAm(this.value));
+    this.updateValue(value, true);
+    this.clockButton.focus();
+    this.expanded = false;
   }
-  onClickOutside() {
-    this.updateChosenValue();
-  }
-  updateChosenValue() {
-    this.inputElement.value = this.validateValue(this.inputElement.value);
-    this.value = this.inputElement.value;
-    this.active = false;
-    this.openDropdown = false;
-  }
-  onMouseUp(e) {
-    this.focusedField = this.getShadowDomEventTarget(e);
-    if (this.focusedField === this.inputElement) {
-      if (this.focusedField.selectionEnd !== this.inputElement.value.length) {
-        this.inputElement.setSelectionRange(0, this.inputElement.value.length);
-      }
-      else {
-        this.inputElement.setSelectionRange(this.inputElement.value.length, this.inputElement.value.length);
+  onHourKeyDown(event) {
+    switch (event.key) {
+      case 'Tab':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Escape':
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.updateValue(incrementHour(this.value, -1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.updateValue(incrementHour(this.value, 1));
+        break;
+      case 'Backspace':
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9': {
+        event.preventDefault();
+        this.updateValue(getValidValueHourChange(this.value, this.clockType, event.key, this.hourInputElement.selectionStart));
+        break;
       }
+      default:
+        event.preventDefault();
     }
   }
-  onFocusIn(e) {
-    this.focusedField = this.getShadowDomEventTarget(e);
-    this.active = true;
-  }
-  isValidTime(time) {
-    const postionArray = time.split(':');
-    const maxTimeArray = MAX_TIME.split(':');
-    for (let i = 0; i < postionArray.length; i++) {
-      if (Number(postionArray[i]) > Number(maxTimeArray[i])) {
-        return false;
+  onMinuteKeyDown(event) {
+    switch (event.key) {
+      case 'Tab':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Escape':
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.updateValue(incrementMinute(this.value, -1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.updateValue(incrementMinute(this.value, 1));
+        break;
+      case 'Backspace':
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9': {
+        event.preventDefault();
+        this.updateValue(getValidValueMinuteChange(this.value, event.key, this.minuteInputElement.selectionStart));
+        break;
       }
+      default:
+        event.preventDefault();
     }
-    return true;
-  }
-  validateUpperBound() {
-    this.max = this.isInFormat(this.max) ? this.max : MAX_TIME;
-    this.max = this.isValidTime(this.max) ? this.max : MAX_TIME;
-  }
-  validateLowerBound() {
-    this.min = this.isInFormat(this.min) ? this.min : MIN_TIME;
-    this.min = this.isValidTime(this.min) ? this.min : MIN_TIME;
-  }
-  validateBounds() {
-    this.validateUpperBound();
-    this.validateLowerBound();
-    this.maxTimeObj = fromIsoTime(this.max);
-    this.minTimeObj = fromIsoTime(this.min);
-    if (this.maxTimeObj < this.minTimeObj) {
-      this.max = MAX_TIME;
-      this.min = MIN_TIME;
-      this.maxTimeObj = fromIsoTime(this.max);
-      this.minTimeObj = fromIsoTime(this.min);
+  }
+  onAmPmButtonKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        this.toggleAmPm(event);
+        break;
     }
   }
-  validateValue(value) {
-    let validatedValue = this.isInFormat(value) ? value : '';
-    validatedValue =
-      validatedValue !== '' && this.isValidTime(validatedValue)
-        ? validatedValue
-        : '';
-    if (validatedValue) {
-      const valueTimeObj = fromIsoTime(validatedValue);
-      validatedValue =
-        this.minTimeObj <= valueTimeObj && valueTimeObj <= this.maxTimeObj
-          ? validatedValue
-          : '';
+  onListKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.expanded = false;
+        this.clockButton.focus();
+        break;
     }
-    return validatedValue;
   }
-  async componentWillLoad() {
-    usageTracking.trackComponent(this.root);
-    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
-    this.validateBounds();
-    this.value = this.validateValue(this.value);
+  toggleAmPm(event) {
+    event.preventDefault();
+    this.updateValue(incrementHour(this.value, 12), true);
   }
-  isInFormat(value) {
-    const regex = /^\d{2}:\d{2}:\d{2}$/;
-    return regex.test(value);
+  getAmPmString() {
+    return isAm(this.value) ? this.i18n('am') : this.i18n('pm');
   }
-  render() {
-    return (index.h("div", null, index.h("div", { class: "gux-input" }, index.h("input", { type: "text", value: this.value, size: 9, "aria-label": this.label || this.i18n('defaultAriaLabel'), ref: el => (this.inputElement = el) })), this.openDropdown === true && (index.h("div", { class: "gux-list-container" }, index.h("gux-list", { ref: el => (this.listElement = el) }, this.buildDropdownOptions().map(value => {
-      return (index.h("gux-list-item", { onClick: () => this.onListItemClick(value) }, value));
-    }))))));
-  }
-  buildDropdownOptions() {
-    const dropDownOptions = [];
-    for (let i = 0; i < 60; i += this.interval) {
-      const time = [
-        this.suggestion.toString().padStart(2, '0'),
-        i.toString().padStart(2, '0'),
-        '00'
-      ].join(':');
-      const timeObj = fromIsoTime(time);
-      if (this.minTimeObj <= timeObj && timeObj <= this.maxTimeObj) {
-        dropDownOptions.push(time);
-      }
+  renderNumberInput() {
+    return (index$1.h("div", null, index$1.h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), index$1.h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), index$1.h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
+  }
+  renderAmPmSelector() {
+    if (this.clockType === '12h') {
+      return (index$1.h("button", { class: "gux-input-time-am-pm-selector", type: "button", disabled: this.disabled, "aria-label": this.i18n('toggleAmPM', { amOrPm: this.getAmPmString() }), onClick: (e) => this.toggleAmPm(e), onKeyDown: (e) => this.onAmPmButtonKeyDown(e) }, this.getAmPmString()));
     }
-    return dropDownOptions;
   }
-  get root() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["watchValue"]
-  }; }
+  renderClockButton() {
+    return (index$1.h("button", { class: {
+        'gux-clock-button': true,
+        'gux-active': this.expanded
+      }, type: "button", disabled: this.disabled, "aria-label": this.i18n('clockButton'), "aria-expanded": this.expanded.toString(), onClick: this.toggleDropdown.bind(this), ref: el => (this.clockButton = el) }, index$1.h("gux-icon", { decorative: true, "icon-name": "clock-outline" })));
+  }
+  renderTimeListItems() {
+    return getTimeDisplayValues(this.interval, this.clockType).map(displayValue => (index$1.h("gux-list-item", { onClick: () => this.handleClickDropdownValue(displayValue) }, displayValue)));
+  }
+  renderTarget() {
+    return (index$1.h("div", { class: "gux-input-time", slot: "target" }, this.renderNumberInput(), this.renderAmPmSelector(), this.renderClockButton()));
+  }
+  renderPopup() {
+    return (index$1.h("div", { slot: "popup", class: "gux-list-container", onKeyDown: (e) => this.onListKeyDown(e) }, index$1.h("gux-list", { ref: el => (this.listElement = el) }, this.renderTimeListItems())));
+  }
+  render() {
+    return (index$1.h("gux-popup", { class: {
+        'gux-time-picker': true,
+        'gux-error': this.hasError
+      }, expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+  }
+  get root() { return index$1.getElement(this); }
 };
 __decorate([
   onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxTimePicker.prototype, "onClickOutside", null);
-GuxTimePicker.style = guxTimePickerCss;
+], GuxTimePickerBeta.prototype, "onClickOutside", null);
+GuxTimePickerBeta.style = guxTimePickerCss;
 
-exports.gux_time_picker_beta = GuxTimePicker;
+exports.gux_time_picker_beta = GuxTimePickerBeta;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a4138a99.js');
-const usageTracking = require('./usage-tracking-f1397528.js');
+const usageTracking = require('./usage-tracking-188e7bcd.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const index$1 = require('./index-d06e1e14.js');
+const index$1 = require('./index-d4f3e61e.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const defaultAriaLabel = "Toggle Switch";

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a4138a99.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usageTracking = require('./usage-tracking-f1397528.js');
+const usageTracking = require('./usage-tracking-188e7bcd.js');
 const popper = require('./popper-11d5f714.js');
 
 const guxTooltipCss = ":host{z-index:var(--gux-zindex-tooltip, 1);visibility:hidden !important;opacity:0}:host(.gux-show){visibility:visible !important;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;max-width:250px;padding:6px 12px;color:#2e394c;pointer-events:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";

package/dist/cjs/gux-visualization-beta.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$2 = require('./index-a4138a99.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const index$3 = require('./index-d06e1e14.js');
-const usageTracking = require('./usage-tracking-f1397528.js');
+const index$3 = require('./index-d4f3e61e.js');
+const usageTracking = require('./usage-tracking-188e7bcd.js');
 require('./get-closest-element-ab4b2eee.js');
 
 /*!

package/dist/cjs/index-a4138a99.js

@@ -2121,6 +2121,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-form-field-textarea.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-form-field-time-picker.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-form-field-time-picker.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-list-divider.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2349,6 +2353,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-pagination-buttons-beta_3.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-screen-reader-beta.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-screen-reader-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-table-select-popover.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/{index-d06e1e14.js → index-d4f3e61e.js}

@@ -3990,7 +3990,7 @@ async function buildI18nForComponent(component, defaultResources, parentComponen
     let i18nString = (_a = intlFormats.get(resourceKey)) === null || _a === void 0 ? void 0 : _a.format(context);
     if (!i18nString) {
       i18nString = (_b = defaultFormats.get(resourceKey)) === null || _b === void 0 ? void 0 : _b.format(context);
-      console.warn(`No localized string available for "${i18nString}" for "${locale}" locale. Falling back to English translation.`);
+      console.warn(`No localized string available for "${resourceKey}-${i18nString}" for "${locale}" locale. Falling back to English translation.`);
     }
     return i18nString;
   };