@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

package/dist/components/date-picker.js

@@ -1,11 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
+ * v1.0.0-beta.99
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale.js';
-import { a as dateFromISO, g as getDaysDiff, d as dateToISO, b as dateFromRange, s as setEndOfDay } from './date.js';
+import { c as dateFromISO, g as getDaysDiff, b as dateToISO, e as dateFromRange, s as setEndOfDay } from './date.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
 import { d as defineCustomElement$4 } from './date-picker-day.js';
 import { d as defineCustomElement$3 } from './date-picker-month.js';
 import { d as defineCustomElement$2 } from './date-picker-month-header.js';
@@ -58,13 +59,8 @@ function getValueAsDateRange(value) {
 }
 
 const HEADING_LEVEL = 2;
-const TEXT = {
-  nextMonth: "Next month",
-  prevMonth: "Previous month",
-  year: "Year"
-};
 
-const datePickerCss = "@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-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-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)}:host([hidden]){display:none}:host{position:relative;display:inline-block;inline-size:100%;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);vertical-align:top}:host([scale=s]){max-inline-size:216px}:host([scale=m]){max-inline-size:286px}:host([scale=l]){max-inline-size:398px}";
+const datePickerCss = "@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-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-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{position:relative;display:inline-block;inline-size:100%;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);vertical-align:top}:host([scale=s]){max-inline-size:216px}:host([scale=m]){max-inline-size:286px}:host([scale=l]){max-inline-size:398px}";
 
 const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -73,37 +69,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 6);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 6);
-    /**
-     * Localized string for "previous month" (used for aria label)
-     *
-     * @default "Previous month"
-     */
-    this.intlPrevMonth = TEXT.prevMonth;
-    /**
-     * Localized string for "next month" (used for aria label)
-     *
-     * @default "Next month"
-     */
-    this.intlNextMonth = TEXT.nextMonth;
-    /**
-     * Localized string for "year" (used for aria label)
-     *
-     * @default "Year"
-     */
-    this.intlYear = TEXT.year;
-    /** specify the scale of the date picker */
-    this.scale = "m";
-    /** Range mode activation */
-    this.range = false;
-    /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
-    this.proximitySelectionDisabled = false;
-    this.globalAttributes = {};
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -219,16 +184,15 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Reset active date and close
      */
     this.reset = () => {
-      var _a, _b, _c, _d, _e, _f;
       if (!Array.isArray(this.valueAsDate) &&
         this.valueAsDate &&
-        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+        this.valueAsDate?.getTime() !== this.activeDate?.getTime()) {
         this.activeDate = new Date(this.valueAsDate);
       }
-      if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
+      if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
         this.activeStartDate = new Date(this.startAsDate);
       }
-      if (this.endAsDate && ((_e = this.endAsDate) === null || _e === void 0 ? void 0 : _e.getTime()) !== ((_f = this.activeEndDate) === null || _f === void 0 ? void 0 : _f.getTime())) {
+      if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
         this.activeEndDate = new Date(this.endAsDate);
       }
     };
@@ -239,11 +203,15 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.monthDateChange = (event) => {
       const date = new Date(event.detail);
+      const isoDate = dateToISO(date);
+      if (!this.range && isoDate === dateToISO(this.valueAsDate)) {
+        return;
+      }
       if (!this.range) {
-        this.value = date ? dateToISO(date) : "";
+        this.value = isoDate || "";
         this.valueAsDate = date || null;
         this.activeDate = date || null;
-        this.calciteDatePickerChange.emit(date);
+        this.calciteDatePickerChange.emit();
         return;
       }
       if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
@@ -289,11 +257,39 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
         else {
           this.setStartDate(date);
-          this.endAsDate = this.activeEndDate = this.end = undefined;
+          this.endAsDate = this.activeEndDate = undefined;
         }
       }
-      this.calciteDatePickerChange.emit(date);
+      this.calciteDatePickerChange.emit();
     };
+    this.activeDate = undefined;
+    this.activeRange = undefined;
+    this.value = undefined;
+    this.headingLevel = undefined;
+    this.valueAsDate = undefined;
+    this.minAsDate = undefined;
+    this.maxAsDate = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.numberingSystem = undefined;
+    this.scale = "m";
+    this.range = false;
+    this.proximitySelectionDisabled = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.activeStartDate = undefined;
+    this.activeEndDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+    this.localeData = undefined;
+    this.hoverRange = undefined;
+  }
+  activeDateWatcher(newActiveDate) {
+    if (this.activeRange === "end") {
+      this.activeEndDate = newActiveDate;
+    }
   }
   handleValueAsDate(date) {
     if (!Array.isArray(date) && date && date !== this.activeDate) {
@@ -315,6 +311,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.maxAsDate = dateFromISO(max);
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -322,20 +321,13 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
+    connectMessages(this);
     if (Array.isArray(this.value)) {
       this.valueAsDate = getValueAsDateRange(this.value);
-      this.start = this.value[0];
-      this.end = this.value[1];
     }
     else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
     }
-    if (this.start) {
-      this.setStartAsDate(dateFromISO(this.start));
-    }
-    if (this.end) {
-      this.setEndAsDate(dateFromISO(this.end));
-    }
     if (this.min) {
       this.minAsDate = dateFromISO(this.min);
     }
@@ -345,25 +337,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   disconnectedCallback() {
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
+    await setUpMessages(this);
   }
   render() {
-    var _a;
-    const date = dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
-    const activeStartDate = this.range
-      ? this.getActiveStartDate(date, this.minAsDate, this.maxAsDate)
-      : this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-    let activeDate = activeStartDate;
-    const endDate = this.range
-      ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
+    const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    let activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
+    const endDate = this.range && Array.isArray(this.valueAsDate)
+      ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate)
       : null;
     const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
     if ((this.activeRange === "end" ||
-      (((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "end" && (!this.proximitySelectionDisabled || endDate))) &&
+      (this.hoverRange?.focused === "end" && (!this.proximitySelectionDisabled || endDate))) &&
       activeEndDate) {
       activeDate = activeEndDate;
     }
@@ -382,24 +372,17 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       : this.maxAsDate;
     return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   valueHandler(value) {
     if (Array.isArray(value)) {
       this.valueAsDate = getValueAsDateRange(value);
-      this.start = value[0];
-      this.end = value[1];
     }
     else if (value) {
       this.valueAsDate = dateFromISO(value);
-      this.start = "";
-      this.end = "";
     }
   }
-  startWatcher(start) {
-    this.setStartAsDate(dateFromISO(start));
-  }
-  endWatcher(end) {
-    this.setEndAsDate(dateFromISO(end));
-  }
   async loadLocaleData() {
     if (!Build.isBrowser) {
       return;
@@ -422,8 +405,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerSelect: this.monthDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, localeData: this.localeData, max: maxDate, messages: this.messages, min: minDate, onCalciteInternalDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
+      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteInternalDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, onCalciteInternalDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**
@@ -436,10 +419,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.startAsDate = startDate;
     this.mostRecentRangeValue = this.startAsDate;
     if (emit) {
-      this.calciteDatePickerRangeChange.emit({
-        startDate,
-        endDate: this.endAsDate
-      });
+      this.calciteDatePickerRangeChange.emit();
     }
   }
   /**
@@ -452,19 +432,14 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.endAsDate = endDate ? setEndOfDay(endDate) : endDate;
     this.mostRecentRangeValue = this.endAsDate;
     if (emit) {
-      this.calciteDatePickerRangeChange.emit({
-        startDate: this.startAsDate,
-        endDate
-      });
+      this.calciteDatePickerRangeChange.emit();
     }
   }
   setEndDate(date) {
-    this.end = date ? dateToISO(date) : "";
     this.setEndAsDate(date, true);
     this.activeEndDate = date || null;
   }
   setStartDate(date) {
-    this.start = date ? dateToISO(date) : "";
     this.setStartAsDate(date, true);
     this.activeStartDate = date || null;
   }
@@ -478,52 +453,46 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getActiveDate(value, min, max) {
     return dateFromRange(this.activeDate, min, max) || value || dateFromRange(new Date(), min, max);
   }
-  getActiveStartDate(value, min, max) {
-    return (dateFromRange(this.activeStartDate, min, max) || value || dateFromRange(new Date(), min, max));
-  }
   getActiveEndDate(value, min, max) {
     return (dateFromRange(this.activeEndDate, min, max) || value || dateFromRange(new Date(), min, max));
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
+    "activeDate": ["activeDateWatcher"],
     "valueAsDate": ["handleValueAsDate"],
     "startAsDate": ["handleRangeChange"],
     "endAsDate": ["handleRangeChange"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
-    "value": ["valueHandler"],
-    "start": ["startWatcher"],
-    "end": ["endWatcher"],
-    "effectiveLocale": ["loadLocaleData"]
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "loadLocaleData"],
+    "value": ["valueHandler"]
   }; }
   static get style() { return datePickerCss; }
-}, [1, "calcite-date-picker", {
+}, [17, "calcite-date-picker", {
+    "activeDate": [1040],
     "activeRange": [513, "active-range"],
     "value": [1025],
     "headingLevel": [514, "heading-level"],
     "valueAsDate": [1040],
-    "startAsDate": [1040],
-    "endAsDate": [1040],
     "minAsDate": [1040],
     "maxAsDate": [1040],
     "min": [1537],
     "max": [1537],
-    "intlPrevMonth": [1, "intl-prev-month"],
-    "intlNextMonth": [1, "intl-next-month"],
-    "intlYear": [1, "intl-year"],
-    "locale": [1],
     "numberingSystem": [513, "numbering-system"],
     "scale": [513],
     "range": [516],
-    "start": [1537],
-    "end": [1537],
     "proximitySelectionDisabled": [516, "proximity-selection-disabled"],
-    "activeDate": [32],
+    "messageOverrides": [1040],
+    "messages": [1040],
     "activeStartDate": [32],
     "activeEndDate": [32],
-    "globalAttributes": [32],
+    "startAsDate": [32],
+    "endAsDate": [32],
     "effectiveLocale": [32],
+    "defaultMessages": [32],
     "localeData": [32],
     "hoverRange": [32]
   }]);
@@ -562,4 +531,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { DatePicker as D, TEXT as T, getLocaleData as a, defineCustomElement as d, getValueAsDateRange as g };
+export { DatePicker as D, getLocaleData as a, defineCustomElement as d, getValueAsDateRange as g };

package/dist/components/date.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
+ * v1.0.0-beta.99
  */
 import { n as numberStringFormatter } from './locale.js';
 
@@ -13,6 +13,9 @@ import { n as numberStringFormatter } from './locale.js';
  * @param max
  */
 function inRange(date, min, max) {
+  if (!date) {
+    return;
+  }
   const time = date.getTime();
   const afterMin = !(min instanceof Date) || time >= min.getTime();
   const beforeMax = !(max instanceof Date) || time <= max.getTime();
@@ -66,6 +69,46 @@ function dateFromISO(iso8601, isEndDate = false) {
   }
   return date;
 }
+/**
+ * Parse a localized date string into a valid Date.
+ * return false if date is invalid, or out of range
+ *
+ * @param value
+ * @param localeData
+ */
+function dateFromLocalizedString(value, localeData) {
+  if (!localeData) {
+    return null;
+  }
+  const { separator } = localeData;
+  const { day, month, year } = parseDateString(value, localeData);
+  const date = new Date(year, month, day);
+  date.setFullYear(year);
+  const validDay = day > 0;
+  const validMonth = month > -1;
+  const validDate = !isNaN(date.getTime());
+  const validLength = value.split(separator).filter((c) => c).length > 2;
+  const validYear = year.toString().length > 0;
+  if (validDay && validMonth && validDate && validLength && validYear) {
+    return date;
+  }
+  return null;
+}
+/**
+ * Retrieve day, month, and year strings from a localized string
+ *
+ * @param string
+ * @param localeData
+ */
+function datePartsFromLocalizedString(string, localeData) {
+  const { separator, unitOrder } = localeData;
+  const order = getOrder(unitOrder);
+  const values = string.split(separator).map((part) => numberStringFormatter.delocalize(part));
+  const day = values[order.indexOf("d")];
+  const month = values[order.indexOf("m")];
+  const year = values[order.indexOf("y")];
+  return { day, month, year };
+}
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
  *
@@ -126,18 +169,17 @@ function nextMonth(date) {
 /**
  * Parse numeric units for day, month, and year from a localized string
  * month starts at 0 (can pass to date constructor)
+ * can return values as number or string
  *
- * @param str
+ * @param string
  * @param localeData
  */
-function parseDateString(str, localeData) {
-  const { separator, unitOrder } = localeData;
-  const order = getOrder(unitOrder);
-  const values = str.split(separator).map((part) => numberStringFormatter.delocalize(part));
+function parseDateString(string, localeData) {
+  const { day, month, year } = datePartsFromLocalizedString(string, localeData);
   return {
-    day: parseInt(values[order.indexOf("d")]),
-    month: parseInt(values[order.indexOf("m")]) - 1,
-    year: parseInt(values[order.indexOf("y")])
+    day: parseInt(day),
+    month: parseInt(month) - 1,
+    year: parseInt(year)
   };
 }
 /**
@@ -172,4 +214,4 @@ function setEndOfDay(date) {
   return date;
 }
 
-export { dateFromISO as a, dateFromRange as b, sameDate as c, dateToISO as d, getOrder as e, prevMonth as f, getDaysDiff as g, inRange as i, nextMonth as n, parseDateString as p, setEndOfDay as s };
+export { dateFromLocalizedString as a, dateToISO as b, dateFromISO as c, datePartsFromLocalizedString as d, dateFromRange as e, sameDate as f, getDaysDiff as g, getOrder as h, inRange as i, nextMonth as n, prevMonth as p, setEndOfDay as s };

package/dist/components/debounce.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
+ * v1.0.0-beta.99
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

package/dist/components/dom.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
+ * v1.0.0-beta.99
  */
 import { g as guid } from './guid.js';
 
@@ -14,9 +14,6 @@ const CSS_UTILITY = {
   lightTheme,
   rtl: "calcite--rtl"
 };
-const TEXT = {
-  loading: "Loading"
-};
 
 /**
  * This helper will guarantee an ID on the provided element.
@@ -37,7 +34,7 @@ function nodeListToArray(nodeList) {
 }
 function getThemeName(el) {
   const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
-  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
+  return closestElWithTheme?.classList.contains("calcite-theme-dark") ? "dark" : "light";
 }
 function getElementDir(el) {
   const prop = "dir";
@@ -127,7 +124,7 @@ function containsCrossShadowBoundary(element, maybeDescendant) {
   return !!walkUpAncestry(maybeDescendant, (node) => (node === element ? true : undefined));
 }
 function isCalciteFocusable(el) {
-  return typeof (el === null || el === void 0 ? void 0 : el.setFocus) === "function";
+  return typeof el?.setFocus === "function";
 }
 async function focusElement(el) {
   if (!el) {
@@ -146,21 +143,21 @@ function getSlotted(element, slotName, options) {
       ? slotName.map((name) => `[slot="${name}"]`).join(",")
       : `[slot="${slotName}"]`
     : defaultSlotSelector;
-  if (options === null || options === void 0 ? void 0 : options.all) {
+  if (options?.all) {
     return queryMultiple(element, slotSelector, options);
   }
   return querySingle(element, slotSelector, options);
 }
 function getDirectChildren(el, selector) {
-  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+  return el ? Array.from(el.children || []).filter((child) => child?.matches(selector)) : [];
 }
 function queryMultiple(element, slotSelector, options) {
   let matches = slotSelector === defaultSlotSelector
     ? getDirectChildren(element, defaultSlotSelector)
     : Array.from(element.querySelectorAll(slotSelector));
   matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
-  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
-  const selector = options === null || options === void 0 ? void 0 : options.selector;
+  matches = options?.matches ? matches.filter((el) => el?.matches(options.matches)) : matches;
+  const selector = options?.selector;
   return selector
     ? matches
       .map((item) => Array.from(item.querySelectorAll(selector)))
@@ -172,10 +169,10 @@ function querySingle(element, slotSelector, options) {
   let match = slotSelector === defaultSlotSelector
     ? getDirectChildren(element, defaultSlotSelector)[0] || null
     : element.querySelector(slotSelector);
-  match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
-  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
-  const selector = options === null || options === void 0 ? void 0 : options.selector;
-  return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
+  match = options && options.direct === false ? match : match?.parentElement === element ? match : null;
+  match = options?.matches ? (match?.matches(options.matches) ? match : null) : match;
+  const selector = options?.selector;
+  return selector ? match?.querySelector(selector) : match;
 }
 function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
@@ -206,6 +203,34 @@ function intersects(rect1, rect2) {
 function toAriaBoolean(value) {
   return Boolean(value).toString();
 }
+/**
+ * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned element.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ *
+ * @param event
+ * @returns {boolean} Whether the slot has any assigned elements.
+ */
+function slotChangeHasAssignedElement(event) {
+  return !!slotChangeGetAssignedElements(event).length;
+}
+/**
+ * This helper returns the assigned elements on a `slot` element from the `onSlotchange` event.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
+ * ```
+ *
+ * @param event
+ * @returns {boolean} Whether the slot has any assigned elements.
+ */
+function slotChangeGetAssignedElements(event) {
+  return event.target.assignedElements({
+    flatten: true
+  });
+}
 /**
  * This helper returns true if the pointer event fired from the primary button of the device.
  *
@@ -217,5 +242,29 @@ function toAriaBoolean(value) {
 function isPrimaryPointerButton(event) {
   return !!(event.isPrimary && event.button === 0);
 }
+const focusElementInGroup = (elements, currentElement, destination) => {
+  const currentIndex = elements.indexOf(currentElement);
+  const isFirstItem = currentIndex === 0;
+  const isLastItem = currentIndex === elements.length - 1;
+  destination =
+    destination === "previous" && isFirstItem ? "last" : destination === "next" && isLastItem ? "first" : destination;
+  let focusTarget;
+  switch (destination) {
+    case "first":
+      focusTarget = elements[0];
+      break;
+    case "last":
+      focusTarget = elements[elements.length - 1];
+      break;
+    case "next":
+      focusTarget = elements[currentIndex + 1] || elements[0];
+      break;
+    case "previous":
+      focusTarget = elements[currentIndex - 1] || elements[elements.length - 1];
+      break;
+  }
+  focusElement(focusTarget);
+  return focusTarget;
+};
 
-export { CSS_UTILITY as C, TEXT as T, autoTheme as a, getSlotted as b, getElementDir as c, darkTheme as d, getThemeName as e, focusElement as f, getElementProp as g, ensureId as h, isPrimaryPointerButton as i, isCalciteFocusable as j, intersects as k, getRootNode as l, filterDirectChildren as m, nodeListToArray as n, closestElementCrossShadowBoundary as o, containsCrossShadowBoundary as p, queryElementRoots as q, setRequestedIcon as s, toAriaBoolean as t };
+export { CSS_UTILITY as C, autoTheme as a, getSlotted as b, getElementDir as c, darkTheme as d, setRequestedIcon as e, getThemeName as f, getElementProp as g, focusElement as h, isPrimaryPointerButton as i, ensureId as j, slotChangeGetAssignedElements as k, intersects as l, focusElementInGroup as m, nodeListToArray as n, getRootNode as o, filterDirectChildren as p, closestElementCrossShadowBoundary as q, queryElementRoots as r, slotChangeHasAssignedElement as s, toAriaBoolean as t, containsCrossShadowBoundary as u };