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

package/dist/types/components/chip/chip.d.ts

@@ -2,12 +2,15 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ChipColor } from "./interfaces";
 import { Appearance, DeprecatedEventPayload, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { Messages } from "./assets/chip/t9n";
+import { T9nComponent } from "../../utils/t9n";
+import { LocalizedComponent } from "../../utils/locale";
 import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
  */
-export declare class Chip implements ConditionalSlotComponent, LoadableComponent {
+export declare class Chip implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /** Specifies the appearance style of the component. */
   appearance: Extract<"solid" | "transparent", Appearance>;
   /** Specifies the color for the component. */
@@ -18,8 +21,9 @@ export declare class Chip implements ConditionalSlotComponent, LoadableComponent
    * Accessible name for the component's close button.
    *
    * @default "Close"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  dismissLabel: string;
+  dismissLabel?: string;
   /** Specifies an icon to display. */
   icon: string;
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
@@ -30,11 +34,25 @@ export declare class Chip implements ConditionalSlotComponent, LoadableComponent
   value: any;
   /** When `true`, hides the component. */
   closed: boolean;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<Messages>;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: Messages;
+  onMessagesChange(): void;
   el: HTMLCalciteChipElement;
+  defaultMessages: Messages;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
   connectedCallback(): void;
-  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /**
@@ -46,6 +64,7 @@ export declare class Chip implements ConditionalSlotComponent, LoadableComponent
   closeClickHandler: (event: MouseEvent) => void;
   private closeButton;
   private guid;
+  getExtraMessageOverrides(): Partial<Messages>;
   renderChipImage(): VNode;
   render(): VNode;
 }

package/dist/types/components/chip/resources.d.ts

@@ -5,9 +5,6 @@ export declare const CSS: {
   chipIcon: string;
   closeIcon: string;
 };
-export declare const TEXT: {
-  close: string;
-};
 export declare const SLOTS: {
   image: string;
 };

package/dist/types/components/color-picker/color-picker.d.ts

@@ -4,9 +4,12 @@ import { ColorAppearance, ColorMode, ColorValue, InternalColor } from "./interfa
 import { Scale } from "../interfaces";
 import { Format } from "./utils";
 import { InteractiveComponent } from "../../utils/interactive";
+import { Messages } from "./assets/color-picker/t9n";
+import { T9nComponent } from "../../utils/t9n";
+import { LocalizedComponent } from "../../utils/locale";
 import { NumberingSystem } from "../../utils/locale";
 import { LoadableComponent } from "../../utils/loadable";
-export declare class ColorPicker implements InteractiveComponent, LoadableComponent {
+export declare class ColorPicker implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   el: HTMLCalciteColorPickerElement;
   /**
    * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
@@ -49,115 +52,116 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   /**
    * Accessible name for the RGB section's blue channel.
    *
-   * @default "B"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlB: string;
   /**
    * Accessible name for the RGB section's blue channel description.
    *
-   * @default "Blue"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlBlue: string;
   /**
    * Accessible name for the delete color button.
    *
-   * @default "Delete color"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlDeleteColor: string;
   /**
    * Accessible name for the RGB section's green channel.
    *
    * @default "G"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlG: string;
   /**
    * Accessible name for the RGB section's green channel description.
    *
-   * @default "Green"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlGreen: string;
   /**
    * Accessible name for the HSV section's hue channel.
    *
-   * @default "H"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlH: string;
   /**
    * Accessible name for the HSV mode.
    *
-   * @default "HSV"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlHsv: string;
   /**
    * Accessible name for the Hex input.
    *
-   * @default "Hex"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlHex: string;
   /**
    * Accessible name for the HSV section's hue channel description.
    *
-   * @default "Hue"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlHue: string;
   /**
    * Accessible name for the Hex input when there is no color selected.
    *
-   * @default "No color"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlNoColor: string;
   /**
    * Accessible name for the RGB section's red channel.
    *
-   * @default "R"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlR: string;
   /**
    * Accessible name for the RGB section's red channel description.
    *
-   * @default "Red"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlRed: string;
   /**
    * Accessible name for the RGB mode.
    *
-   * @default "RGB"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlRgb: string;
   /**
    * Accessible name for the HSV section's saturation channel.
    *
-   * @default "S"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlS: string;
   /**
    * Accessible name for the HSV section's saturation channel description.
    *
-   * @default "Saturation"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlSaturation: string;
   /**
    * Accessible name for the save color button.
    *
-   * @default "Save color"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlSaveColor: string;
   /**
    * Accessible name for the saved colors section.
    *
-   * @default "Saved"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlSaved: string;
   /**
    * Accessible name for the HSV section's value channel.
    *
-   * @default "V"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlV: string;
   /**
    * Accessible name for the HSV section's value channel description.
    *
-   * @default "Value"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlValue: string;
   /** Specifies the size of the component. */
@@ -165,6 +169,11 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   handleScaleChange(scale?: Scale): void;
   /** Specifies the storage ID for colors. */
   storageId: string;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<Messages>;
+  onMessagesChange(): void;
   /** Specifies the Unicode numeral system used by the component for localization. */
   numberingSystem: NumberingSystem;
   /**
@@ -190,15 +199,11 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   private mode;
   private shiftKeyChannelAdjustment;
   private sliderThumbState;
+  defaultMessages: Messages;
   colorFieldAndSliderInteractive: boolean;
   channelMode: ColorMode;
   channels: [number, number, number];
   dimensions: {
-    /**
-     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
-     *
-     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
-     */
     slider: {
       height: number;
       width: number;
@@ -206,15 +211,19 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
     colorField: {
       height: number;
       width: number;
-    }; /**
-     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
-     *
-     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
-     */
+    };
     thumb: {
       radius: number;
     };
   };
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: Messages;
   savedColors: string[];
   colorFieldScopeTop: number;
   colorFieldScopeLeft: number;
@@ -247,7 +256,8 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   private handleColorFieldAndSliderPointerEnterOrMove;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  componentWillLoad(): void;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

package/dist/types/components/combobox/combobox.d.ts

@@ -6,6 +6,8 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
+import { T9nComponent } from "../../utils/t9n";
+import { Messages } from "./assets/combobox/t9n";
 import { LoadableComponent } from "../../utils/loadable";
 interface ItemData {
   label: string;
@@ -14,7 +16,7 @@ interface ItemData {
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
-export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, LoadableComponent {
+export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, T9nComponent, LoadableComponent {
   el: HTMLCalciteComboboxElement;
   /**When `true`, displays and positions the component. */
   open: boolean;
@@ -67,12 +69,24 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.
    *
    * @default "Remove tag"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
    */
   intlRemoveTag: string;
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
   flipPlacements: EffectivePlacement[];
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: Messages;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<Messages>;
+  onMessagesChange(): void;
   flipPlacementsHandler(): void;
   /**
    * Specifies the component's selected items.
@@ -116,7 +130,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   /** Fires when the component is open and animation is complete. */
   calciteComboboxOpen: EventEmitter<void>;
   connectedCallback(): void;
-  componentWillLoad(): void;
+  componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
@@ -135,6 +149,9 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   text: string;
   /** when search text is cleared, reset active to  */
   textHandler(): void;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: Messages;
   textInput: HTMLInputElement;
   data: ItemData[];
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;

package/dist/types/components/combobox/resources.d.ts

@@ -1,9 +1,6 @@
 export declare const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export declare const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export declare const ComboboxChildSelector: string;
-export declare const TEXT: {
-  removeTag: string;
-};
 export declare const CSS: {
   labelActive: string;
   labelSelected: string;

package/dist/types/components/date-picker/date-picker.d.ts

@@ -1,7 +1,9 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
+import { Messages } from "./assets/date-picker/t9n";
+import { T9nComponent } from "../../utils/t9n";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
-export declare class DatePicker implements LocalizedComponent {
+export declare class DatePicker implements LocalizedComponent, T9nComponent {
   el: HTMLCalciteDatePickerElement;
   /** Specifies the component's active date. */
   activeDate: Date;
@@ -48,20 +50,23 @@ export declare class DatePicker implements LocalizedComponent {
    * Accessible name for the component's previous month button.
    *
    * @default "Previous month"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  intlPrevMonth: string;
+  intlPrevMonth?: string;
   /**
    * Accessible name for the component's next month button.
    *
    * @default "Next month"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  intlNextMonth: string;
+  intlNextMonth?: string;
   /**
    * Accessible name for the component's year input.
    *
    * @default "Year"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  intlYear: string;
+  intlYear?: string;
   /**
    * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
    *
@@ -73,6 +78,17 @@ export declare class DatePicker implements LocalizedComponent {
   range: boolean;
   /** When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. */
   proximitySelectionDisabled: boolean;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<Messages>;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: Messages;
+  onMessagesChange(): void;
   /**
    * Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.
    */
@@ -91,12 +107,13 @@ export declare class DatePicker implements LocalizedComponent {
    * Active end date.
    */
   activeEndDate: Date;
-  globalAttributes: {};
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): Promise<void>;
   render(): VNode;
   effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: Messages;
   private localeData;
   private hoverRange;
   private mostRecentRangeValue?;

package/dist/types/components/date-picker/resources.d.ts

@@ -1,5 +1 @@
-export declare const TEXT: {
-  nextMonth: string;
-  prevMonth: string;
-  year: string;
-};
+export declare const HEADING_LEVEL = 2;

package/dist/types/components/date-picker-month-header/date-picker-month-header.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { DateLocaleData } from "../date-picker/utils";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/Heading";
+import { Messages } from "../date-picker/assets/date-picker/t9n";
 export declare class DatePickerMonthHeader {
   el: HTMLCalciteDatePickerMonthHeaderElement;
   /** Already selected date. */
@@ -16,16 +17,18 @@ export declare class DatePickerMonthHeader {
   min: Date;
   /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
   max: Date;
-  /** Accessible name for the component's previous month button. */
-  intlPrevMonth: string;
-  /** Accessible name for the component's next month button. */
-  intlNextMonth: string;
-  /** Accessible name for the component's year input. */
-  intlYear: string;
   /** Specifies the size of the component. */
   scale: Scale;
   /** CLDR locale data for translated calendar info */
   localeData: DateLocaleData;
+  /**
+   * This property specifies accessible strings for the component's previous month button ,next month button & year input elements.
+   * Made into a prop for testing purposes only.
+   *
+   * @internal
+   * @readonly
+   */
+  messages: Messages;
   /**
    *  Changes to active date
    */

package/dist/types/components/filter/filter.d.ts

@@ -1,8 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LocalizedComponent } from "../../utils/locale";
+import { T9nComponent } from "../../utils/t9n";
+import { Messages } from "./assets/filter/t9n";
 import { LoadableComponent } from "../../utils/loadable";
-export declare class Filter implements InteractiveComponent, LoadableComponent {
+export declare class Filter implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /**
    * Defines the items to filter. The component uses the values as the starting point, and returns items
    *
@@ -24,11 +27,15 @@ export declare class Filter implements InteractiveComponent, LoadableComponent {
    */
   filteredItems: object[];
   /**
-   * Accessible name for the component's clear button.
+   * A text label that will appear on the clear button.
+   *
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
    */
   intlClear: string;
   /**
    * Accessible name for the component.
+   *
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
    */
   intlLabel: string;
   /**
@@ -43,16 +50,32 @@ export declare class Filter implements InteractiveComponent, LoadableComponent {
    * The component's value.
    */
   value: string;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: Messages;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<Messages>;
+  onMessagesChange(): void;
   valueHandler(value: string): void;
   el: HTMLCalciteFilterElement;
   textInput: HTMLCalciteInputElement;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentDidRender(): void;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: Messages;
   /**
-   * Fires when the component's text changes.
+   * This event fires when the filter text changes.
    */
   calciteFilterChange: EventEmitter<void>;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private filter;

package/dist/types/components/filter/resources.d.ts

@@ -2,10 +2,6 @@ export declare const CSS: {
   container: string;
   searchIcon: string;
 };
-export declare const TEXT: {
-  filterLabel: string;
-  clear: string;
-};
 export declare const ICONS: {
   search: string;
   close: string;

package/dist/types/components/flow-item/flow-item.d.ts

@@ -2,6 +2,9 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LocalizedComponent } from "../../utils/locale";
+import { T9nComponent } from "../../utils/t9n";
+import { Messages } from "./assets/flow-item/t9n";
 import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding custom content.
@@ -13,7 +16,7 @@ import { LoadableComponent } from "../../utils/loadable";
  * @slot footer-actions - A slot for adding `calcite-button`s to the component's footer.
  * @slot footer - A slot for adding custom content to the component's footer.
  */
-export declare class FlowItem implements InteractiveComponent, LoadableComponent {
+export declare class FlowItem implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /** When `true`, displays a close button in the trailing side of the component's header. */
   closable: boolean;
   /** When `true`, the component will be hidden. */
@@ -42,6 +45,8 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   heightScale: Scale;
   /**
    * When `showBackButton` is `true`, the accessible name for the component's back button.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   intlBack: string;
   /**
@@ -50,6 +55,8 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   intlClose: string;
   /**
    * Accessible name for the component's actions menu.
+   *
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   intlOptions: string;
   /**
@@ -61,6 +68,18 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
    */
   menuOpen: boolean;
   /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<Messages>;
+  onMessagesChange(): void;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: Messages;
+  /**
+   * When true, displays a back button in the header.
    * When `true`, displays a back button in the component's header.
    */
   showBackButton: boolean;
@@ -68,8 +87,10 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
    * Specifies the width of the component.
    */
   widthScale: Scale;
-  componentWillLoad(): void;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
   componentDidRender(): void;
+  disconnectedCallback(): void;
   componentDidLoad(): void;
   /**
    * Fires when the back button is clicked.
@@ -86,6 +107,9 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   el: HTMLCalciteFlowItemElement;
   containerEl: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;
+  defaultMessages: Messages;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
   /**
    * Sets focus on the component.
    */
@@ -107,7 +131,6 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   backButtonClick: () => void;
   setBackRef: (node: HTMLCalciteActionElement) => void;
   setContainerRef: (node: HTMLCalcitePanelElement) => void;
-  getBackLabel: () => string;
   renderBackButton(): VNode;
   render(): VNode;
 }

package/dist/types/components/flow-item/resources.d.ts

@@ -5,9 +5,6 @@ export declare const ICONS: {
   backLeft: string;
   backRight: string;
 };
-export declare const TEXT: {
-  back: string;
-};
 export declare const SLOTS: {
   headerActionsStart: string;
   headerActionsEnd: string;