@esri/calcite-components 1.0.0-next.317 → 1.0.0-next.320

package/dist/types/components/calcite-action-bar/calcite-action-bar.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="lodash" />
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Position, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar.
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
  * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
  */
-export declare class CalciteActionBar {
+export declare class CalciteActionBar implements ConditionalSlotComponent {
   /**
    * When set to true, the expand-toggling behavior will be disabled.
    */

package/dist/types/components/calcite-input-time-picker/calcite-input-time-picker.d.ts

@@ -1,5 +1,4 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
-import { HourDisplayFormat } from "../../utils/time";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
@@ -9,8 +8,6 @@ export declare class CalciteInputTimePicker implements LabelableComponent, FormC
   active: boolean;
   /** The disabled state of the time input */
   disabled: boolean;
-  /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-  hourDisplayFormat: HourDisplayFormat;
   /** aria-label for the hour input */
   intlHour?: string;
   /** aria-label for the hour down button */
@@ -35,6 +32,12 @@ export declare class CalciteInputTimePicker implements LabelableComponent, FormC
   intlSecondDown?: string;
   /** aria-label for the second up button */
   intlSecondUp?: string;
+  /**
+   * BCP 47 language tag for desired language and country format
+   * @internal
+   */
+  locale: string;
+  localeWatcher(newLocale: string): void;
   /** The name of the time input */
   name: string;
   /**
@@ -54,10 +57,12 @@ export declare class CalciteInputTimePicker implements LabelableComponent, FormC
   formEl: HTMLFormElement;
   defaultValue: CalciteInputTimePicker["value"];
   private calciteInputEl;
+  private calciteTimePickerEl;
   /** whether the value of the input was changed as a result of user typing or not */
   private internalValueChange;
   private previousValidValue;
   private referenceElementId;
+  localizedValue: string;
   /**
    * Fires when the time value is changed as a result of user input.
    */
@@ -65,14 +70,17 @@ export declare class CalciteInputTimePicker implements LabelableComponent, FormC
   private calciteInputBlurHandler;
   private calciteInputFocusHandler;
   private calciteInputInputHandler;
+  clickHandler(event: MouseEvent): void;
   keyUpHandler(event: KeyboardEvent): void;
   timePickerBlurHandler(event: CustomEvent): void;
-  timePickerChangeHandler(event: CustomEvent): void;
+  private timePickerChangeHandler;
   timePickerFocusHandler(event: CustomEvent): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   onLabelClick(): void;
+  private shouldIncludeSeconds;
   private setCalciteInputEl;
+  private setCalciteTimePickerEl;
   private setInputValue;
   private setValue;
   connectedCallback(): void;

package/dist/types/components/calcite-panel/calcite-panel.d.ts

@@ -92,7 +92,7 @@ export declare class CalcitePanel {
   setContainerRef: (node: HTMLElement) => void;
   setDismissRef: (node: HTMLCalciteActionElement) => void;
   setBackRef: (node: HTMLCalciteActionElement) => void;
-  panelKeyUpHandler: (event: KeyboardEvent) => void;
+  panelKeyDownHandler: (event: KeyboardEvent) => void;
   dismiss: () => void;
   panelScrollHandler: () => void;
   backButtonClick: () => void;

package/dist/types/components/calcite-time-picker/calcite-time-picker.d.ts

@@ -1,12 +1,8 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-import { Meridiem, Time, TimeFocusId, HourDisplayFormat } from "../../utils/time";
+import { TimePart, HourCycle, Meridiem } from "../../utils/time";
 export declare class CalciteTimePicker {
   el: HTMLCalciteTimePickerElement;
-  /** The hour value (24-hour format) */
-  hour?: string;
-  /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-  hourDisplayFormat: HourDisplayFormat;
   /** aria-label for the hour input
    * @default "Hour"
    */
@@ -55,51 +51,62 @@ export declare class CalciteTimePicker {
    * @default "Increase second"
    */
   intlSecondUp: string;
-  /** The minute value */
-  minute?: string;
-  /** The second value */
-  second?: string;
+  /**
+   * BCP 47 language tag for desired language and country format
+   * @internal
+   */
+  locale: string;
+  localeWatcher(newLocale: string): void;
   /** The scale (size) of the time picker */
   scale: Scale;
   /** number that specifies the granularity that the value must adhere to */
   step: number;
-  hourChanged(newHour: string): void;
-  timeChangeHandler(): void;
+  /** The selected time in UTC */
+  value: string;
+  valueWatcher(newValue: string): void;
   private activeEl;
-  private meridiemEl;
   private hourEl;
+  private meridiemEl;
   private minuteEl;
   private secondEl;
-  private timeChanged;
-  /** The am/pm value */
+  hour: string;
+  hourChanged(newHour: string): void;
+  hourCycle: HourCycle;
+  localizedHour: string;
+  localizedHourSuffix: string;
+  localizedMeridiem: string;
+  localizedMinute: string;
+  localizedMinuteSuffix: string;
+  localizedSecond: string;
+  localizedSecondSuffix: string;
   meridiem: Meridiem;
-  displayHour: string;
+  minute: string;
+  second: string;
+  showSecond: boolean;
   /**
    * @internal
    */
-  calciteTimePickerBlur: EventEmitter<Time>;
+  calciteTimePickerBlur: EventEmitter<void>;
   /**
    * @internal
    */
-  calciteTimePickerChange: EventEmitter<Time>;
+  calciteTimePickerChange: EventEmitter<string>;
   /**
    * @internal
    */
-  calciteTimePickerFocus: EventEmitter<Time>;
+  calciteTimePickerFocus: EventEmitter<void>;
   hostBlurHandler(): void;
   hostFocusHandler(): void;
   keyDownHandler(event: KeyboardEvent): void;
   /** Sets focus on the component. */
-  setFocus(target: TimeFocusId): Promise<void>;
+  setFocus(target: TimePart): Promise<void>;
+  private buttonActivated;
   private decrementHour;
   private decrementMeridiem;
   private decrementMinuteOrSecond;
   private decrementMinute;
   private decrementSecond;
-  private buttonActivated;
   private focusHandler;
-  private getDisplayHour;
-  private getTime;
   private hourDownButtonKeyDownHandler;
   private hourKeyDownHandler;
   private hourUpButtonKeyDownHandler;
@@ -117,7 +124,12 @@ export declare class CalciteTimePicker {
   private secondDownButtonKeyDownHandler;
   private secondKeyDownHandler;
   private secondUpButtonKeyDownHandler;
-  private setTime;
+  private setHourEl;
+  private setMeridiemEl;
+  private setMinuteEl;
+  private setSecondEl;
+  private setValue;
+  private setValuePart;
   connectedCallback(): void;
   render(): VNode;
 }

package/dist/types/components/calcite-time-picker/resources.d.ts

@@ -1,24 +1,30 @@
 export declare const CSS: {
+  button: string;
   buttonBottomLeft: string;
   buttonBottomRight: string;
-  button: string;
-  delimiter: string;
-  hour: string;
   buttonHourDown: string;
   buttonHourUp: string;
-  input: string;
-  meridiem: string;
   buttonMeridiemDown: string;
   buttonMeridiemUp: string;
-  minute: string;
   buttonMinuteDown: string;
   buttonMinuteUp: string;
-  second: string;
   buttonSecondDown: string;
   buttonSecondUp: string;
-  timePicker: string;
   buttonTopLeft: string;
   buttonTopRight: string;
+  column: string;
+  delimiter: string;
+  hour: string;
+  input: string;
+  meridiem: string;
+  minute: string;
+  second: string;
+  showMeridiem: string;
+  showSecond: string;
+  "scale-s": string;
+  "scale-m": string;
+  "scale-l": string;
+  timePicker: string;
 };
 export declare const TEXT: {
   hour: string;

package/dist/types/components.d.ts

@@ -24,7 +24,6 @@ import { DropdownPlacement, ItemKeyboardEvent } from "./components/calcite-dropd
 import { SelectionMode } from "./components/calcite-dropdown-group/interfaces";
 import { ColorStop, DataSeries } from "./components/calcite-graph/interfaces";
 import { InputPlacement } from "./components/calcite-input/interfaces";
-import { HourDisplayFormat, Time, TimeFocusId } from "./utils/time";
 import { ModalBackgroundColor } from "./components/calcite-modal/interfaces";
 import { CalcitePaginationDetail } from "./components/calcite-pagination/calcite-pagination";
 import { ListFocusId } from "./components/calcite-pick-list/shared-list-logic";
@@ -34,6 +33,7 @@ import { TabID, TabLayout, TabPosition } from "./components/calcite-tabs/interfa
 import { TabChangeEventDetail } from "./components/calcite-tab/interfaces";
 import { TileSelectType } from "./components/calcite-tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/calcite-tile-select-group/interfaces";
+import { TimePart } from "./utils/time";
 import { TreeSelectDetail, TreeSelectionMode } from "./components/calcite-tree/interfaces";
 import { TreeItemSelectDetail } from "./components/calcite-tree-item/interfaces";
 export namespace Components {
@@ -1698,10 +1698,6 @@ export namespace Components {
           * The disabled state of the time input
          */
         "disabled": boolean;
-        /**
-          * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)
-         */
-        "hourDisplayFormat": HourDisplayFormat;
         /**
           * aria-label for the hour input
          */
@@ -1750,6 +1746,10 @@ export namespace Components {
           * aria-label for the second up button
          */
         "intlSecondUp"?: string;
+        /**
+          * BCP 47 language tag for desired language and country format
+         */
+        "locale": string;
         /**
           * The name of the time input
          */
@@ -3151,14 +3151,6 @@ export namespace Components {
         "layout"?: TileSelectGroupLayout;
     }
     interface CalciteTimePicker {
-        /**
-          * The hour value (24-hour format)
-         */
-        "hour"?: string;
-        /**
-          * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)
-         */
-        "hourDisplayFormat": HourDisplayFormat;
         /**
           * aria-label for the hour input
           * @default "Hour"
@@ -3220,25 +3212,25 @@ export namespace Components {
          */
         "intlSecondUp": string;
         /**
-          * The minute value
+          * BCP 47 language tag for desired language and country format
          */
-        "minute"?: string;
+        "locale": string;
         /**
           * The scale (size) of the time picker
          */
         "scale": Scale;
-        /**
-          * The second value
-         */
-        "second"?: string;
         /**
           * Sets focus on the component.
          */
-        "setFocus": (target: TimeFocusId) => Promise<void>;
+        "setFocus": (target: TimePart) => Promise<void>;
         /**
           * number that specifies the granularity that the value must adhere to
          */
         "step": number;
+        /**
+          * The selected time in UTC
+         */
+        "value": string;
     }
     interface CalciteTip {
         /**
@@ -5409,7 +5401,7 @@ declare namespace LocalJSX {
         /**
           * The items to filter through. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search.  This property is required.
          */
-        "items"?: object[];
+        "items": object[];
         /**
           * This event fires when the filter text changes.
          */
@@ -5808,10 +5800,6 @@ declare namespace LocalJSX {
           * The disabled state of the time input
          */
         "disabled"?: boolean;
-        /**
-          * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)
-         */
-        "hourDisplayFormat"?: HourDisplayFormat;
         /**
           * aria-label for the hour input
          */
@@ -7201,14 +7189,6 @@ declare namespace LocalJSX {
         "layout"?: TileSelectGroupLayout;
     }
     interface CalciteTimePicker {
-        /**
-          * The hour value (24-hour format)
-         */
-        "hour"?: string;
-        /**
-          * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)
-         */
-        "hourDisplayFormat"?: HourDisplayFormat;
         /**
           * aria-label for the hour input
           * @default "Hour"
@@ -7269,22 +7249,18 @@ declare namespace LocalJSX {
           * @default "Increase second"
          */
         "intlSecondUp"?: string;
-        /**
-          * The minute value
-         */
-        "minute"?: string;
         /**
           * The scale (size) of the time picker
          */
         "scale"?: Scale;
-        /**
-          * The second value
-         */
-        "second"?: string;
         /**
           * number that specifies the granularity that the value must adhere to
          */
         "step"?: number;
+        /**
+          * The selected time in UTC
+         */
+        "value"?: string;
     }
     interface CalciteTip {
         /**

package/dist/types/utils/conditionalSlot.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Defines interface for components with a dynamically changing slot.
+ */
+export interface ConditionalSlotComponent {
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+}
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ */
+export declare function connectConditionalSlotComponent(component: ConditionalSlotComponent): void;
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ */
+export declare function disconnectConditionalSlotComponent(component: ConditionalSlotComponent): void;

package/dist/types/utils/time.d.ts

@@ -1,4 +1,13 @@
-export declare type HourDisplayFormat = "12" | "24";
+export declare type HourCycle = "12" | "24";
+export interface LocalizedTime {
+  localizedHour: string;
+  localizedHourSuffix: string;
+  localizedMinute: string;
+  localizedMinuteSuffix: string;
+  localizedSecond: string;
+  localizedSecondSuffix: string;
+  localizedMeridiem: string;
+}
 export declare type Meridiem = "AM" | "PM";
 export declare type MinuteOrSecond = "minute" | "second";
 export interface Time {
@@ -6,10 +15,14 @@ export interface Time {
   minute: string;
   second: string;
 }
-export declare type TimeFocusId = "hour" | MinuteOrSecond | "meridiem";
+export declare type TimePart = "hour" | "hourSuffix" | "minute" | "minuteSuffix" | "second" | "secondSuffix" | "meridiem";
 export declare const maxTenthForMinuteAndSecond = 5;
+export declare function formatTimePart(number: number): string;
+export declare function formatTimeString(value: string): string;
+export declare function getLocaleHourCycle(locale: string): HourCycle;
 export declare function getMeridiem(hour: string): Meridiem;
-export declare function getMeridiemHour(hour: string): string;
+export declare function isValidTime(value: string): boolean;
+export declare function localizeTimePart(value: string, part: TimePart, locale: string): string;
+export declare function localizeTimeString(value: string, locale?: string, includeSeconds?: boolean): string;
+export declare function localizeTimeStringToParts(value: string, locale?: string): LocalizedTime;
 export declare function parseTimeString(value: string): Time;
-export declare function formatTimeString(value: string): string;
-export declare function formatTimePart(number: number): string;