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

package/dist/cjs/calcite-input-date-picker.cjs.entry.js

@@ -1,27 +1,27 @@
 /*!
  * 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 label = require('./label-e02d1b7a.js');
-const form = require('./form-f1f6fa64.js');
-const floatingUi = require('./floating-ui-74b3b61d.js');
-const interactive = require('./interactive-e0095568.js');
-const dom = require('./dom-5c929b62.js');
-const openCloseComponent = require('./openCloseComponent-f9d61285.js');
-const locale = require('./locale-ce4edb57.js');
-const key = require('./key-d629f690.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./debounce-1708cb5d.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
-require('./observers-9524d251.js');
+const index = require('./index-8758b88f.js');
+const utils = require('./utils-c6c9147a.js');
+const label = require('./label-70bbf976.js');
+const form = require('./form-b8acc674.js');
+const floatingUi = require('./floating-ui-5145df24.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const dom = require('./dom-7155cb03.js');
+const openCloseComponent = require('./openCloseComponent-edf314b0.js');
+const locale = require('./locale-8b87a2fe.js');
+const key = require('./key-b75091ee.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./debounce-b1f6402f.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
+require('./observers-4b68f005.js');
 
 const CSS = {
   menu: "menu-container",
@@ -43,12 +43,12 @@ const InputDatePicker = class {
     this.calciteInternalInputInputHandler = (event) => {
       const target = event.target;
       const value = target.value;
-      const { year } = resources.datePartsFromLocalizedString(value, this.localeData);
+      const { year } = utils.datePartsFromLocalizedString(value, this.localeData);
       if (year && year.length < 4) {
         return;
       }
-      const date = resources.dateFromLocalizedString(value, this.localeData);
-      if (resources.inRange(date, this.min, this.max)) {
+      const date = utils.dateFromLocalizedString(value, this.localeData);
+      if (utils.inRange(date, this.min, this.max)) {
         this.datePickerActiveDate = date;
       }
     };
@@ -170,21 +170,21 @@ const InputDatePicker = class {
       const oldValueIsArray = Array.isArray(oldValue);
       const valueIsArray = Array.isArray(value);
       const newStartDate = valueIsArray ? value[0] : "";
-      const newStartDateISO = valueIsArray ? resources.dateToISO(newStartDate) : "";
+      const newStartDateISO = valueIsArray ? utils.dateToISO(newStartDate) : "";
       const newEndDate = valueIsArray ? value[1] : "";
-      const newEndDateISO = valueIsArray ? resources.dateToISO(newEndDate) : "";
+      const newEndDateISO = valueIsArray ? utils.dateToISO(newEndDate) : "";
       const newValue = newStartDateISO || newEndDateISO ? [newStartDateISO, newEndDateISO] : "";
       if (newValue === oldValue) {
         return;
       }
       this.userChangedValue = true;
       this.value = newValue;
-      this.valueAsDate = newValue ? resources.getValueAsDateRange(newValue) : undefined;
+      this.valueAsDate = newValue ? utils.getValueAsDateRange(newValue) : undefined;
       this.start = newStartDateISO;
       this.end = newEndDateISO;
       const eventDetail = {
         startDate: newStartDate,
-        endDate: newEndDate ? resources.setEndOfDay(newEndDate) : null
+        endDate: newEndDate ? utils.setEndOfDay(newEndDate) : null
       };
       const changeEvent = this.calciteInputDatePickerChange.emit();
       const rangeChangeEvent = this.calciteDatePickerRangeChange.emit(eventDetail);
@@ -206,12 +206,12 @@ const InputDatePicker = class {
         return;
       }
       const oldValue = this.value;
-      const newValue = resources.dateToISO(value);
+      const newValue = utils.dateToISO(value);
       if (newValue === oldValue) {
         return;
       }
       this.userChangedValue = true;
-      this.valueAsDate = newValue ? resources.dateFromISO(newValue) : undefined;
+      this.valueAsDate = newValue ? utils.dateFromISO(newValue) : undefined;
       this.value = newValue || "";
       const changeEvent = this.calciteInputDatePickerChange.emit();
       const deprecatedDatePickerChangeEvent = this.calciteDatePickerChange.emit(value);
@@ -242,9 +242,9 @@ const InputDatePicker = class {
     this.max = undefined;
     this.open = false;
     this.name = 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.placement = floatingUi.defaultMenuPlacement;
@@ -255,6 +255,7 @@ const InputDatePicker = class {
     this.overlayPositioning = "absolute";
     this.proximitySelectionDisabled = false;
     this.layout = "horizontal";
+    this.messageOverrides = undefined;
     this.datePickerActiveDate = undefined;
     this.effectiveLocale = "";
     this.focusedInput = "start";
@@ -270,12 +271,12 @@ const InputDatePicker = class {
     if (!this.userChangedValue) {
       let newValueAsDate;
       if (Array.isArray(newValue)) {
-        newValueAsDate = resources.getValueAsDateRange(newValue);
+        newValueAsDate = utils.getValueAsDateRange(newValue);
         this.start = newValue[0];
         this.end = newValue[1];
       }
       else if (newValue) {
-        newValueAsDate = resources.dateFromISO(newValue);
+        newValueAsDate = utils.dateFromISO(newValue);
       }
       else {
         newValueAsDate = undefined;
@@ -290,8 +291,8 @@ const InputDatePicker = class {
   valueAsDateWatcher(valueAsDate) {
     this.datePickerActiveDate = valueAsDate;
     const newValue = this.range && Array.isArray(valueAsDate)
-      ? [resources.dateToISO(valueAsDate[0]), resources.dateToISO(valueAsDate[1])]
-      : resources.dateToISO(valueAsDate);
+      ? [utils.dateToISO(valueAsDate[0]), utils.dateToISO(valueAsDate[1])]
+      : utils.dateToISO(valueAsDate);
     if (this.value !== newValue) {
       this.valueAsDateChangedExternally = true;
       this.value = newValue;
@@ -304,12 +305,12 @@ const InputDatePicker = 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);
     }
   }
   openHandler(value) {
@@ -377,13 +378,13 @@ const InputDatePicker = class {
     const { open } = this;
     open && this.openHandler(open);
     if (Array.isArray(this.value)) {
-      this.valueAsDate = resources.getValueAsDateRange(this.value);
+      this.valueAsDate = utils.getValueAsDateRange(this.value);
       this.start = this.value[0];
       this.end = this.value[1];
     }
     else if (this.value) {
       try {
-        this.valueAsDate = resources.dateFromISO(this.value);
+        this.valueAsDate = utils.dateFromISO(this.value);
       }
       catch (error) {
         this.warnAboutInvalidValue(this.value);
@@ -396,16 +397,16 @@ const InputDatePicker = class {
       this.setRangeValue(this.valueAsDate);
     }
     if (this.start) {
-      this.startAsDate = resources.dateFromISO(this.start);
+      this.startAsDate = utils.dateFromISO(this.start);
     }
     if (this.end) {
-      this.endAsDate = resources.setEndOfDay(resources.dateFromISO(this.end));
+      this.endAsDate = utils.setEndOfDay(utils.dateFromISO(this.end));
     }
     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);
     }
     label.connectLabel(this);
     form.connectForm(this);
@@ -454,7 +455,9 @@ const InputDatePicker = class {
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [floatingUi.FloatingCSS.animation]: true,
         [floatingUi.FloatingCSS.animationActive]: this.open
-      }, ref: this.setTransitionEl }, index.h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (index.h("div", { class: "horizontal-arrow-container" }, index.h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { class: "vertical-arrow-container" }, index.h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (index.h("div", { class: "input-wrapper", ref: this.setEndWrapper }, index.h("calcite-input", { class: {
+      }, ref: this.setTransitionEl }, index.h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel,
+      //t9n props are used here to forward the messages only.
+      intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (index.h("div", { class: "horizontal-arrow-container" }, index.h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { class: "vertical-arrow-container" }, index.h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (index.h("div", { class: "input-wrapper", ref: this.setEndWrapper }, index.h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text" }))))), index.h(form.HiddenFormInputSlot, { component: this })));
@@ -486,8 +489,8 @@ const InputDatePicker = class {
     const { focusedInput, value } = this;
     const focusedInputName = `${focusedInput}Input`;
     const focusedInputValue = this[focusedInputName].value;
-    const date = resources.dateFromLocalizedString(focusedInputValue, this.localeData);
-    const dateAsISO = resources.dateToISO(date);
+    const date = utils.dateFromLocalizedString(focusedInputValue, this.localeData);
+    const dateAsISO = utils.dateToISO(date);
     const valueIsArray = Array.isArray(value);
     if (this.range) {
       const focusedInputValueIndex = focusedInput === "start" ? 0 : 1;
@@ -497,23 +500,23 @@ const InputDatePicker = class {
         }
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : resources.dateFromISO(value[0]),
-            focusedInput === "end" ? date : resources.dateFromISO(value[1])
+            focusedInput === "start" ? date : utils.dateFromISO(value[0]),
+            focusedInput === "end" ? date : utils.dateFromISO(value[1])
           ]);
           this.localizeInputValues();
         }
         else {
           this.setRangeValue([
-            focusedInput === "end" && resources.dateFromISO(value[0]),
-            focusedInput === "start" && resources.dateFromISO(value[1])
+            focusedInput === "end" && utils.dateFromISO(value[0]),
+            focusedInput === "start" && utils.dateFromISO(value[1])
           ]);
         }
       }
       else {
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : resources.dateFromISO(value[0]),
-            focusedInput === "end" ? date : resources.dateFromISO(value[1])
+            focusedInput === "start" ? date : utils.dateFromISO(value[0]),
+            focusedInput === "end" ? date : utils.dateFromISO(value[1])
           ]);
           this.localizeInputValues();
         }
@@ -528,10 +531,10 @@ const InputDatePicker = class {
     }
   }
   startWatcher(start) {
-    this.startAsDate = resources.dateFromISO(start);
+    this.startAsDate = utils.dateFromISO(start);
   }
   endWatcher(end) {
-    this.endAsDate = end ? resources.setEndOfDay(resources.dateFromISO(end)) : resources.dateFromISO(end);
+    this.endAsDate = end ? utils.setEndOfDay(utils.dateFromISO(end)) : utils.dateFromISO(end);
   }
   async loadLocaleData() {
     locale.numberStringFormatter.numberFormatOptions = {
@@ -539,7 +542,7 @@ const InputDatePicker = class {
       locale: this.effectiveLocale,
       useGrouping: false
     };
-    this.localeData = await resources.getLocaleData(this.effectiveLocale);
+    this.localeData = await utils.getLocaleData(this.effectiveLocale);
   }
   shouldFocusRangeStart() {
     return !!(this.endAsDate &&
@@ -554,9 +557,9 @@ const InputDatePicker = class {
       this.endInput);
   }
   localizeInputValues() {
-    const date = resources.dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    const date = utils.dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const endDate = this.range
-      ? resources.dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
+      ? utils.dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
       : null;
     const localizedDate = date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale));
     const localizedEndDate = endDate && this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale));

package/dist/cjs/calcite-input-message.cjs.entry.js

@@ -1,16 +1,16 @@
 /*!
  * 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');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
 
 var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/cjs/calcite-input-number.cjs.entry.js

@@ -1,24 +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 dom = require('./dom-5c929b62.js');
-const label = require('./label-e02d1b7a.js');
-const form = require('./form-f1f6fa64.js');
-const locale = require('./locale-ce4edb57.js');
-const key = require('./key-d629f690.js');
-const resources = require('./resources-7df48fc6.js');
-const math = require('./math-b4875d23.js');
-const observers = require('./observers-9524d251.js');
-const interactive = require('./interactive-e0095568.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const label = require('./label-70bbf976.js');
+const form = require('./form-b8acc674.js');
+const locale = require('./locale-8b87a2fe.js');
+const key = require('./key-b75091ee.js');
+const resources = require('./resources-c39f2198.js');
+const math = require('./math-cbe92eea.js');
+const observers = require('./observers-4b68f005.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const t9n = require('./t9n-3cb110cf.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./guid-92d3ff00.js');
 
 const CSS = {
   loader: "loader",
@@ -39,9 +40,6 @@ const CSS = {
 const SLOTS = {
   action: "action"
 };
-const TEXT = {
-  clear: "Clear value"
-};
 
 const inputNumberCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;border-radius:0px;background-color:var(--calcite-ui-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);color:var(--calcite-ui-text-1)}:host input::placeholder,:host input:-ms-input-placeholder,:host input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}:host input:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}:host input[readonly]{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium)}:host input[readonly]:focus{color:var(--calcite-ui-text-1)}:host calcite-icon{color:var(--calcite-ui-text-3)}:host input{outline-color:transparent}:host input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([status=invalid]) input{border-color:var(--calcite-ui-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:-2px}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:1;display:block;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-ui-foreground-2);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-ui-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-ui-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.clear-button:disabled{opacity:var(--calcite-ui-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-ui-text-2)}.prefix{order:2;border-inline-end-width:0px}.suffix{order:5;border-inline-start-width:0px}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([number-button-type=vertical]) .wrapper{flex-direction:row;display:flex}:host([number-button-type=vertical]) input{order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:1;max-block-size:100%;min-block-size:100%;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-inline-end-width:0px}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover{background-color:var(--calcite-ui-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon{color:var(--calcite-ui-text-1)}.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:5}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover{background-color:var(--calcite-ui-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover{background-color:var(--calcite-ui-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover{background-color:var(--calcite-ui-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px}.number-button-item{max-block-size:50%;min-block-size:50%;pointer-events:initial;margin:0px;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;align-self:center;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);padding-block:0px;padding-inline:0.5rem;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline-start-width:0px}.number-button-item calcite-icon{pointer-events:none;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.number-button-item:focus{background-color:var(--calcite-ui-foreground-2)}.number-button-item:focus calcite-icon{color:var(--calcite-ui-text-1)}.number-button-item:active{background-color:var(--calcite-ui-foreground-3)}.number-button-item:disabled{pointer-events:none}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-ui-border-1)}:host .inline-child{background-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host .inline-child .editing-enabled{background-color:inherit}:host .inline-child:not(.editing-enabled){display:flex;cursor:pointer;border-color:transparent;padding-inline-start:0}::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}";
 
@@ -304,7 +302,7 @@ const InputNumber = class {
     this.hidden = false;
     this.icon = undefined;
     this.intlClear = undefined;
-    this.intlLoading = resources.TEXT.loading;
+    this.intlLoading = undefined;
     this.iconFlipRtl = false;
     this.label = undefined;
     this.loading = false;
@@ -329,7 +327,10 @@ const InputNumber = class {
     this.suffixText = undefined;
     this.editingEnabled = false;
     this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
     this.effectiveLocale = "";
+    this.defaultMessages = undefined;
     this.localizedValue = undefined;
   }
   disabledWatcher() {
@@ -343,6 +344,9 @@ const InputNumber = class {
   minWatcher() {
     this.minString = this.min?.toString() || null;
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   valueWatcher(newValue, previousValue) {
     if (!this.userChangedValue) {
       this.setNumberValue({
@@ -365,6 +369,7 @@ const InputNumber = class {
     return this.clearable && this.value.length > 0;
   }
   effectiveLocaleWatcher(locale$1) {
+    t9n.updateMessages(this, this.effectiveLocale);
     locale.numberStringFormatter.numberFormatOptions = {
       locale: locale$1,
       numberingSystem: this.numberingSystem,
@@ -378,6 +383,7 @@ const InputNumber = class {
   //--------------------------------------------------------------------------
   connectedCallback() {
     locale.connectLocalized(this);
+    t9n.connectMessages(this);
     this.scale = dom.getElementProp(this.el, "scale", this.scale);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
     if (this.inlineEditableEl) {
@@ -403,14 +409,16 @@ const InputNumber = class {
     label.disconnectLabel(this);
     form.disconnectForm(this);
     locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
     this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     loadable.setUpLoadableComponent(this);
     this.maxString = this.max?.toString();
     this.minString = this.min?.toString();
     this.requestedIcon = dom.setRequestedIcon({}, this.icon, "number");
+    await t9n.setUpMessages(this);
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (property === "value" && newValue && !locale.isValidNumber(newValue)) {
@@ -493,8 +501,8 @@ const InputNumber = class {
   // --------------------------------------------------------------------------
   render() {
     const dir = dom.getElementDir(this.el);
-    const loader = (index.h("div", { class: CSS.loader }, index.h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (index.h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: "s" })));
+    const loader = (index.h("div", { class: CSS.loader }, index.h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (index.h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (index.h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (index.h("button", { "aria-hidden": "true", class: {
@@ -515,11 +523,15 @@ const InputNumber = class {
       ? numberButtonsHorizontalUp
       : null, index.h(form.HiddenFormInputSlot, { component: this }))));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "disabled": ["disabledWatcher"],
     "max": ["maxWatcher"],
     "min": ["minWatcher"],
+    "intlClear": ["onMessagesChange"],
+    "intlLoading": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
     "value": ["valueWatcher"],
     "icon": ["updateRequestedIcon"],
     "effectiveLocale": ["effectiveLocaleWatcher"]

package/dist/cjs/calcite-input-text.cjs.entry.js

@@ -1,21 +1,24 @@
 /*!
  * 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 label = require('./label-e02d1b7a.js');
-const form = require('./form-f1f6fa64.js');
-const resources = require('./resources-7df48fc6.js');
-const observers = require('./observers-9524d251.js');
-const interactive = require('./interactive-e0095568.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const label = require('./label-70bbf976.js');
+const form = require('./form-b8acc674.js');
+const resources = require('./resources-c39f2198.js');
+const observers = require('./observers-4b68f005.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const locale = require('./locale-8b87a2fe.js');
+const t9n = require('./t9n-3cb110cf.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./guid-92d3ff00.js');
+require('./key-b75091ee.js');
 
 const CSS = {
   loader: "loader",
@@ -33,9 +36,6 @@ const CSS = {
 const SLOTS = {
   action: "action"
 };
-const TEXT = {
-  clear: "Clear value"
-};
 
 const inputTextCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;border-radius:0px;background-color:var(--calcite-ui-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1)}:host input{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);color:var(--calcite-ui-text-1)}:host input::placeholder,:host input:-ms-input-placeholder,:host input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}:host input:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}:host input[readonly]{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium)}:host input[readonly]:focus{color:var(--calcite-ui-text-1)}:host calcite-icon{color:var(--calcite-ui-text-3)}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([status=invalid]) input{border-color:var(--calcite-ui-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:-2px}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:1;display:block;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-ui-foreground-2);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-ui-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-ui-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.clear-button:disabled{opacity:var(--calcite-ui-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-ui-text-2)}.prefix{order:2;border-inline-end-width:0px}.suffix{order:5;border-inline-start-width:0px}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-ui-border-1)}.inline-child{background-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.inline-child .editing-enabled{background-color:inherit}.inline-child:not(.editing-enabled){display:flex;cursor:pointer;border-color:transparent;padding-inline-start:0}::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}";
 
@@ -168,7 +168,7 @@ const InputText = class {
     this.hidden = false;
     this.icon = undefined;
     this.intlClear = undefined;
-    this.intlLoading = resources.TEXT.loading;
+    this.intlLoading = undefined;
     this.iconFlipRtl = false;
     this.label = undefined;
     this.loading = false;
@@ -188,10 +188,17 @@ const InputText = class {
     this.suffixText = undefined;
     this.editingEnabled = false;
     this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   disabledWatcher() {
     this.setDisabledAction();
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   valueWatcher(newValue, previousValue) {
     if (!this.userChangedValue) {
       this.setValue({
@@ -208,12 +215,17 @@ const InputText = class {
   get isClearable() {
     return this.clearable && this.value.length > 0;
   }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
     this.scale = dom.getElementProp(this.el, "scale", this.scale);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
     if (this.inlineEditableEl) {
@@ -230,12 +242,15 @@ const InputText = class {
   disconnectedCallback() {
     label.disconnectLabel(this);
     form.disconnectForm(this);
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
     this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     loadable.setUpLoadableComponent(this);
     this.requestedIcon = dom.setRequestedIcon({}, this.icon, "text");
+    await t9n.setUpMessages(this);
   }
   componentDidLoad() {
     loadable.setComponentLoaded(this);
@@ -290,8 +305,8 @@ const InputText = class {
   // --------------------------------------------------------------------------
   render() {
     const dir = dom.getElementDir(this.el);
-    const loader = (index.h("div", { class: CSS.loader }, index.h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (index.h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: "s" })));
+    const loader = (index.h("div", { class: CSS.loader }, index.h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (index.h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (index.h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const prefixText = index.h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = index.h("div", { class: CSS.suffix }, this.suffixText);
@@ -301,11 +316,16 @@ const InputText = class {
       }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
     return (index.h(index.Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h("div", { class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, index.h("div", { class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { class: CSS.actionWrapper }, index.h("slot", { name: SLOTS.action })), this.suffixText ? suffixText : null, index.h(form.HiddenFormInputSlot, { component: this }))));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "disabled": ["disabledWatcher"],
+    "intlClear": ["onMessagesChange"],
+    "intlLoading": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
     "value": ["valueWatcher"],
-    "icon": ["updateRequestedIcon"]
+    "icon": ["updateRequestedIcon"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
 InputText.style = inputTextCss;