@esri/calcite-components 1.0.0-next.294 → 1.0.0-next.295

package/dist/types/components.d.ts

@@ -557,7 +557,11 @@ export namespace Components {
         /**
           * The name of the checkbox input
          */
-        "name"?: string;
+        "name": any;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * specify the scale of the checkbox, defaults to m
          */
@@ -569,7 +573,7 @@ export namespace Components {
         /**
           * The value of the checkbox input
          */
-        "value"?: any;
+        "value": any;
     }
     interface CalciteChip {
         /**
@@ -818,6 +822,10 @@ export namespace Components {
           * Specify the maximum number of combobox items (including nested children) to display before showing the scroller
          */
         "maxItems": number;
+        /**
+          * The name of the switch input
+         */
+        "name": string;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -830,6 +838,10 @@ export namespace Components {
           * Updates the position of the component.
          */
         "reposition": () => Promise<void>;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * Specify the scale of the combobox, defaults to m
          */
@@ -842,6 +854,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The value(s) of the selectedItem(s)
+         */
+        "value": string | string[];
     }
     interface CalciteComboboxItem {
         /**
@@ -902,10 +918,12 @@ export namespace Components {
         "activeRange"?: "start" | "end";
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -956,20 +974,22 @@ export namespace Components {
         "scale": "s" | "m" | "l";
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value"?: string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteDatePickerDay {
         /**
@@ -1251,12 +1271,18 @@ export namespace Components {
     interface CalciteFilter {
         /**
           * The input data. 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.
+          * @deprecated use `items` instead.
          */
         "data": object[];
         /**
           * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
          */
         "disabled": boolean;
+        /**
+          * The resulting items after filtering.
+          * @readonly
+         */
+        "filteredItems": CalciteFilter["items"];
         /**
           * A text label that will appear on the clear button.
          */
@@ -1265,6 +1291,10 @@ export namespace Components {
           * A text label that will appear next to the input field.
          */
         "intlLabel"?: string;
+        /**
+          * 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[];
         /**
           * Placeholder text for the input element's placeholder attribute
          */
@@ -1406,10 +1436,15 @@ export namespace Components {
           * is the input disabled
          */
         "disabled": boolean;
+        "editingEnabled": boolean;
         /**
           * for number values, displays the locale's group separator
          */
         "groupSeparator": boolean;
+        /**
+          * when true, the component will not be visible
+         */
+        "hidden": boolean;
         /**
           * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
          */
@@ -1463,7 +1498,7 @@ export namespace Components {
         /**
           * The name of the input
          */
-        "name"?: string;
+        "name": string;
         /**
           * specify the placement of the number buttons
          */
@@ -1526,19 +1561,25 @@ export namespace Components {
         /**
           * input value
          */
-        "value"?: string;
+        "value": string;
     }
     interface CalciteInputDatePicker {
         /**
           * Expand or collapse when calendar does not have input
          */
         "active": boolean;
+        /**
+          * When false, the component won't be interactive.
+         */
+        "disabled": boolean;
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -1579,6 +1620,10 @@ export namespace Components {
           * Earliest allowed date as full date object
          */
         "minAsDate"?: Date;
+        /**
+          * The picker's name. Gets submitted with the form.
+         */
+        "name": string;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -1595,6 +1640,10 @@ export namespace Components {
           * Updates the position of the component.
          */
         "reposition": () => Promise<void>;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * specify the scale of the date picker
          */
@@ -1605,20 +1654,22 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value": string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteInputMessage {
         /**
@@ -1707,7 +1758,11 @@ export namespace Components {
         /**
           * The name of the time input
          */
-        "name"?: string;
+        "name": string;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * The scale (size) of the time input
          */
@@ -2433,6 +2488,10 @@ export namespace Components {
           * The group's name. Gets submitted with the form.
          */
         "name": string;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * The scale of the radio group
          */
@@ -2445,6 +2504,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The value of the selectedItem
+         */
+        "value": string;
         /**
           * specify the width of the group, defaults to auto
          */
@@ -2495,10 +2558,18 @@ export namespace Components {
           * @default "Stars: ${num}"
          */
         "intlStars"?: string;
+        /**
+          * The name of the rating
+         */
+        "name": string;
         /**
           * is the rating component in a selectable mode
          */
         "readOnly": boolean;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * specify the scale of the component, defaults to m
          */
@@ -2536,6 +2607,14 @@ export namespace Components {
           * The component's label. This is required for accessibility purposes.
          */
         "label": string;
+        /**
+          * The select's name. Gets submitted with the form.
+         */
+        "name": string;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * The component scale.
          */
@@ -2549,6 +2628,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The value of the selectedOption
+         */
+        "value": string;
         /**
           * The component width.
          */
@@ -2649,6 +2732,10 @@ export namespace Components {
           * When true, the slider will display values from high to low.  Note that this value will be ignored if the slider has an associated histogram.
          */
         "mirrored": boolean;
+        /**
+          * The name of the slider
+         */
+        "name": string;
         /**
           * Interval to move on page up/page down keys
          */
@@ -2657,6 +2744,10 @@ export namespace Components {
           * Use finer point for handles
          */
         "precise": boolean;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * Sets focus on the component.
          */
@@ -2847,7 +2938,7 @@ export namespace Components {
         /**
           * The name of the switch input
          */
-        "name"?: string;
+        "name": string;
         /**
           * The scale of the switch
          */
@@ -2864,7 +2955,7 @@ export namespace Components {
         /**
           * The value of the switch input
          */
-        "value"?: any;
+        "value": any;
     }
     interface CalciteTab {
         /**
@@ -3026,7 +3117,7 @@ export namespace Components {
         /**
           * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
          */
-        "name": string;
+        "name": any;
         /**
           * Sets focus on the component.
          */
@@ -4552,7 +4643,7 @@ declare namespace LocalJSX {
         /**
           * The name of the checkbox input
          */
-        "name"?: string;
+        "name"?: any;
         /**
           * Emitted when the checkbox checked status changes
          */
@@ -4813,6 +4904,10 @@ declare namespace LocalJSX {
           * Specify the maximum number of combobox items (including nested children) to display before showing the scroller
          */
         "maxItems"?: number;
+        /**
+          * The name of the switch input
+         */
+        "name"?: string;
         /**
           * Called when the selected item(s) changes.
          */
@@ -4849,6 +4944,10 @@ declare namespace LocalJSX {
           * specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
          */
         "selectionMode"?: ComboboxSelectionMode;
+        /**
+          * The value(s) of the selectedItem(s)
+         */
+        "value"?: string | string[];
     }
     interface CalciteComboboxItem {
         /**
@@ -4909,10 +5008,12 @@ declare namespace LocalJSX {
         "activeRange"?: "start" | "end";
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -4972,20 +5073,22 @@ declare namespace LocalJSX {
         "scale"?: "s" | "m" | "l";
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value"?: string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteDatePickerDay {
         /**
@@ -5279,12 +5382,18 @@ declare namespace LocalJSX {
     interface CalciteFilter {
         /**
           * The input data. 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.
+          * @deprecated use `items` instead.
          */
         "data"?: object[];
         /**
           * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
          */
         "disabled"?: boolean;
+        /**
+          * The resulting items after filtering.
+          * @readonly
+         */
+        "filteredItems"?: CalciteFilter["items"];
         /**
           * A text label that will appear on the clear button.
          */
@@ -5293,6 +5402,10 @@ declare namespace LocalJSX {
           * A text label that will appear next to the input field.
          */
         "intlLabel"?: string;
+        /**
+          * 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[];
         /**
           * This event fires when the filter text changes.
          */
@@ -5432,6 +5545,10 @@ declare namespace LocalJSX {
           * for number values, displays the locale's group separator
          */
         "groupSeparator"?: boolean;
+        /**
+          * when true, the component will not be visible
+         */
+        "hidden"?: boolean;
         /**
           * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
          */
@@ -5551,12 +5668,18 @@ declare namespace LocalJSX {
           * Expand or collapse when calendar does not have input
          */
         "active"?: boolean;
+        /**
+          * When false, the component won't be interactive.
+         */
+        "disabled"?: boolean;
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -5597,6 +5720,10 @@ declare namespace LocalJSX {
           * Earliest allowed date as full date object
          */
         "minAsDate"?: Date;
+        /**
+          * The picker's name. Gets submitted with the form.
+         */
+        "name"?: string;
         /**
           * Trigger calcite date change when a user changes the date.
          */
@@ -5624,20 +5751,22 @@ declare namespace LocalJSX {
         "scale"?: "s" | "m" | "l";
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value"?: string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteInputMessage {
         /**
@@ -6440,6 +6569,10 @@ declare namespace LocalJSX {
           * The group's selected item.
          */
         "selectedItem"?: HTMLCalciteRadioGroupItemElement;
+        /**
+          * The value of the selectedItem
+         */
+        "value"?: string;
         /**
           * specify the width of the group, defaults to auto
          */
@@ -6490,6 +6623,10 @@ declare namespace LocalJSX {
           * @default "Stars: ${num}"
          */
         "intlStars"?: string;
+        /**
+          * The name of the rating
+         */
+        "name"?: string;
         /**
           * Fires when the rating value has changed.
          */
@@ -6531,6 +6668,10 @@ declare namespace LocalJSX {
           * The component's label. This is required for accessibility purposes.
          */
         "label": string;
+        /**
+          * The select's name. Gets submitted with the form.
+         */
+        "name"?: string;
         /**
           * This event will fire whenever the selected option changes.
          */
@@ -6544,6 +6685,10 @@ declare namespace LocalJSX {
           * @readonly
          */
         "selectedOption"?: HTMLCalciteOptionElement;
+        /**
+          * The value of the selectedOption
+         */
+        "value"?: string;
         /**
           * The component width.
          */
@@ -6648,6 +6793,10 @@ declare namespace LocalJSX {
           * When true, the slider will display values from high to low.  Note that this value will be ignored if the slider has an associated histogram.
          */
         "mirrored"?: boolean;
+        /**
+          * The name of the slider
+         */
+        "name"?: string;
         /**
           * Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead
          */
@@ -6669,6 +6818,10 @@ declare namespace LocalJSX {
           * Use finer point for handles
          */
         "precise"?: boolean;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required"?: boolean;
         /**
           * When true, enables snap selection along the step interval
          */
@@ -7001,7 +7154,7 @@ declare namespace LocalJSX {
         /**
           * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
          */
-        "name"?: string;
+        "name"?: any;
         /**
           * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
          */

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

@@ -1 +1,112 @@
-export declare const hiddenInputStyle = "\n  bottom: 0 !important;\n  left: 0 !important;\n  margin: 0 !important;\n  opacity: 0 !important;\n  outline: none !important;\n  padding: 0 !important;\n  position: absolute !important;\n  right: 0 !important;\n  top: 0 !important;\n  transform: none !important;\n  -webkit-appearance: none !important;\n  z-index: -1 !important;\n";
+import { FunctionalComponent } from "../stencil-public-runtime";
+/**
+ * Exported for testing purposes.
+ */
+export declare const hiddenFormInputSlotName = "hidden-form-input";
+/**
+ * Defines interface for form-associated components.
+ *
+ * Along with the interface, use the matching form utils to help set up the component behavior.
+ */
+export interface FormComponent<T = any> {
+  /**
+   * When true, this component's value will not be submitted in the form.
+   */
+  disabled: boolean;
+  /**
+   * When true, form submit requests will enforce field requirement.
+   *
+   * @todo remove optional in follow-up PR
+   */
+  required?: boolean;
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * The form this component is associated with.
+   */
+  formEl: HTMLFormElement;
+  /**
+   * The name used to submit the value to the associated form.
+   *
+   * Note that this prop should use the @Prop decorator.
+   */
+  name: string;
+  /**
+   * This form component's value.
+   *
+   * Note that this prop should use the @Prop decorator.
+   */
+  value: T;
+  /**
+   * The initial value for this form component.
+   *
+   * When the form is reset, the value will be set to this property.
+   */
+  defaultValue: T;
+  /**
+   * Hook for components to provide custom form reset behavior.
+   */
+  onFormReset?(): void;
+  /**
+   * Hook for components to sync _extra_ props on the hidden input form element used for form-submitting.
+   *
+   * Note: The following props are set by default: disabled, hidden, name, required, value.
+   */
+  syncHiddenFormInput?(input: HTMLInputElement): void;
+}
+/**
+ * Defines interface for checkable form-associated components.
+ *
+ * Along with the interface, use the matching form utils to help set up the component behavior.
+ */
+export interface CheckableFormCompoment<T = any> extends FormComponent<T> {
+  /**
+   * For boolean-valued components, this property defines whether the associated value is submitted to the form or not.
+   */
+  checked: boolean;
+  /**
+   * The initial checked value for this form component.
+   *
+   * When the form is reset, the checked property will be set to this value.
+   *
+   * @todo remove optional in follow-up PR
+   */
+  defaultChecked?: boolean;
+}
+/**
+ * Helper to set up form interactions on connectedCallback.
+ */
+export declare function connectForm<T>(component: FormComponent<T>): void;
+/**
+ * Helper to tear down form interactions on disconnectedCallback.
+ */
+export declare function disconnectForm<T>(component: FormComponent<T>): void;
+/**
+ * Helper for setting the default value on initialization after connectedCallback.
+ *
+ * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ */
+export declare function afterConnectDefaultValueSet<T>(component: FormComponent<T>, value: any): void;
+interface HiddenFormInputSlotProps {
+  component: FormComponent;
+}
+/**
+ * Helper to render the slot for form-associated component's hidden input.
+ *
+ * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.
+ *
+ * render(): VNode {
+ *   <Host>
+ *     <div class={CSS.container}>
+ *     // ...
+ *     <HiddenFormInputSlot component={this} />
+ *     </div>
+ *   </Host>
+ * }
+ *
+ * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ */
+export declare const HiddenFormInputSlot: FunctionalComponent<HiddenFormInputSlotProps>;
+export {};

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

@@ -16,6 +16,11 @@ export interface LabelableComponent {
    */
   onLabelClick: (event: CustomEvent<any>) => void;
 }
+/**
+ * Exported for testing purposes only
+ * @internal
+ */
+export declare const labelClickEvent = "calciteInternalLabelClick";
 /**
  * Helper to set up label interactions on connectedCallback.
  */