@esri/calcite-components 1.0.0-next.678 → 1.0.0-next.679

package/dist/cjs/calcite-date-picker_4.cjs.entry.js

@@ -1,22 +1,25 @@
 /*!
  * 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-next.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const resources = require('./resources-f59f21b3.js');
-const locale = require('./locale-ce4edb57.js');
-const dom = require('./dom-5c929b62.js');
-const resources$1 = require('./resources-7df48fc6.js');
-const interactive = require('./interactive-e0095568.js');
-const key = require('./key-d629f690.js');
-const Heading = require('./Heading-a6e49319.js');
-require('./observers-9524d251.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const utils = require('./utils-c6c9147a.js');
+const t9n = require('./t9n-3cb110cf.js');
+const locale = require('./locale-8b87a2fe.js');
+const dom = require('./dom-7155cb03.js');
+const resources = require('./resources-c39f2198.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const key = require('./key-b75091ee.js');
+const Heading = require('./Heading-7724b262.js');
+require('./observers-4b68f005.js');
+require('./guid-92d3ff00.js');
+
+const HEADING_LEVEL = 2;
 
 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}";
 
@@ -78,8 +81,8 @@ const DatePicker = class {
       };
       if (!this.proximitySelectionDisabled) {
         if (this.endAsDate) {
-          const startDiff = resources.getDaysDiff(date, this.startAsDate);
-          const endDiff = resources.getDaysDiff(date, this.endAsDate);
+          const startDiff = utils.getDaysDiff(date, this.startAsDate);
+          const endDiff = utils.getDaysDiff(date, this.endAsDate);
           if (endDiff > 0) {
             this.hoverRange.end = date;
             this.hoverRange.focused = "end";
@@ -159,8 +162,8 @@ const DatePicker = class {
      */
     this.monthDateChange = (event) => {
       const date = new Date(event.detail);
-      const isoDate = resources.dateToISO(date);
-      if (!this.range && isoDate === resources.dateToISO(this.valueAsDate)) {
+      const isoDate = utils.dateToISO(date);
+      if (!this.range && isoDate === utils.dateToISO(this.valueAsDate)) {
         return;
       }
       if (!this.range) {
@@ -195,8 +198,8 @@ const DatePicker = class {
             }
           }
           else {
-            const startDiff = resources.getDaysDiff(date, this.startAsDate);
-            const endDiff = resources.getDaysDiff(date, this.endAsDate);
+            const startDiff = utils.getDaysDiff(date, this.startAsDate);
+            const endDiff = utils.getDaysDiff(date, this.endAsDate);
             if (endDiff === 0 || startDiff < 0) {
               this.setStartDate(date);
             }
@@ -229,17 +232,19 @@ const DatePicker = class {
     this.maxAsDate = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.intlPrevMonth = resources.TEXT.prevMonth;
-    this.intlNextMonth = resources.TEXT.nextMonth;
-    this.intlYear = resources.TEXT.year;
+    this.intlPrevMonth = undefined;
+    this.intlNextMonth = undefined;
+    this.intlYear = 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.globalAttributes = {};
     this.effectiveLocale = "";
+    this.defaultMessages = undefined;
     this.localeData = undefined;
     this.hoverRange = undefined;
   }
@@ -260,14 +265,17 @@ const DatePicker = class {
   }
   onMinChanged(min) {
     if (min) {
-      this.minAsDate = resources.dateFromISO(min);
+      this.minAsDate = utils.dateFromISO(min);
     }
   }
   onMaxChanged(max) {
     if (max) {
-      this.maxAsDate = resources.dateFromISO(max);
+      this.maxAsDate = utils.dateFromISO(max);
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -275,32 +283,35 @@ const DatePicker = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     locale.connectLocalized(this);
+    t9n.connectMessages(this);
     if (Array.isArray(this.value)) {
-      this.valueAsDate = resources.getValueAsDateRange(this.value);
+      this.valueAsDate = utils.getValueAsDateRange(this.value);
     }
     else if (this.value) {
-      this.valueAsDate = resources.dateFromISO(this.value);
+      this.valueAsDate = utils.dateFromISO(this.value);
     }
     if (this.min) {
-      this.minAsDate = resources.dateFromISO(this.min);
+      this.minAsDate = utils.dateFromISO(this.min);
     }
     if (this.max) {
-      this.maxAsDate = resources.dateFromISO(this.max);
+      this.maxAsDate = utils.dateFromISO(this.max);
     }
   }
   disconnectedCallback() {
     locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
+    await t9n.setUpMessages(this);
   }
   render() {
-    const date = resources.dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    const date = utils.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)
-      ? resources.dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate)
+      ? utils.dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate)
       : null;
     const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
     if ((this.activeRange === "end" ||
@@ -323,12 +334,15 @@ const DatePicker = class {
       : this.maxAsDate;
     return (index.h(index.Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   valueHandler(value) {
     if (Array.isArray(value)) {
-      this.valueAsDate = resources.getValueAsDateRange(value);
+      this.valueAsDate = utils.getValueAsDateRange(value);
     }
     else if (value) {
-      this.valueAsDate = resources.dateFromISO(value);
+      this.valueAsDate = utils.dateFromISO(value);
     }
   }
   async loadLocaleData() {
@@ -337,7 +351,7 @@ const DatePicker = class {
       locale: this.effectiveLocale,
       useGrouping: false
     };
-    this.localeData = await resources.getLocaleData(this.effectiveLocale);
+    this.localeData = await utils.getLocaleData(this.effectiveLocale);
   }
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
@@ -350,7 +364,7 @@ const DatePicker = class {
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      index.h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel, 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() }),
+      index.h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, localeData: this.localeData, max: maxDate, messages: this.messages, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
       index.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 })
     ]);
   }
@@ -374,7 +388,7 @@ const DatePicker = class {
    * @param emit
    */
   setEndAsDate(endDate, emit) {
-    this.endAsDate = endDate ? resources.setEndOfDay(endDate) : endDate;
+    this.endAsDate = endDate ? utils.setEndOfDay(endDate) : endDate;
     this.mostRecentRangeValue = this.endAsDate;
     if (emit) {
       this.calciteDatePickerRangeChange.emit();
@@ -396,10 +410,10 @@ const DatePicker = class {
    * @param max
    */
   getActiveDate(value, min, max) {
-    return resources.dateFromRange(this.activeDate, min, max) || value || resources.dateFromRange(new Date(), min, max);
+    return utils.dateFromRange(this.activeDate, min, max) || value || utils.dateFromRange(new Date(), min, max);
   }
   getActiveEndDate(value, min, max) {
-    return (resources.dateFromRange(this.activeEndDate, min, max) || value || resources.dateFromRange(new Date(), min, max));
+    return (utils.dateFromRange(this.activeEndDate, min, max) || value || utils.dateFromRange(new Date(), min, max));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
@@ -410,8 +424,12 @@ const DatePicker = class {
     "endAsDate": ["handleRangeChange"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
-    "value": ["valueHandler"],
-    "effectiveLocale": ["loadLocaleData"]
+    "intlNextMonth": ["onMessagesChange"],
+    "intlPrevMonth": ["onMessagesChange"],
+    "intlYear": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "loadLocaleData"],
+    "value": ["valueHandler"]
   }; }
 };
 DatePicker.style = datePickerCss;
@@ -472,7 +490,7 @@ const DatePickerDay = class {
     }
     const formattedDay = locale.numberStringFormatter.localize(String(this.day));
     const dir = dom.getElementDir(this.el);
-    return (index.h(index.Host, { onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "gridcell" }, index.h("div", { class: { "day-v-wrapper": true, [resources$1.CSS_UTILITY.rtl]: dir === "rtl" } }, index.h("div", { class: "day-wrapper" }, index.h("span", { class: "day" }, index.h("span", { class: "text" }, formattedDay))))));
+    return (index.h(index.Host, { onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "gridcell" }, index.h("div", { class: { "day-v-wrapper": true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, index.h("div", { class: "day-wrapper" }, index.h("span", { class: "day" }, index.h("span", { class: "text" }, formattedDay))))));
   }
   componentDidRender() {
     interactive.updateHostInteraction(this, this.isTabbable);
@@ -602,7 +620,7 @@ const DatePickerMonth = class {
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
-        const active = resources.sameDate(date, this.activeDate);
+        const active = utils.sameDate(date, this.activeDate);
         return this.renderDateDay(active, day, date, true, true);
       }),
       ...nextMonDays.map((day) => {
@@ -629,7 +647,7 @@ const DatePickerMonth = class {
   addMonths(step) {
     const nextDate = new Date(this.activeDate);
     nextDate.setMonth(this.activeDate.getMonth() + step);
-    this.calciteDatePickerActiveDateChange.emit(resources.dateFromRange(nextDate, this.min, this.max));
+    this.calciteDatePickerActiveDateChange.emit(utils.dateFromRange(nextDate, this.min, this.max));
     this.activeFocus = true;
   }
   /**
@@ -640,7 +658,7 @@ const DatePickerMonth = class {
   addDays(step = 0) {
     const nextDate = new Date(this.activeDate);
     nextDate.setDate(this.activeDate.getDate() + step);
-    this.calciteDatePickerActiveDateChange.emit(resources.dateFromRange(nextDate, this.min, this.max));
+    this.calciteDatePickerActiveDateChange.emit(utils.dateFromRange(nextDate, this.min, this.max));
     this.activeFocus = true;
   }
   /**
@@ -713,9 +731,9 @@ const DatePickerMonth = class {
    * @param date
    */
   isSelected(date) {
-    return !!(resources.sameDate(date, this.selectedDate) ||
-      (this.startDate && resources.sameDate(date, this.startDate)) ||
-      (this.endDate && resources.sameDate(date, this.endDate)));
+    return !!(utils.sameDate(date, this.selectedDate) ||
+      (this.startDate && utils.sameDate(date, this.startDate)) ||
+      (this.endDate && utils.sameDate(date, this.endDate)));
   }
   /**
    * Determine if the date is the start of the date range
@@ -724,16 +742,16 @@ const DatePickerMonth = class {
    */
   isStartOfRange(date) {
     return !!(this.startDate &&
-      !resources.sameDate(this.startDate, this.endDate) &&
-      resources.sameDate(this.startDate, date) &&
+      !utils.sameDate(this.startDate, this.endDate) &&
+      utils.sameDate(this.startDate, date) &&
       !this.isEndOfRange(date));
   }
   isEndOfRange(date) {
-    return !!((this.endDate && !resources.sameDate(this.startDate, this.endDate) && resources.sameDate(this.endDate, date)) ||
+    return !!((this.endDate && !utils.sameDate(this.startDate, this.endDate) && utils.sameDate(this.endDate, date)) ||
       (!this.endDate &&
         this.hoverRange &&
-        resources.sameDate(this.startDate, this.hoverRange.end) &&
-        resources.sameDate(date, this.hoverRange.end)));
+        utils.sameDate(this.startDate, this.hoverRange.end) &&
+        utils.sameDate(date, this.hoverRange.end)));
   }
   /**
    * Render calcite-date-picker-day
@@ -747,13 +765,13 @@ const DatePickerMonth = class {
   renderDateDay(active, day, date, currentMonth, ref) {
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
-      (!this.endDate && this.hoverRange && resources.sameDate(this.hoverRange?.end, this.startDate));
+      (!this.endDate && this.hoverRange && utils.sameDate(this.hoverRange?.end, this.startDate));
     return (index.h("calcite-date-picker-day", { active: active, class: {
         "hover--inside-range": this.startDate && isHoverInRange,
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !resources.inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !resources.sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !utils.inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !utils.sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el?.focus();
@@ -779,13 +797,13 @@ const DatePickerMonth = class {
     const isStart = this.isFocusedOnStart();
     const insideRange = this.isHoverInRange();
     const cond1 = insideRange &&
-      ((!isStart && date > this.startDate && (date < end || resources.sameDate(date, end))) ||
-        (isStart && date < this.endDate && (date > start || resources.sameDate(date, start))));
+      ((!isStart && date > this.startDate && (date < end || utils.sameDate(date, end))) ||
+        (isStart && date < this.endDate && (date > start || utils.sameDate(date, start))));
     const cond2 = !insideRange &&
-      ((!isStart && date >= this.endDate && (date < end || resources.sameDate(date, end))) ||
+      ((!isStart && date >= this.endDate && (date < end || utils.sameDate(date, end))) ||
         (isStart &&
-          (date < this.startDate || (this.endDate && resources.sameDate(date, this.startDate))) &&
-          (date > start || resources.sameDate(date, start))));
+          (date < this.startDate || (this.endDate && utils.sameDate(date, this.startDate))) &&
+          (date > start || utils.sameDate(date, start))));
     return cond1 || cond2;
   }
   get el() { return index.getElement(this); }
@@ -875,11 +893,9 @@ const DatePickerMonthHeader = class {
     this.headingLevel = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.intlPrevMonth = undefined;
-    this.intlNextMonth = undefined;
-    this.intlYear = undefined;
     this.scale = undefined;
     this.localeData = undefined;
+    this.messages = undefined;
     this.globalAttributes = {};
     this.nextMonthDate = undefined;
     this.prevMonthDate = undefined;
@@ -899,7 +915,8 @@ const DatePickerMonthHeader = class {
     return index.h("div", { class: CSS.header }, this.renderContent());
   }
   renderContent() {
-    if (!this.activeDate || !this.localeData) {
+    const { messages, localeData, activeDate } = this;
+    if (!activeDate || !localeData) {
       return null;
     }
     if (this.parentDatePickerEl) {
@@ -910,25 +927,25 @@ const DatePickerMonthHeader = class {
         ...(locale$1 && { locale: locale$1 })
       };
     }
-    const activeMonth = this.activeDate.getMonth();
-    const { months, unitOrder } = this.localeData;
+    const activeMonth = activeDate.getMonth();
+    const { months, unitOrder } = localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
-    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear());
+    const localizedYear = this.formatCalendarYear(activeDate.getFullYear());
     const iconScale = this.scale === "l" ? "m" : "s";
-    const order = resources.getOrder(unitOrder);
+    const order = utils.getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
-    const suffix = this.localeData.year?.suffix;
-    return (index.h(index.Fragment, null, index.h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlPrevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, index.h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), index.h("div", { class: { text: true, [CSS.textReverse]: reverse } }, index.h(Heading.Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), index.h("span", { class: CSS.yearWrap }, index.h("input", { "aria-label": this.intlYear, class: {
+    const suffix = localeData.year?.suffix;
+    return (index.h(index.Fragment, null, index.h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, index.h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), index.h("div", { class: { text: true, [CSS.textReverse]: reverse } }, index.h(Heading.Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), index.h("span", { class: CSS.yearWrap }, index.h("input", { "aria-label": messages.year, class: {
         year: true,
         [CSS.yearSuffix]: !!suffix
-      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && index.h("span", { class: CSS.suffix }, suffix))), index.h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlNextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, index.h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
+      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && index.h("span", { class: CSS.suffix }, suffix))), index.h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, index.h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
       return;
     }
-    this.nextMonthDate = resources.dateFromRange(resources.nextMonth(this.activeDate), this.min, this.max);
-    this.prevMonthDate = resources.dateFromRange(resources.prevMonth(this.activeDate), this.min, this.max);
+    this.nextMonthDate = utils.dateFromRange(utils.nextMonth(this.activeDate), this.min, this.max);
+    this.prevMonthDate = utils.dateFromRange(utils.prevMonth(this.activeDate), this.min, this.max);
   }
   formatCalendarYear(year) {
     const { localeData } = this;
@@ -953,7 +970,7 @@ const DatePickerMonthHeader = class {
     if (year && inRange && length === localizedYear.length) {
       const nextDate = new Date(activeDate);
       nextDate.setFullYear(year);
-      return resources.dateFromRange(nextDate, min, max);
+      return utils.dateFromRange(nextDate, min, max);
     }
   }
   /**

package/dist/cjs/calcite-dropdown_3.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * 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-next.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const floatingUi = require('./floating-ui-74b3b61d.js');
-const observers = require('./observers-9524d251.js');
-const interactive = require('./interactive-e0095568.js');
-const openCloseComponent = require('./openCloseComponent-f9d61285.js');
-const guid = require('./guid-ddfe8762.js');
-const key = require('./key-d629f690.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./resources-7df48fc6.js');
-require('./debounce-1708cb5d.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const floatingUi = require('./floating-ui-5145df24.js');
+const observers = require('./observers-4b68f005.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const openCloseComponent = require('./openCloseComponent-edf314b0.js');
+const guid = require('./guid-92d3ff00.js');
+const key = require('./key-b75091ee.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./resources-c39f2198.js');
+require('./debounce-b1f6402f.js');
 
 const SLOTS = {
   dropdownTrigger: "trigger"

package/dist/cjs/calcite-fab.cjs.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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-next.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const interactive = require('./interactive-e0095568.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
 
 const CSS = {
   button: "button"

package/dist/cjs/calcite-filter.cjs.entry.js

@@ -1,29 +1,29 @@
 /*!
  * 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-next.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const interactive = require('./interactive-e0095568.js');
-const filter = require('./filter-15732eea.js');
-const loadable = require('./loadable-7929ed41.js');
-const debounce = require('./debounce-1708cb5d.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const filter = require('./filter-f2c0bf87.js');
+const locale = require('./locale-8b87a2fe.js');
+const t9n = require('./t9n-3cb110cf.js');
+const loadable = require('./loadable-b9b1bd28.js');
+const debounce = require('./debounce-b1f6402f.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
+require('./key-b75091ee.js');
+require('./observers-4b68f005.js');
 
 const CSS = {
   container: "container",
   searchIcon: "search-icon"
 };
-const TEXT = {
-  filterLabel: "Filter",
-  clear: "Clear filter"
-};
 const ICONS = {
   search: "search",
   close: "x"
@@ -69,28 +69,48 @@ const Filter = class {
     this.placeholder = undefined;
     this.scale = "m";
     this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   watchItemsHandler() {
     this.filter(this.value);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   valueHandler(value) {
     this.filter(value);
   }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
     loadable.setUpLoadableComponent(this);
     this.updateFiltered(filter.filter(this.items, this.value));
+    this.filter(this.value);
+    await t9n.setUpMessages(this);
   }
-  componentDidLoad() {
-    loadable.setComponentLoaded(this);
+  connectedCallback() {
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
   }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -115,14 +135,19 @@ const Filter = class {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (index.h(index.Fragment, null, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, clearable: true, disabled: disabled, icon: ICONS.search, intlClear: this.intlClear || TEXT.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+    return (index.h(index.Fragment, null, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS.search, intlClear: this.messages.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
       }, scale: scale, type: "text", value: this.value })))));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "items": ["watchItemsHandler"],
-    "value": ["valueHandler"]
+    "intlClear": ["onMessagesChange"],
+    "intlLabel": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "value": ["valueHandler"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
 Filter.style = filterCss;