@esri/solutions-components 0.6.5 → 0.6.6

package/dist/components/calcite-input-time-picker.js

@@ -9,8 +9,8 @@ import { g as guid } from './guid.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { n as numberKeys } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, a as disconnectLocalized } from './locale2.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent.js';
 import { l as localizeTimeString, t as toISOTimeString, f as formatTimeString, i as isValidTime, d as defineCustomElement$2 } from './time-picker.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
@@ -23,11 +23,11 @@ import { d as defineCustomElement$3 } from './progress.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
-  toggleIcon: "toggle-icon"
+  toggleIcon: "toggle-icon",
 };
 
 var SECONDS_A_MINUTE = 60;
@@ -446,35 +446,86 @@ var Dayjs = /*#__PURE__*/function () {
       return isLowercase ? m.toLowerCase() : m;
     };
 
-    var matches = {
-      YY: String(this.$y).slice(-2),
-      YYYY: Utils.s(this.$y, 4, '0'),
-      M: $M + 1,
-      MM: Utils.s($M + 1, 2, '0'),
-      MMM: getShort(locale.monthsShort, $M, months, 3),
-      MMMM: getShort(months, $M),
-      D: this.$D,
-      DD: Utils.s(this.$D, 2, '0'),
-      d: String(this.$W),
-      dd: getShort(locale.weekdaysMin, this.$W, weekdays, 2),
-      ddd: getShort(locale.weekdaysShort, this.$W, weekdays, 3),
-      dddd: weekdays[this.$W],
-      H: String($H),
-      HH: Utils.s($H, 2, '0'),
-      h: get$H(1),
-      hh: get$H(2),
-      a: meridiemFunc($H, $m, true),
-      A: meridiemFunc($H, $m, false),
-      m: String($m),
-      mm: Utils.s($m, 2, '0'),
-      s: String(this.$s),
-      ss: Utils.s(this.$s, 2, '0'),
-      SSS: Utils.s(this.$ms, 3, '0'),
-      Z: zoneStr // 'ZZ' logic below
+    var matches = function matches(match) {
+      switch (match) {
+        case 'YY':
+          return String(_this3.$y).slice(-2);
 
+        case 'YYYY':
+          return Utils.s(_this3.$y, 4, '0');
+
+        case 'M':
+          return $M + 1;
+
+        case 'MM':
+          return Utils.s($M + 1, 2, '0');
+
+        case 'MMM':
+          return getShort(locale.monthsShort, $M, months, 3);
+
+        case 'MMMM':
+          return getShort(months, $M);
+
+        case 'D':
+          return _this3.$D;
+
+        case 'DD':
+          return Utils.s(_this3.$D, 2, '0');
+
+        case 'd':
+          return String(_this3.$W);
+
+        case 'dd':
+          return getShort(locale.weekdaysMin, _this3.$W, weekdays, 2);
+
+        case 'ddd':
+          return getShort(locale.weekdaysShort, _this3.$W, weekdays, 3);
+
+        case 'dddd':
+          return weekdays[_this3.$W];
+
+        case 'H':
+          return String($H);
+
+        case 'HH':
+          return Utils.s($H, 2, '0');
+
+        case 'h':
+          return get$H(1);
+
+        case 'hh':
+          return get$H(2);
+
+        case 'a':
+          return meridiemFunc($H, $m, true);
+
+        case 'A':
+          return meridiemFunc($H, $m, false);
+
+        case 'm':
+          return String($m);
+
+        case 'mm':
+          return Utils.s($m, 2, '0');
+
+        case 's':
+          return String(_this3.$s);
+
+        case 'ss':
+          return Utils.s(_this3.$s, 2, '0');
+
+        case 'SSS':
+          return Utils.s(_this3.$ms, 3, '0');
+
+        case 'Z':
+          return zoneStr;
+      }
+
+      return null;
     };
+
     return str.replace(REGEX_FORMAT, function (match, $1) {
-      return $1 || matches[match] || zoneStr.replace(':', '');
+      return $1 || matches(match) || zoneStr.replace(':', '');
     }); // 'ZZ'
   };
 
@@ -485,14 +536,57 @@ var Dayjs = /*#__PURE__*/function () {
   };
 
   _proto.diff = function diff(input, units, _float) {
-    var _C$Y$C$M$C$Q$C$W$C$D$;
+    var _this4 = this;
 
     var unit = Utils.p(units);
     var that = dayjs(input);
     var zoneDelta = (that.utcOffset() - this.utcOffset()) * MILLISECONDS_A_MINUTE;
     var diff = this - that;
-    var result = Utils.m(this, that);
-    result = (_C$Y$C$M$C$Q$C$W$C$D$ = {}, _C$Y$C$M$C$Q$C$W$C$D$[Y] = result / 12, _C$Y$C$M$C$Q$C$W$C$D$[M] = result, _C$Y$C$M$C$Q$C$W$C$D$[Q] = result / 3, _C$Y$C$M$C$Q$C$W$C$D$[W] = (diff - zoneDelta) / MILLISECONDS_A_WEEK, _C$Y$C$M$C$Q$C$W$C$D$[D] = (diff - zoneDelta) / MILLISECONDS_A_DAY, _C$Y$C$M$C$Q$C$W$C$D$[H] = diff / MILLISECONDS_A_HOUR, _C$Y$C$M$C$Q$C$W$C$D$[MIN] = diff / MILLISECONDS_A_MINUTE, _C$Y$C$M$C$Q$C$W$C$D$[S] = diff / MILLISECONDS_A_SECOND, _C$Y$C$M$C$Q$C$W$C$D$)[unit] || diff; // milliseconds
+
+    var getMonth = function getMonth() {
+      return Utils.m(_this4, that);
+    };
+
+    var result;
+
+    switch (unit) {
+      case Y:
+        result = getMonth() / 12;
+        break;
+
+      case M:
+        result = getMonth();
+        break;
+
+      case Q:
+        result = getMonth() / 3;
+        break;
+
+      case W:
+        result = (diff - zoneDelta) / MILLISECONDS_A_WEEK;
+        break;
+
+      case D:
+        result = (diff - zoneDelta) / MILLISECONDS_A_DAY;
+        break;
+
+      case H:
+        result = diff / MILLISECONDS_A_HOUR;
+        break;
+
+      case MIN:
+        result = diff / MILLISECONDS_A_MINUTE;
+        break;
+
+      case S:
+        result = diff / MILLISECONDS_A_SECOND;
+        break;
+
+      default:
+        result = diff; // milliseconds
+
+        break;
+    }
 
     return _float ? result : Utils.a(result);
   };
@@ -1097,7 +1191,7 @@ const updateLocale = (function (option, Dayjs, dayjs) {
   };
 });
 
-const inputTimePickerCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}";
+const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([hidden]){display:none}[hidden]{display:none}";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayJsLocaleToLocaleConfigImport = new Map([
@@ -1150,7 +1244,7 @@ const supportedDayJsLocaleToLocaleConfigImport = new Map([
   ["vi", () => import('./vi.js')],
   ["zh-cn", () => import('./zh-cn.js')],
   ["zh-hk", () => import('./zh-hk.js')],
-  ["zh-tw", () => import('./zh-tw.js')]
+  ["zh-tw", () => import('./zh-tw.js')],
 ]);
 dayjs.extend(customParseFormat);
 dayjs.extend(localeData);
@@ -1187,7 +1281,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         value: this.value,
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds()
+        includeSeconds: this.shouldIncludeSeconds(),
       });
       if (localizedTimeString !== inputValue) {
         this.setInputValue(localizedTimeString);
@@ -1206,7 +1300,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         numberStringFormatter.numberFormatOptions = {
           locale,
           numberingSystem,
-          useGrouping: false
+          useGrouping: false,
         };
         const valueInNumberingSystem = numberStringFormatter
           .delocalize(target.value)
@@ -1228,7 +1322,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         value,
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        includeSeconds
+        includeSeconds,
       }));
     };
     this.popoverCloseHandler = () => {
@@ -1236,7 +1330,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         onDeactivate: () => {
           this.calciteInputEl.setFocus();
           this.focusOnOpen = false;
-        }
+        },
       });
     };
     this.popoverOpenHandler = () => {
@@ -1246,7 +1340,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
             this.calciteTimePickerEl.setFocus();
             this.focusOnOpen = false;
           }
-        }
+        },
       });
     };
     this.keyDownHandler = (event) => {
@@ -1268,7 +1362,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
           value: this.value,
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
-          includeSeconds: this.shouldIncludeSeconds()
+          includeSeconds: this.shouldIncludeSeconds(),
         });
         if (newValue && this.calciteInputEl.value !== localizedTimeString) {
           this.setInputValue(localizedTimeString);
@@ -1297,8 +1391,8 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         focusTrapEl: el,
         focusTrapOptions: {
           initialFocus: false,
-          setReturnFocus: false
-        }
+          setReturnFocus: false,
+        },
       });
     };
     this.setInputValue = (newInputValue) => {
@@ -1329,7 +1423,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
           value: oldValue,
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
-          includeSeconds: this.shouldIncludeSeconds()
+          includeSeconds: this.shouldIncludeSeconds(),
         }));
       }
     };
@@ -1347,7 +1441,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
           value: this.value,
           includeSeconds,
           locale: this.effectiveLocale,
-          numberingSystem: this.numberingSystem
+          numberingSystem: this.numberingSystem,
         })
         : "");
     };
@@ -1403,7 +1497,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
       value: this.value,
       locale: this.effectiveLocale,
       numberingSystem,
-      includeSeconds: this.shouldIncludeSeconds()
+      includeSeconds: this.shouldIncludeSeconds(),
     }));
   }
   stepWatcher(newStep, oldStep) {
@@ -1424,7 +1518,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
       value: this.value,
       locale,
       numberingSystem: this.numberingSystem,
-      includeSeconds: this.shouldIncludeSeconds()
+      includeSeconds: this.shouldIncludeSeconds(),
     }));
   }
   // --------------------------------------------------------------------------
@@ -1434,7 +1528,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   /**
@@ -1486,23 +1580,23 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
           L: "DD/MM/YYYY",
           LL: "D MMMM YYYY",
           LLL: "D MMMM YYYY HH:mm A",
-          LLLL: "dddd D MMMM YYYY HH:mm A"
-        }
+          LLLL: "dddd D MMMM YYYY HH:mm A",
+        },
       };
     }
     if (locale === "en-au") {
       return {
-        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+        meridiem: (hour) => (hour > 12 ? "pm" : "am"),
       };
     }
     if (locale === "en-ca") {
       return {
-        meridiem: (hour) => (hour > 12 ? "p.m." : "a.m.")
+        meridiem: (hour) => (hour > 12 ? "p.m." : "a.m."),
       };
     }
     if (locale === "el") {
       return {
-        meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ.")
+        meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ."),
       };
     }
     if (locale === "hi") {
@@ -1513,31 +1607,31 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
           L: "DD/MM/YYYY",
           LL: "D MMMM YYYY",
           LLL: "D MMMM YYYY, h:mm A",
-          LLLL: "dddd, D MMMM YYYY, h:mm A"
+          LLLL: "dddd, D MMMM YYYY, h:mm A",
         },
-        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+        meridiem: (hour) => (hour > 12 ? "pm" : "am"),
       };
     }
     if (locale === "ko") {
       return {
-        meridiem: (hour) => (hour > 12 ? "오후" : "오전")
+        meridiem: (hour) => (hour > 12 ? "오후" : "오전"),
       };
     }
     if (locale === "zh-tw") {
       return {
         formats: {
           LT: "AHH:mm",
-          LTS: "AHH:mm:ss"
-        }
+          LTS: "AHH:mm:ss",
+        },
       };
     }
     if (locale === "zh-hk") {
       return {
         formats: {
           LT: "AHH:mm",
-          LTS: "AHH:mm:ss"
+          LTS: "AHH:mm:ss",
         },
-        meridiem: (hour) => (hour > 12 ? "下午" : "上午")
+        meridiem: (hour) => (hour > 12 ? "下午" : "上午"),
       };
     }
   }
@@ -1576,7 +1670,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         value: this.value,
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds()
+        includeSeconds: this.shouldIncludeSeconds(),
       }));
     }
   }

package/dist/components/calcite-input-time-zone.js

@@ -0,0 +1,251 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as connectLabel, d as disconnectLabel } from './label.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
+import { d as defineCustomElement$5 } from './chip.js';
+import { d as defineCustomElement$4 } from './combobox.js';
+import { d as defineCustomElement$3 } from './combobox-item.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
+ */
+const hourToMinutes = 60;
+function getUserTimeZoneOffset() {
+  const localDate = new Date();
+  return localDate.getTimezoneOffset() * -1;
+}
+function getFallbackTimeZoneGroups() {
+  const timeZoneOffsets = [
+    -11, -10, -9.5, -9, -8, -7, -6, -5, -4, -3, -2.5, -2, -1, 0, 1, 2, 3, 3.5, 4, 4.5, 5, 6, 6.5, 7, 8, 8.75, 9, 9.5,
+    10, 10.5, 11, 12, 12.75, 13, 14,
+  ];
+  return timeZoneOffsets.map((offset) => {
+    return {
+      offsetValue: offset * hourToMinutes,
+      offsetLabel: toGMTLabel(offset),
+    };
+  });
+}
+/**
+ * Exported for testing-purposes only
+ *
+ * @internal
+ */
+function toGMTLabel(offsetInHours) {
+  return `GMT${offsetInHours === 0 ? "" : offsetInHours.toLocaleString("en", { signDisplay: "always" })}`;
+}
+let timeZoneGeneration;
+async function generateTimeZoneGroups() {
+  if (timeZoneGeneration) {
+    return timeZoneGeneration;
+  }
+  timeZoneGeneration = Promise.resolve(getFallbackTimeZoneGroups());
+  return timeZoneGeneration;
+}
+
+const inputTimeZoneCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+
+const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteInputTimeZoneBeforeClose = createEvent(this, "calciteInputTimeZoneBeforeClose", 6);
+    this.calciteInputTimeZoneBeforeOpen = createEvent(this, "calciteInputTimeZoneBeforeOpen", 6);
+    this.calciteInputTimeZoneChange = createEvent(this, "calciteInputTimeZoneChange", 6);
+    this.calciteInputTimeZoneClose = createEvent(this, "calciteInputTimeZoneClose", 6);
+    this.calciteInputTimeZoneOpen = createEvent(this, "calciteInputTimeZoneOpen", 6);
+    this.setComboboxRef = (el) => {
+      this.comboboxEl = el;
+    };
+    this.onComboboxBeforeClose = (event) => {
+      event.stopPropagation();
+      this.calciteInputTimeZoneBeforeClose.emit();
+    };
+    this.onComboboxBeforeOpen = (event) => {
+      event.stopPropagation();
+      this.calciteInputTimeZoneBeforeOpen.emit();
+    };
+    this.onComboboxChange = (event) => {
+      event.stopPropagation();
+      const combobox = event.target;
+      const selected = this.timeZoneGroups.find(({ offsetValue }) => combobox.value === `${offsetValue}`);
+      const selectedValue = `${selected.offsetValue}`;
+      if (this.value === selectedValue) {
+        return;
+      }
+      this.value = selectedValue;
+      this.selectedTimeZoneGroup = selected;
+      this.calciteInputTimeZoneChange.emit();
+    };
+    this.onComboboxClose = (event) => {
+      event.stopPropagation();
+      this.open = false;
+      this.calciteInputTimeZoneClose.emit();
+    };
+    this.onComboboxOpen = (event) => {
+      this.open = true;
+      event.stopPropagation();
+      this.calciteInputTimeZoneOpen.emit();
+    };
+    this.disabled = false;
+    this.form = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.name = undefined;
+    this.open = false;
+    this.overlayPositioning = "absolute";
+    this.required = false;
+    this.scale = "m";
+    this.value = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  valueWatcher(value) {
+    if (this.comboboxEl && this.comboboxEl.value !== value) {
+      this.comboboxEl.value = value;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  async setFocus() {
+    await componentFocusable(this);
+    await this.comboboxEl.setFocus();
+  }
+  effectiveLocaleWatcher() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectForm(this);
+    connectLabel(this);
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  disconnectedCallback() {
+    disconnectForm(this);
+    disconnectLabel(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  async componentWillLoad() {
+    var _a;
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+    const timeZoneGroups = await generateTimeZoneGroups();
+    this.timeZoneGroups = timeZoneGroups;
+    const offsetToMatch = (_a = this.value) !== null && _a !== void 0 ? _a : getUserTimeZoneOffset();
+    this.selectedTimeZoneGroup = timeZoneGroups.find(({ offsetValue }) => 
+    // intentional == to match string to number
+    offsetValue == offsetToMatch);
+    const selectedValue = `${this.selectedTimeZoneGroup.offsetValue}`;
+    afterConnectDefaultValueSet(this, selectedValue);
+    this.value = selectedValue;
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  render() {
+    return (h(Host, null, h("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setComboboxRef }, this.timeZoneGroups.map((group) => {
+      const selected = this.selectedTimeZoneGroup === group;
+      const label = group.offsetLabel;
+      const value = group.offsetValue;
+      return (h("calcite-combobox-item", { key: label, selected: selected, textLabel: label, value: `${value}` }));
+    })), h(HiddenFormInputSlot, { component: this })));
+  }
+  static get delegatesFocus() { return true; }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "messageOverrides": ["onMessagesChange"],
+    "value": ["valueWatcher"],
+    "effectiveLocale": ["effectiveLocaleWatcher"]
+  }; }
+  static get style() { return inputTimeZoneCss; }
+}, [17, "calcite-input-time-zone", {
+    "disabled": [516],
+    "form": [513],
+    "messages": [1040],
+    "messageOverrides": [1040],
+    "name": [513],
+    "open": [1540],
+    "overlayPositioning": [513, "overlay-positioning"],
+    "required": [516],
+    "scale": [513],
+    "value": [1025],
+    "defaultMessages": [32],
+    "effectiveLocale": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-input-time-zone", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-input-time-zone":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InputTimeZone);
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CalciteInputTimeZone = InputTimeZone;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteInputTimeZone, defineCustomElement };