@esri/calcite-components 1.0.0-next.540 → 1.0.0-next.543

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.0.0-next.540
+ * v1.0.0-next.543
  */
 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.0.0-next.540
+ * v1.0.0-next.543
  */
 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.0.0-next.540
+ * v1.0.0-next.543
  */
 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.0.0-next.540
+ * v1.0.0-next.543
  */
 (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/alert/alert.d.ts

@@ -13,9 +13,16 @@ import { OpenCloseComponent } from "../../utils/openCloseComponent";
  */
 export declare class Alert implements OpenCloseComponent {
   el: HTMLCalciteAlertElement;
-  /** When true, the component is active. */
+  /**
+   * When true, opens the combobox
+   *
+   * @deprecated use open instead
+   */
   active: boolean;
-  watchActive(): void;
+  /** When true, opens the dropdown */
+  open: boolean;
+  activeHandler(value: boolean): void;
+  openHandler(value: boolean): void;
   /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
   autoDismiss: boolean;
   /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */

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

@@ -22,9 +22,10 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * @deprecated use open instead
    */
   active: boolean;
-  activeHandler(): void;
+  activeHandler(value: boolean): void;
   /**When true, opens the combobox */
   open: boolean;
+  openHandler(value: boolean): void;
   /** Disable combobox input */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;

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

@@ -16,9 +16,10 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
    * @deprecated use open instead.
    */
   active: boolean;
+  activeHandler(value: boolean): void;
   /** When true, opens the dropdown */
   open: boolean;
-  activeHandler(): void;
+  openHandler(value: boolean): void;
   /**
    allow the dropdown to remain open after a selection is made
    if the selection-mode of the selected item's containing group is "none", the dropdown will always close
@@ -86,6 +87,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   handleItemSelect(event: CustomEvent): void;
   filteredFlipPlacements: EffectivePlacement[];
   private items;
+  private groups;
   /** trigger elements */
   private triggers;
   floatingEl: HTMLDivElement;
@@ -100,6 +102,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   setFilteredPlacements: () => void;
   updateTriggers: (event: Event) => void;
   updateItems: () => void;
+  updateGroups: (event: Event) => void;
   resizeObserverCallback: (entries: ResizeObserverEntry[]) => void;
   setDropdownWidth: () => void;
   setMaxScrollerHeight: () => void;

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

@@ -0,0 +1,170 @@
+import { Scale, Status } from "../interfaces";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Position } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot action - A slot for positioning a button next to the component.
+ */
+export declare class InputText implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteInputTextElement;
+  /** Specifies the text alignment of the component's value. */
+  alignment: Position;
+  /**
+   * When true, the component is focused on page load.
+   *
+   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+   */
+  autofocus: boolean;
+  /**
+   * When true, a clear button is displayed when the component has a value.
+   */
+  clearable: boolean;
+  /**
+   * 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;
+  disabledWatcher(): void;
+  /**
+   * When true, the component will not be visible.
+   *
+   * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+   */
+  hidden: boolean;
+  /**
+   * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
+   */
+  icon: string | boolean;
+  /**
+   * A text label that will appear on the clear button for screen readers.
+   */
+  intlClear?: string;
+  /**
+   * Accessible name that will appear while loading.
+   *
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** When true, the icon is flipped in RTL. */
+  iconFlipRtl: boolean;
+  /** Accessible name for the component's button or hyperlink. */
+  label?: string;
+  /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+  loading: boolean;
+  /**
+   * Specifies the maximum length of text for the component's value.
+   *
+   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
+   */
+  maxLength?: number;
+  /**
+   * Specifies the minimum length of text for the component's value.
+   *
+   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
+   */
+  minLength?: number;
+  /**
+   * Specifies the name of the component.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+   */
+  name: string;
+  /**
+   * Specifies placeholder text for the component.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  placeholder: string;
+  /** Adds text to the start of the component. */
+  prefixText?: string;
+  /**
+   * When true, the value cannot be modified.
+   *
+   * @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. */
+  required: boolean;
+  /** Specifies the size of the component. */
+  scale: Scale;
+  /** Specifies the status of the input field, which determines message and icons. */
+  status: Status;
+  /** Adds text to the end of the component.  */
+  suffixText?: string;
+  /**
+   * @internal
+   */
+  editingEnabled: boolean;
+  /** The component's value. */
+  value: string;
+  valueWatcher(newValue: string, previousValue: string): void;
+  updateRequestedIcon(): void;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: InputText["value"];
+  inlineEditableEl: HTMLCalciteInlineEditableElement;
+  /** keep track of the rendered child */
+  private childEl?;
+  get isClearable(): boolean;
+  private previousEmittedValue;
+  private previousValue;
+  private previousValueOrigin;
+  /** the computed icon to render */
+  private requestedIcon?;
+  mutationObserver: MutationObserver;
+  private userChangedValue;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidRender(): void;
+  /**
+   * @internal
+   */
+  calciteInternalInputTextFocus: EventEmitter<{
+    element: HTMLInputElement;
+    value: string;
+  }>;
+  /**
+   * @internal
+   */
+  calciteInternalInputTextBlur: EventEmitter<{
+    element: HTMLInputElement;
+    value: string;
+  }>;
+  /**
+   * Fires each time a new value is typed.
+   */
+  calciteInputTextInput: EventEmitter<{
+    element: HTMLInputElement;
+    nativeEvent: MouseEvent | KeyboardEvent | InputEvent;
+    value: string;
+  }>;
+  /**
+   * Fires each time a new value is typed and committed.
+   */
+  calciteInputTextChange: EventEmitter<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** Selects all text of the component's `value`. */
+  selectText(): Promise<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  onLabelClick(): void;
+  private clearInputTextValue;
+  private emitChangeIfUserModified;
+  private inputTextBlurHandler;
+  private inputTextFocusHandler;
+  private inputTextInputHandler;
+  private inputTextKeyDownHandler;
+  onFormReset(): void;
+  syncHiddenFormInput(input: HTMLInputElement): void;
+  private setChildElRef;
+  private setDisabledAction;
+  private setInputValue;
+  private setPreviousEmittedValue;
+  private setPreviousValue;
+  private setValue;
+  render(): VNode;
+}

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

@@ -0,0 +1,19 @@
+export declare const CSS: {
+  loader: string;
+  clearButton: string;
+  editingEnabled: string;
+  inlineChild: string;
+  inputIcon: string;
+  prefix: string;
+  suffix: string;
+  wrapper: string;
+  inputWrapper: string;
+  actionWrapper: string;
+  resizeIconWrapper: string;
+};
+export declare const SLOTS: {
+  action: string;
+};
+export declare const TEXT: {
+  clear: string;
+};

package/dist/types/components.d.ts

@@ -294,7 +294,8 @@ export namespace Components {
     }
     interface CalciteAlert {
         /**
-          * When true, the component is active.
+          * When true, opens the combobox
+          * @deprecated use open instead
          */
         "active": boolean;
         /**
@@ -322,6 +323,10 @@ export namespace Components {
           * Specifies an accessible name for the component.
          */
         "label": string;
+        /**
+          * When true, opens the dropdown
+         */
+        "open": boolean;
         /**
           * Specifies the placement of the component
          */
@@ -1980,6 +1985,114 @@ export namespace Components {
          */
         "value": string;
     }
+    interface CalciteInputText {
+        /**
+          * Specifies the text alignment of the component's value.
+         */
+        "alignment": Position;
+        /**
+          * When true, the component is focused on page load.
+          * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+         */
+        "autofocus": boolean;
+        /**
+          * When true, a clear button is displayed when the component has a value.
+         */
+        "clearable": boolean;
+        /**
+          * 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;
+        "editingEnabled": boolean;
+        /**
+          * When true, the component will not be visible.
+          * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+         */
+        "hidden": boolean;
+        /**
+          * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
+         */
+        "icon": string | boolean;
+        /**
+          * When true, the icon is flipped in RTL.
+         */
+        "iconFlipRtl": boolean;
+        /**
+          * A text label that will appear on the clear button for screen readers.
+         */
+        "intlClear"?: string;
+        /**
+          * Accessible name that will appear while loading.
+          * @default "Loading"
+         */
+        "intlLoading"?: string;
+        /**
+          * Accessible name for the component's button or hyperlink.
+         */
+        "label"?: string;
+        /**
+          * When true, the component is in the loading state and `calcite-progress` is displayed.
+         */
+        "loading": boolean;
+        /**
+          * Specifies the maximum length of text for the component's value.
+          * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
+         */
+        "maxLength"?: number;
+        /**
+          * Specifies the minimum length of text for the component's value.
+          * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
+         */
+        "minLength"?: number;
+        /**
+          * Specifies the name of the component.
+          * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+         */
+        "name": string;
+        /**
+          * Specifies placeholder text for the component.
+          * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+         */
+        "placeholder": string;
+        /**
+          * Adds text to the start of the component.
+         */
+        "prefixText"?: string;
+        /**
+          * When true, the value cannot be modified.
+          * @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.
+         */
+        "required": boolean;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
+        /**
+          * Selects all text of the component's `value`.
+         */
+        "selectText": () => Promise<void>;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Specifies the status of the input field, which determines message and icons.
+         */
+        "status": Status;
+        /**
+          * Adds text to the end of the component.
+         */
+        "suffixText"?: string;
+        /**
+          * The component's value.
+         */
+        "value": string;
+    }
     interface CalciteInputTimePicker {
         /**
           * The active state of the time input
@@ -3996,6 +4109,10 @@ export interface CalciteInputNumberCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteInputNumberElement;
 }
+export interface CalciteInputTextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteInputTextElement;
+}
 export interface CalciteInputTimePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteInputTimePickerElement;
@@ -4371,6 +4488,12 @@ declare global {
         prototype: HTMLCalciteInputNumberElement;
         new (): HTMLCalciteInputNumberElement;
     };
+    interface HTMLCalciteInputTextElement extends Components.CalciteInputText, HTMLStencilElement {
+    }
+    var HTMLCalciteInputTextElement: {
+        prototype: HTMLCalciteInputTextElement;
+        new (): HTMLCalciteInputTextElement;
+    };
     interface HTMLCalciteInputTimePickerElement extends Components.CalciteInputTimePicker, HTMLStencilElement {
     }
     var HTMLCalciteInputTimePickerElement: {
@@ -4723,6 +4846,7 @@ declare global {
         "calcite-input-date-picker": HTMLCalciteInputDatePickerElement;
         "calcite-input-message": HTMLCalciteInputMessageElement;
         "calcite-input-number": HTMLCalciteInputNumberElement;
+        "calcite-input-text": HTMLCalciteInputTextElement;
         "calcite-input-time-picker": HTMLCalciteInputTimePickerElement;
         "calcite-label": HTMLCalciteLabelElement;
         "calcite-link": HTMLCalciteLinkElement;
@@ -5028,7 +5152,8 @@ declare namespace LocalJSX {
     }
     interface CalciteAlert {
         /**
-          * When true, the component is active.
+          * When true, opens the combobox
+          * @deprecated use open instead
          */
         "active"?: boolean;
         /**
@@ -5072,6 +5197,10 @@ declare namespace LocalJSX {
           * Fires when the component is open and animation is complete.
          */
         "onCalciteAlertOpen"?: (event: CalciteAlertCustomEvent<void>) => void;
+        /**
+          * When true, opens the dropdown
+         */
+        "open"?: boolean;
         /**
           * Specifies the placement of the component
          */
@@ -6785,6 +6914,117 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface CalciteInputText {
+        /**
+          * Specifies the text alignment of the component's value.
+         */
+        "alignment"?: Position;
+        /**
+          * When true, the component is focused on page load.
+          * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+         */
+        "autofocus"?: boolean;
+        /**
+          * When true, a clear button is displayed when the component has a value.
+         */
+        "clearable"?: boolean;
+        /**
+          * 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;
+        /**
+          * When true, the component will not be visible.
+          * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+         */
+        "hidden"?: boolean;
+        /**
+          * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
+         */
+        "icon"?: string | boolean;
+        /**
+          * When true, the icon is flipped in RTL.
+         */
+        "iconFlipRtl"?: boolean;
+        /**
+          * A text label that will appear on the clear button for screen readers.
+         */
+        "intlClear"?: string;
+        /**
+          * Accessible name that will appear while loading.
+          * @default "Loading"
+         */
+        "intlLoading"?: string;
+        /**
+          * Accessible name for the component's button or hyperlink.
+         */
+        "label"?: string;
+        /**
+          * When true, the component is in the loading state and `calcite-progress` is displayed.
+         */
+        "loading"?: boolean;
+        /**
+          * Specifies the maximum length of text for the component's value.
+          * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
+         */
+        "maxLength"?: number;
+        /**
+          * Specifies the minimum length of text for the component's value.
+          * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
+         */
+        "minLength"?: number;
+        /**
+          * Specifies the name of the component.
+          * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+         */
+        "name"?: string;
+        /**
+          * Fires each time a new value is typed and committed.
+         */
+        "onCalciteInputTextChange"?: (event: CalciteInputTextCustomEvent<void>) => void;
+        /**
+          * Fires each time a new value is typed.
+         */
+        "onCalciteInputTextInput"?: (event: CalciteInputTextCustomEvent<{
+    element: HTMLInputElement;
+    nativeEvent: MouseEvent | KeyboardEvent | InputEvent;
+    value: string;
+  }>) => void;
+        /**
+          * Specifies placeholder text for the component.
+          * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+         */
+        "placeholder"?: string;
+        /**
+          * Adds text to the start of the component.
+         */
+        "prefixText"?: string;
+        /**
+          * When true, the value cannot be modified.
+          * @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.
+         */
+        "required"?: boolean;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
+        /**
+          * Specifies the status of the input field, which determines message and icons.
+         */
+        "status"?: Status;
+        /**
+          * Adds text to the end of the component.
+         */
+        "suffixText"?: string;
+        /**
+          * The component's value.
+         */
+        "value"?: string;
+    }
     interface CalciteInputTimePicker {
         /**
           * The active state of the time input
@@ -8640,6 +8880,7 @@ declare namespace LocalJSX {
         "calcite-input-date-picker": CalciteInputDatePicker;
         "calcite-input-message": CalciteInputMessage;
         "calcite-input-number": CalciteInputNumber;
+        "calcite-input-text": CalciteInputText;
         "calcite-input-time-picker": CalciteInputTimePicker;
         "calcite-label": CalciteLabel;
         "calcite-link": CalciteLink;
@@ -8737,6 +8978,7 @@ declare module "@stencil/core" {
             "calcite-input-date-picker": LocalJSX.CalciteInputDatePicker & JSXBase.HTMLAttributes<HTMLCalciteInputDatePickerElement>;
             "calcite-input-message": LocalJSX.CalciteInputMessage & JSXBase.HTMLAttributes<HTMLCalciteInputMessageElement>;
             "calcite-input-number": LocalJSX.CalciteInputNumber & JSXBase.HTMLAttributes<HTMLCalciteInputNumberElement>;
+            "calcite-input-text": LocalJSX.CalciteInputText & JSXBase.HTMLAttributes<HTMLCalciteInputTextElement>;
             "calcite-input-time-picker": LocalJSX.CalciteInputTimePicker & JSXBase.HTMLAttributes<HTMLCalciteInputTimePickerElement>;
             "calcite-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes<HTMLCalciteLabelElement>;
             "calcite-link": LocalJSX.CalciteLink & JSXBase.HTMLAttributes<HTMLCalciteLinkElement>;

package/dist/types/preact.d.ts

@@ -185,6 +185,13 @@ declare module "preact/src/jsx" {
         "oncalciteInputNumberChange"?: (event: CustomEvent<any>) => void;
       }
 
+      "calcite-input-text": Omit<JSX.CalciteInputText, "onCalciteInternalInputTextFocus" | "onCalciteInternalInputTextBlur" | "onCalciteInputTextInput" | "onCalciteInputTextChange"> & JSXInternal.HTMLAttributes<HTMLCalciteInputTextElement> & {
+        "oncalciteInternalInputTextFocus"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalInputTextBlur"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputTextInput"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputTextChange"?: (event: CustomEvent<any>) => void;
+      }
+
       "calcite-input-time-picker": Omit<JSX.CalciteInputTimePicker, "onCalciteInputTimePickerChange"> & JSXInternal.HTMLAttributes<HTMLCalciteInputTimePickerElement> & {
         "oncalciteInputTimePickerChange"?: (event: CustomEvent<any>) => void;
       }