@esri/calcite-components 1.1.1-next.2 → 1.2.0

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.1-next.2
+ * v1.2.0
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.1-next.2
+ * v1.2.0
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.1-next.2
+ * v1.2.0
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.1-next.2
+ * v1.2.0
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/action-group/action-group.d.ts

@@ -1,6 +1,7 @@
 import { VNode } from "../../stencil-public-runtime";
 import { CalciteActionMenuCustomEvent } from "../../components";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { Columns, Layout, Scale } from "../interfaces";
@@ -10,7 +11,7 @@ import { ActionGroupMessages } from "./assets/action-group/t9n";
  * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
  */
-export declare class ActionGroup implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
+export declare class ActionGroup implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /**
    * When `true`, the component is expanded.
    */
@@ -47,9 +48,12 @@ export declare class ActionGroup implements ConditionalSlotComponent, LocalizedC
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   defaultMessages: ActionGroupMessages;
+  /** Sets focus on the component's first focusable element. */
+  setFocus(): Promise<void>;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
   renderTooltip(): VNode;
   renderMenu(): VNode;
   render(): VNode;

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

@@ -23,6 +23,12 @@ export declare class Button implements LabelableComponent, InteractiveComponent,
   kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
   /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
    */

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

@@ -10,6 +10,12 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompon
   checked: boolean;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
   guid: string;
   /**

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

@@ -24,6 +24,12 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /** Accessible name for the component. */
   label: string;
   /** Specifies the placeholder text for the input. */

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

@@ -1,9 +1,10 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { HeadingLevel } from "../functional/Heading";
 import { DatePickerMessages } from "./assets/date-picker/t9n";
-export declare class DatePicker implements LocalizedComponent, T9nComponent {
+export declare class DatePicker implements LocalizedComponent, LoadableComponent, T9nComponent {
   el: HTMLCalciteDatePickerElement;
   /** Specifies the component's active date. */
   activeDate: Date;
@@ -73,9 +74,12 @@ export declare class DatePicker implements LocalizedComponent, T9nComponent {
   activeEndDate: Date;
   startAsDate: Date;
   endAsDate: Date;
+  /** Sets focus on the component's first focusable element. */
+  setFocus(): Promise<void>;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
   render(): VNode;
   effectiveLocale: string;
   effectiveLocaleChange(): void;

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

@@ -2,6 +2,7 @@ import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "./interfaces";
 import { EffectivePlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale } from "../interfaces";
@@ -9,7 +10,7 @@ import { Scale } from "../interfaces";
  * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot trigger - A slot for the element that triggers the `calcite-dropdown`.
  */
-export declare class Dropdown implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
+export declare class Dropdown implements InteractiveComponent, LoadableComponent, OpenCloseComponent, FloatingUIComponent {
   el: HTMLCalciteDropdownElement;
   /**
    * When `true`, displays and positions the component.
@@ -74,7 +75,10 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
    * Specifies the width of the component.
    */
   width: Scale;
+  /** Sets focus on the component's first focusable element. */
+  setFocus(): Promise<void>;
   connectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;

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

@@ -33,6 +33,12 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
    */
   disabled: boolean;
   disabledWatcher(): void;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */

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

@@ -14,6 +14,12 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
    *

package/dist/types/components/input-number/input-number.d.ts

@@ -32,6 +32,12 @@ export declare class InputNumber implements LabelableComponent, FormComponent, I
    */
   disabled: boolean;
   disabledWatcher(): void;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */

package/dist/types/components/input-text/input-text.d.ts

@@ -31,6 +31,12 @@ export declare class InputText implements LabelableComponent, FormComponent, Int
    */
   disabled: boolean;
   disabledWatcher(): void;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, the component will not be visible.
    *

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

@@ -14,6 +14,12 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   openHandler(value: boolean): void;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
    *

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

@@ -1,4 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { Scale } from "../interfaces";
@@ -8,7 +9,7 @@ export interface PaginationDetail {
   totalItems: number;
   startItem: number;
 }
-export declare class Pagination implements LocalizedComponent, LocalizedComponent, T9nComponent {
+export declare class Pagination implements LocalizedComponent, LocalizedComponent, LoadableComponent, T9nComponent {
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */
@@ -47,7 +48,10 @@ export declare class Pagination implements LocalizedComponent, LocalizedComponen
   calcitePaginationChange: EventEmitter<void>;
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
+  /** Sets focus on the component's first focusable element. */
+  setFocus(): Promise<void>;
   /** Go to the next page of results. */
   nextPage(): Promise<void>;
   /** Go to the previous page of results. */

package/dist/types/components/radio-button/radio-button.d.ts

@@ -17,6 +17,12 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
    * @internal
    */
   focused: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /** The `id` of the component. When omitted, a globally unique identifier is used. */
   guid: string;
   /** When `true`, the component is not displayed and is not focusable or checkable. */

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

@@ -15,6 +15,12 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   count: number;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * Made into a prop for testing purposes only
    *

package/dist/types/components/segmented-control/segmented-control.d.ts

@@ -13,6 +13,12 @@ export declare class SegmentedControl implements LabelableComponent, FormCompone
   appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, the component must have a value in order for the form to submit.
    *

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

@@ -12,6 +12,12 @@ export declare class Select implements LabelableComponent, FormComponent, Intera
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * Accessible name for the component.
    *

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

@@ -10,6 +10,12 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   el: HTMLCalciteSliderElement;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */

package/dist/types/components/split-button/split-button.d.ts

@@ -1,12 +1,13 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 import { DropdownIconType } from "../button/interfaces";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-dropdown` content.
  */
-export declare class SplitButton implements InteractiveComponent {
+export declare class SplitButton implements InteractiveComponent, LoadableComponent {
   el: HTMLCalciteSplitButtonElement;
   /** Specifies the appearance style of the component. */
   appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>;
@@ -61,6 +62,10 @@ export declare class SplitButton implements InteractiveComponent {
    * Fires when the dropdown menu is clicked.
    */
   calciteSplitButtonSecondaryClick: EventEmitter<void>;
+  /** Sets focus on the component's first focusable element. */
+  setFocus(): Promise<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   render(): VNode;
   private calciteSplitButtonPrimaryClickHandler;

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

@@ -8,6 +8,12 @@ export declare class Switch implements LabelableComponent, CheckableFormComponen
   el: HTMLCalciteSwitchElement;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
   /** Accessible name for the component. */
   label: string;
   /**

package/dist/types/components/text-area/assets/text-area/t9n/index.d.ts

@@ -0,0 +1,4 @@
+export type TextAreaMessages = {
+  invalid: string;
+  tooLong: string;
+};

package/dist/types/components/text-area/resources.d.ts

@@ -0,0 +1,22 @@
+export declare const CSS: {
+  characterLimit: string;
+  content: string;
+  container: string;
+  footer: string;
+  resizeDisabled: string;
+  resizeDisabledX: string;
+  resizeDisabledY: string;
+  characterOverLimit: string;
+  readOnly: string;
+  textAreaInvalid: string;
+  footerSlotted: string;
+  borderColor: string;
+  hide: string;
+  blockSizeFull: string;
+  footerEndSlotOnly: string;
+};
+export declare const SLOTS: {
+  footerStart: string;
+  footerEnd: string;
+};
+export declare const RESIZE_TIMEOUT = 100;

package/dist/types/components/text-area/text-area.d.ts

@@ -0,0 +1,160 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { FormComponent } from "../../utils/form";
+import { LabelableComponent } from "../../utils/label";
+import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
+import { LoadableComponent } from "../../utils/loadable";
+import { T9nComponent } from "../../utils/t9n";
+import { TextAreaMessages } from "./assets/text-area/t9n";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding text.
+ * @slot footer-start - A slot for adding content to the start of the component's footer.
+ * @slot footer-end - A slot for adding content to the end of the component's footer.
+ */
+export declare class TextArea implements FormComponent, LabelableComponent, LocalizedComponent, LoadableComponent, T9nComponent, InteractiveComponent {
+  el: HTMLCalciteTextAreaElement;
+  /**
+   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.
+   *
+   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+   */
+  autofocus: boolean;
+  /**
+   * Specifies the component's number of columns.
+   *
+   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)
+   */
+  columns: number;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
+   */
+  disabled: boolean;
+  /**
+   * The ID of the form that will be associated with the component.
+   *
+   * When not set, the component will be associated with its ancestor `<form>` element, if any.
+   */
+  form: string;
+  /**
+   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
+   */
+  groupSeparator: boolean;
+  /**
+   * Accessible name for the component.
+   */
+  label: string;
+  /**
+   * Specifies the maximum number of characters allowed.
+   *
+   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
+   */
+  maxLength: number;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: TextAreaMessages;
+  /**
+   * Specifies the name of the component.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
+   */
+  name: string;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   */
+  numberingSystem: NumberingSystem;
+  /**
+   * Specifies the placeholder text for the component.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)
+   */
+  placeholder: string;
+  /**
+   * When `true`, the component's `value` can be read, but cannot be modified.
+   *
+   * @readonly
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  /**
+   * When `true`, the component must have a value in order for the form to submit.
+   *
+   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+   */
+  required: boolean;
+  /** Specifies if the component is resizable. */
+  resize: "both" | "horizontal" | "vertical" | "none";
+  /**
+   * Specifies the component's number of rows.
+   *
+   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)
+   */
+  rows: number;
+  /** Specifies the size of the component. */
+  scale: "l" | "m" | "s";
+  /** The component's value. */
+  value: string;
+  /**
+   * Specifies the wrapping mechanism for the text.
+   *
+   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)
+   */
+  wrap: "soft" | "hard";
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<TextAreaMessages>;
+  onMessagesChange(): void;
+  /**
+   * Fires each time a new `value` is typed.
+   */
+  calciteTextAreaInput: EventEmitter<void>;
+  /**
+   * Fires each time a new `value` is typed and committed.
+   */
+  calciteTextAreaChange: EventEmitter<void>;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** Selects the text of the component's `value`. */
+  selectText(): Promise<void>;
+  defaultValue: TextArea["value"];
+  footerEl: HTMLElement;
+  formEl: HTMLFormElement;
+  labelEl: HTMLCalciteLabelElement;
+  textAreaEl: HTMLTextAreaElement;
+  defaultMessages: TextAreaMessages;
+  endSlotHasElements: boolean;
+  startSlotHasElements: boolean;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  onFormReset(): void;
+  onLabelClick(): void;
+  handleInput: (event: InputEvent) => void;
+  handleChange: () => void;
+  contentSlotChangeHandler: () => void;
+  renderCharacterLimit: () => VNode;
+  getLocalizedCharacterLength(): string;
+  resizeObserver: ResizeObserver;
+  syncHiddenFormInput(input: HTMLInputElement): void;
+  private setHeightAndWidthToAuto;
+  setTextAreaEl: (el: HTMLTextAreaElement) => void;
+  setTextAreaHeight(): void;
+  getHeightandWidthOfElements(): {
+    textAreaHeight: number;
+    textAreaWidth: number;
+    elHeight: number;
+    elWidth: number;
+    footerHeight: number;
+    footerWidth: number;
+  };
+}

package/dist/types/components/tile-select/tile-select.d.ts

@@ -59,9 +59,9 @@ export declare class TileSelect implements InteractiveComponent, LoadableCompone
   radioButtonChangeHandler(event: CustomEvent): void;
   radioButtonCheckedChangeHandler(event: CustomEvent): void;
   radioButtonFocusBlurHandler(event: CustomEvent): void;
-  click(event: MouseEvent): void;
-  mouseenter(): void;
-  mouseleave(): void;
+  clickHandler(event: MouseEvent): void;
+  pointerEnterHandler(): void;
+  pointerLeaveHandler(): void;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;