@esri/calcite-components 1.0.0-next.647 → 1.0.0-next.648

package/dist/collection/components/inline-editable/inline-editable.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.647
+ * v1.0.0-next.648
  */
 import { h } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -15,37 +15,6 @@ import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../
  */
 export class InlineEditable {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Props
-    //
-    //--------------------------------------------------------------------------
-    /** specify whether editing can be enabled */
-    this.disabled = false;
-    /** specify whether the wrapped input element is editable, defaults to false */
-    this.editingEnabled = false;
-    /** specify whether the confirm button should display a loading state, defaults to false */
-    this.loading = false;
-    /** specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */
-    this.controls = false;
-    /**
-     * specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
-     *
-     * @default "Click to edit"
-     */
-    this.intlEnableEditing = TEXT.intlEnablingEditing;
-    /**
-     * specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
-     *
-     * @default "Cancel"
-     */
-    this.intlCancelEditing = TEXT.intlCancelEditing;
-    /**
-     * specify text to be user for the confirm changes button's aria-label, defaults to `Save`
-     *
-     * @default "Save"
-     */
-    this.intlConfirmChanges = TEXT.intlConfirmChanges;
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
     this.enableEditing = () => {
       var _a, _b;
@@ -119,6 +88,15 @@ export class InlineEditable {
         this.loading = false;
       }
     };
+    this.disabled = false;
+    this.editingEnabled = false;
+    this.loading = false;
+    this.controls = false;
+    this.intlEnableEditing = TEXT.intlEnablingEditing;
+    this.intlCancelEditing = TEXT.intlCancelEditing;
+    this.intlConfirmChanges = TEXT.intlConfirmChanges;
+    this.scale = undefined;
+    this.afterConfirm = undefined;
   }
   disabledWatcher(disabled) {
     if (this.inputElement) {
@@ -246,7 +224,7 @@ export class InlineEditable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify whether editing can be enabled"
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -264,7 +242,7 @@ export class InlineEditable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify whether the wrapped input element is editable, defaults to false"
+          "text": "When `true`, inline editing is enabled on the component."
         },
         "attribute": "editing-enabled",
         "reflect": true,
@@ -282,7 +260,7 @@ export class InlineEditable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify whether the confirm button should display a loading state, defaults to false"
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -300,7 +278,7 @@ export class InlineEditable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false"
+          "text": "When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component."
         },
         "attribute": "controls",
         "reflect": true,
@@ -321,7 +299,7 @@ export class InlineEditable {
               "name": "default",
               "text": "\"Click to edit\""
             }],
-          "text": "specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`"
+          "text": "Accessible name for the component's enable editing button."
         },
         "attribute": "intl-enable-editing",
         "reflect": true,
@@ -342,7 +320,7 @@ export class InlineEditable {
               "name": "default",
               "text": "\"Cancel\""
             }],
-          "text": "specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`"
+          "text": "Accessible name for the component's cancel editing button."
         },
         "attribute": "intl-cancel-editing",
         "reflect": true,
@@ -363,7 +341,7 @@ export class InlineEditable {
               "name": "default",
               "text": "\"Save\""
             }],
-          "text": "specify text to be user for the confirm changes button's aria-label, defaults to `Save`"
+          "text": "Accessible name for the component's confirm edits button."
         },
         "attribute": "intl-confirm-changes",
         "reflect": true,
@@ -383,10 +361,10 @@ export class InlineEditable {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale"
+          "text": "Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale."
         },
         "attribute": "scale",
         "reflect": true
@@ -404,10 +382,10 @@ export class InlineEditable {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically."
+          "text": "Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically."
         }
       }
     };
@@ -421,7 +399,7 @@ export class InlineEditable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the cancel button gets clicked."
+          "text": "Emits when the component's \"cancel editing\" button is pressed."
         },
         "complexType": {
           "original": "void",
@@ -436,7 +414,7 @@ export class InlineEditable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the check button gets clicked."
+          "text": "Emits when the component's \"confirm edits\" button is pressed."
         },
         "complexType": {
           "original": "void",

package/dist/collection/components/inline-editable/resources.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.647
+ * v1.0.0-next.648
  */
 export const CSS = {
   wrapper: "wrapper",

package/dist/collection/components/input/input.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.647
+ * v1.0.0-next.648
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -21,89 +21,6 @@ import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../
  */
 export class Input {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** Specifies the text alignment of the component's value. */
-    this.alignment = "start";
-    /**
-     * When `true`, the component is focused on page load.
-     *
-     * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-     */
-    this.autofocus = false;
-    /**
-     * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
-     */
-    this.clearable = false;
-    /**
-     * 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)
-     */
-    this.disabled = false;
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     */
-    this.groupSeparator = false;
-    /**
-     * When `true`, the component will not be visible.
-     *
-     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
-     */
-    this.hidden = false;
-    /**
-     * Accessible name when the component is loading.
-     *
-     * @default "Loading"
-     */
-    this.intlLoading = COMMON_TEXT.loading;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-    this.iconFlipRtl = false;
-    /** When `true`, a busy indicator is displayed. */
-    this.loading = false;
-    /**
-     * When `true`, uses locale formatting for numbers.
-     *
-     * @internal
-     */
-    this.localeFormat = false;
-    /** Specifies the placement of the buttons for `type="number"`. */
-    this.numberButtonType = "vertical";
-    /**
-     * When `true`, the component's value can be read, but cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     */
-    this.readOnly = false;
-    /** When `true`, the component must have a value in order for the form to submit. */
-    this.required = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** Specifies the status of the input field, which determines message and icons. */
-    this.status = "idle";
-    /**
-     * When `true`, the component can accept more than one value.
-     * This property only has an effect when `type` is "email" or "file".
-     * Read the native attribute's documentation on MDN for more info.
-     *
-     * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)
-     */
-    this.multiple = false;
-    /**
-     * @internal
-     */
-    this.editingEnabled = false;
-    /**
-     * Specifies the component type.
-     *
-     * Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.
-     */
-    this.type = "text";
-    /** The component's value. */
-    this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
     this.previousValueOrigin = "initial";
@@ -111,12 +28,6 @@ export class Input {
     this.userChangedValue = false;
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
-    //--------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -402,6 +313,45 @@ export class Input {
     this.inputKeyUpHandler = () => {
       window.clearInterval(this.nudgeNumberValueIntervalId);
     };
+    this.alignment = "start";
+    this.autofocus = false;
+    this.clearable = false;
+    this.disabled = false;
+    this.groupSeparator = false;
+    this.hidden = false;
+    this.icon = undefined;
+    this.intlClear = undefined;
+    this.intlLoading = COMMON_TEXT.loading;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.loading = false;
+    this.locale = undefined;
+    this.numberingSystem = undefined;
+    this.localeFormat = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.maxlength = undefined;
+    this.maxLength = undefined;
+    this.minLength = undefined;
+    this.name = undefined;
+    this.numberButtonType = "vertical";
+    this.placeholder = undefined;
+    this.prefixText = undefined;
+    this.readOnly = false;
+    this.required = false;
+    this.scale = "m";
+    this.status = "idle";
+    this.step = undefined;
+    this.autocomplete = undefined;
+    this.pattern = undefined;
+    this.accept = undefined;
+    this.multiple = false;
+    this.suffixText = undefined;
+    this.editingEnabled = false;
+    this.type = "text";
+    this.value = "";
+    this.effectiveLocale = "";
+    this.localizedValue = undefined;
   }
   disabledWatcher() {
     this.setDisabledAction();

package/dist/collection/components/input/resources.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.647
+ * v1.0.0-next.648
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-date-picker/input-date-picker.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.647
+ * v1.0.0-next.648
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
@@ -19,81 +19,6 @@ import { numberKeys } from "../../utils/key";
 import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 export class InputDatePicker {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     */
-    this.readOnly = false;
-    /** Selected date as a string in ISO format (YYYY-MM-DD) */
-    this.value = "";
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated use `open` instead.
-     */
-    this.active = false;
-    /** When `true`, displays the `calcite-date-picker` component. */
-    this.open = false;
-    /**
-     * Accessible name for the component's previous month button.
-     *
-     * @default "Previous month"
-     */
-    this.intlPrevMonth = TEXT.prevMonth;
-    /**
-     * Accessible name for the component's next month button.
-     *
-     * @default "Next month"
-     */
-    this.intlNextMonth = TEXT.nextMonth;
-    /**
-     * Accessible name for the component's year input.
-     *
-     * @default "Year"
-     */
-    this.intlYear = TEXT.year;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * Specifies the placement of the `calcite-date-picker` relative to the component.
-     *
-     * @default "bottom-start"
-     */
-    this.placement = defaultMenuPlacement;
-    /** When `true`, activates a range for the component. */
-    this.range = false;
-    /**
-     * When `true`, the component must have a value in order for the form to submit.
-     *
-     * @internal
-     */
-    this.required = false;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     */
-    this.overlayPositioning = "absolute";
-    /**
-     * When `true`, disables the default behavior on the third click of narrowing or extending the range.
-     * Instead starts a new range.
-     */
-    this.proximitySelectionDisabled = false;
-    /** Defines the layout of the component. */
-    this.layout = "horizontal";
     this.calciteInternalInputInputHandler = (event) => {
       const target = event.target;
       const value = target.value;
@@ -109,9 +34,6 @@ export class InputDatePicker {
     this.calciteInternalInputBlurHandler = () => {
       this.commitValue();
     };
-    this.effectiveLocale = "";
-    this.focusedInput = "start";
-    this.globalAttributes = {};
     this.userChangedValue = false;
     this.openTransitionProp = "opacity";
     this.valueAsDateChangedExternally = false;
@@ -293,6 +215,40 @@ export class InputDatePicker {
           : char)
         .join("")
       : "";
+    this.disabled = false;
+    this.readOnly = false;
+    this.value = "";
+    this.flipPlacements = undefined;
+    this.headingLevel = undefined;
+    this.valueAsDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
+    this.minAsDate = undefined;
+    this.maxAsDate = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.active = false;
+    this.open = false;
+    this.name = undefined;
+    this.intlPrevMonth = TEXT.prevMonth;
+    this.intlNextMonth = TEXT.nextMonth;
+    this.intlYear = TEXT.year;
+    this.locale = undefined;
+    this.numberingSystem = undefined;
+    this.scale = "m";
+    this.placement = defaultMenuPlacement;
+    this.range = false;
+    this.required = false;
+    this.start = undefined;
+    this.end = undefined;
+    this.overlayPositioning = "absolute";
+    this.proximitySelectionDisabled = false;
+    this.layout = "horizontal";
+    this.datePickerActiveDate = undefined;
+    this.effectiveLocale = "";
+    this.focusedInput = "start";
+    this.globalAttributes = {};
+    this.localeData = undefined;
   }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {

package/dist/collection/components/input-date-picker/resources.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.647
+ * v1.0.0-next.648
  */
 export const CSS = {
   menu: "menu-container",

package/dist/collection/components/input-message/input-message.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.647
+ * v1.0.0-next.648
  */
 import { Host, h } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";
@@ -11,22 +11,11 @@ import { StatusIconDefaults } from "./interfaces";
  */
 export class InputMessage {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated use global `hidden` attribute instead.
-     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
-     */
     this.active = false;
-    /** Specifies the size of the component. */
+    this.icon = undefined;
     this.scale = "m";
-    /** Specifies the status of the input field, which determines message and icons. */
     this.status = "idle";
+    this.type = undefined;
   }
   handleIconEl() {
     this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);

package/dist/collection/components/input-message/interfaces.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.647
+ * v1.0.0-next.648
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-number/input-number.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.647
+ * v1.0.0-next.648
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -21,86 +21,11 @@ import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../
  */
 export class InputNumber {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** Specifies the text alignment of the component's value. */
-    this.alignment = "start";
-    /**
-     * When `true`, the component is focused on page load.
-     *
-     * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-     */
-    this.autofocus = false;
-    /**
-     * When `true`, a clear button is displayed when the component has a value.
-     */
-    this.clearable = false;
-    /**
-     * 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)
-     */
-    this.disabled = false;
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     */
-    this.groupSeparator = false;
-    /**
-     * When `true`, the component will not be visible.
-     *
-     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
-     */
-    this.hidden = false;
-    /**
-     * Accessible name that will appear while loading.
-     *
-     * @default "Loading"
-     */
-    this.intlLoading = COMMON_TEXT.loading;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-    this.iconFlipRtl = false;
-    /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
-    this.loading = false;
-    /**
-     * Toggles locale formatting for numbers.
-     *
-     * @internal
-     */
-    this.localeFormat = false;
-    /** Specifies the placement of the buttons. */
-    this.numberButtonType = "vertical";
-    /**
-     * When `true`, the component's value can be read, but cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     */
-    this.readOnly = false;
-    /** When `true`, the component must have a value in order for the form to submit. */
-    this.required = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** Specifies the status of the input field, which determines message and icons. */
-    this.status = "idle";
-    /**
-     * @internal
-     */
-    this.editingEnabled = false;
-    /** The component's value. */
-    this.value = "";
     this.previousValueOrigin = "initial";
     this.mutationObserver = createObserver("mutation", () => this.setDisabledAction());
     this.userChangedValue = false;
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
-    //--------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -342,6 +267,40 @@ export class InputNumber {
     this.inputNumberKeyUpHandler = () => {
       window.clearInterval(this.nudgeNumberValueIntervalId);
     };
+    this.alignment = "start";
+    this.autofocus = false;
+    this.clearable = false;
+    this.disabled = false;
+    this.groupSeparator = false;
+    this.hidden = false;
+    this.icon = undefined;
+    this.intlClear = undefined;
+    this.intlLoading = COMMON_TEXT.loading;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.loading = false;
+    this.locale = undefined;
+    this.numberingSystem = undefined;
+    this.localeFormat = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.maxLength = undefined;
+    this.minLength = undefined;
+    this.name = undefined;
+    this.numberButtonType = "vertical";
+    this.placeholder = undefined;
+    this.prefixText = undefined;
+    this.readOnly = false;
+    this.required = false;
+    this.scale = "m";
+    this.status = "idle";
+    this.step = undefined;
+    this.autocomplete = undefined;
+    this.suffixText = undefined;
+    this.editingEnabled = false;
+    this.value = "";
+    this.effectiveLocale = "";
+    this.localizedValue = undefined;
   }
   disabledWatcher() {
     this.setDisabledAction();