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

package/dist/collection/components/shell-panel/shell-panel.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.649
  */
 import { h, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -14,38 +14,6 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } f
  */
 export class ShellPanel {
   constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, hides the component's content area.
-     */
-    this.collapsed = false;
-    /**
-     * When `true`, the content area displays like a floating panel.
-     */
-    this.detached = false;
-    /**
-     * When `detached`, specifies the maximum height of the component.
-     */
-    this.detachedHeightScale = "l";
-    /**
-     * Specifies the width of the component's content area.
-     */
-    this.widthScale = "m";
-    /**
-     * Accessible name for the resize separator.
-     *
-     * @default "Resize"
-     */
-    this.intlResize = TEXT.resize;
-    /**
-     * When `true` and not `detached`, the component's content area is resizable.
-     */
-    this.resizable = false;
-    this.contentWidth = null;
     this.initialContentWidth = null;
     this.initialClientX = null;
     this.contentWidthMax = null;
@@ -151,6 +119,14 @@ export class ShellPanel {
       var _a;
       (_a = this.separatorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointerdown", this.separatorPointerDown);
     };
+    this.collapsed = false;
+    this.detached = false;
+    this.detachedHeightScale = "l";
+    this.widthScale = "m";
+    this.position = undefined;
+    this.intlResize = TEXT.resize;
+    this.resizable = false;
+    this.contentWidth = null;
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/slider/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.649
  */
 export const CSS = {
   handleLabel: "handle__label",

package/dist/collection/components/slider/slider.css

@@ -281,8 +281,8 @@
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
 }
 
-.thumb.thumb--precise:hover:after,
-.thumb.thumb--precise:focus:after,
+.thumb:hover.thumb--precise:after,
+.thumb:focus.thumb--precise:after,
 .thumb--active.thumb--precise:after{
   background-color: var(--calcite-ui-brand);
 }

package/dist/collection/components/slider/slider.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.649
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -19,56 +19,8 @@ function isRange(value) {
 }
 export class Slider {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    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`, indicates a histogram is present. */
-    this.hasHistogram = false;
-    /** When `true`, displays label handles with their numeric value. */
-    this.labelHandles = false;
-    /** When `true` and `ticks` is specified, displays label tick marks with their numeric value. */
-    this.labelTicks = false;
-    /** The component's maximum selectable value. */
-    this.max = 100;
-    /** The component's minimum selectable value. */
-    this.min = 0;
-    /**
-     * 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.
-     */
-    this.mirrored = false;
-    /** When `true`, sets a finer point for handles. */
-    this.precise = false;
-    /**
-     * When `true`, the component must have a value in order for the form to submit.
-     */
-    this.required = false;
-    /** When `true`, enables snap selection in coordination with `step` via a mouse. */
-    this.snap = false;
-    /** Specifies the interval to move with the up, or down keys. */
-    this.step = 1;
-    /** The component's value. */
-    this.value = 0;
-    /**
-     *  Specifies the size of the component.
-     */
-    this.scale = "m";
     this.activeProp = "value";
     this.guid = `calcite-slider-${guid()}`;
-    this.effectiveLocale = "";
-    this.minMaxValueRange = null;
-    this.minValueDragRange = null;
-    this.maxValueDragRange = null;
-    this.tickValues = [];
     this.dragUpdate = (event) => {
       event.preventDefault();
       if (this.dragProp) {
@@ -139,6 +91,35 @@ export class Slider {
         return numberStringFormatter.localize(value.toString());
       }
     };
+    this.disabled = false;
+    this.groupSeparator = false;
+    this.hasHistogram = false;
+    this.histogram = undefined;
+    this.histogramStops = undefined;
+    this.labelHandles = false;
+    this.labelTicks = false;
+    this.max = 100;
+    this.maxLabel = undefined;
+    this.maxValue = undefined;
+    this.min = 0;
+    this.minLabel = undefined;
+    this.minValue = undefined;
+    this.mirrored = false;
+    this.name = undefined;
+    this.numberingSystem = undefined;
+    this.pageStep = undefined;
+    this.precise = false;
+    this.required = false;
+    this.snap = false;
+    this.step = 1;
+    this.ticks = undefined;
+    this.value = 0;
+    this.scale = "m";
+    this.effectiveLocale = "";
+    this.minMaxValueRange = null;
+    this.minValueDragRange = null;
+    this.maxValueDragRange = null;
+    this.tickValues = [];
   }
   histogramWatcher(newHistogram) {
     this.hasHistogram = !!newHistogram;

package/dist/collection/components/sortable-list/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.649
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.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.649
  */
 import Sortable from "sortablejs";
 import { h } from "@stencil/core";
@@ -13,29 +13,19 @@ import { updateHostInteraction } from "../../utils/interactive";
  */
 export class SortableList {
   constructor() {
-    /**
-     * The selector for the handle elements.
-     */
-    this.handleSelector = "calcite-handle";
-    /**
-     * Indicates the horizontal or vertical orientation of the component.
-     */
-    this.layout = "vertical";
-    /**
-     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-     */
-    this.disabled = false;
-    /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
-     */
-    this.loading = false;
-    this.handleActivated = false;
     this.items = [];
     this.mutationObserver = createObserver("mutation", () => {
       this.cleanUpDragAndDrop();
       this.items = Array.from(this.el.children);
       this.setUpDragAndDrop();
     });
+    this.dragSelector = undefined;
+    this.group = undefined;
+    this.handleSelector = "calcite-handle";
+    this.layout = "vertical";
+    this.disabled = false;
+    this.loading = false;
+    this.handleActivated = false;
   }
   // --------------------------------------------------------------------------
   //

package/dist/collection/components/split-button/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.649
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.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.649
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";
@@ -11,39 +11,23 @@ import { updateHostInteraction } from "../../utils/interactive";
  */
 export class SplitButton {
   constructor() {
-    /** Specifies the appearance style of the component. */
+    this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
+    this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
     this.appearance = "solid";
-    /** Specifies the color of the component. */
     this.color = "blue";
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /**
-     * When `true`, the component is active.
-     *
-     * @internal
-     */
     this.active = false;
-    /** Specifies the icon used for the dropdown menu. */
     this.dropdownIconType = "chevron";
-    /**
-      When `true`, a busy indicator is displayed on the primary button.
-     */
+    this.dropdownLabel = undefined;
     this.loading = 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";
-    /** Specifies the size of the component. */
+    this.primaryIconEnd = undefined;
+    this.primaryIconFlipRtl = undefined;
+    this.primaryIconStart = undefined;
+    this.primaryLabel = undefined;
+    this.primaryText = undefined;
     this.scale = "m";
-    /** Specifies the width of the component. */
     this.width = "auto";
-    this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
-    this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
   }
   handleDisabledChange(value) {
     if (!value) {

package/dist/collection/components/stepper/stepper.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.649
  */
 import { h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -10,19 +10,6 @@ import { focusElement } from "../../utils/dom";
  */
 export class Stepper {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */
-    this.icon = false;
-    /** Defines the layout of the component. */
-    this.layout = "horizontal";
-    /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
-    this.numbered = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -33,6 +20,11 @@ export class Stepper {
     this.items = [];
     /** list of enabled Stepper items */
     this.enabledItems = [];
+    this.icon = false;
+    this.layout = "horizontal";
+    this.numbered = false;
+    this.numberingSystem = undefined;
+    this.scale = "m";
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/stepper-item/stepper-item.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.649
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -13,46 +13,6 @@ import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../
  */
 export class StepperItem {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     *  When `true`, the component is selected.
-     *
-     * @deprecated Use `selected` instead.
-     */
-    this.active = false;
-    /**
-     * When `true`, the component is selected.
-     */
-    this.selected = false;
-    /** When `true`, the step has been completed. */
-    this.complete = false;
-    /** When `true`, the component contains an error that requires resolution from the user. */
-    this.error = false;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    // internal props inherited from wrapping calcite-stepper
-    /** Defines the layout of the component. */
-    /** @internal */
-    this.layout = "horizontal";
-    /** When `true`, displays a status icon in the component's heading. */
-    /** @internal */
-    this.icon = false;
-    /** When `true`, displays the step number in the component's heading. */
-    /** @internal */
-    this.numbered = false;
-    /** Specifies the size of the component. */
-    /** @internal */
-    this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Internal State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -104,6 +64,20 @@ export class StepperItem {
         });
       }
     };
+    this.active = false;
+    this.selected = false;
+    this.complete = false;
+    this.error = false;
+    this.disabled = false;
+    this.itemTitle = undefined;
+    this.heading = undefined;
+    this.itemSubtitle = undefined;
+    this.description = undefined;
+    this.layout = "horizontal";
+    this.icon = false;
+    this.numbered = false;
+    this.scale = "m";
+    this.effectiveLocale = "";
   }
   activeHandler(value) {
     this.selected = value;

package/dist/collection/components/switch/switch.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.649
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -12,23 +12,6 @@ import { isActivationKey } from "../../utils/key";
 import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 export class Switch {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * When `true`, the component is checked.
-     *
-     * @deprecated use `checked` instead.
-     */
-    this.switched = false;
-    /** When `true`, the component is checked. */
-    this.checked = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -46,6 +29,13 @@ export class Switch {
     this.setSwitchEl = (el) => {
       this.switchEl = el;
     };
+    this.disabled = false;
+    this.label = undefined;
+    this.name = undefined;
+    this.scale = "m";
+    this.switched = false;
+    this.checked = false;
+    this.value = undefined;
   }
   switchedWatcher(switched) {
     this.checked = switched;

package/dist/collection/components/tab/tab.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.649
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -11,25 +11,12 @@ import { nodeListToArray } from "../../utils/dom";
  */
 export class Tab {
   constructor() {
-    /**
-     * When `true`, the component's contents are selected.
-     *
-     * Only one tab can be selected within the `calcite-tabs` parent.
-     *
-     * @deprecated Use `selected` instead.
-     */
+    this.guid = `calcite-tab-title-${guid()}`;
+    this.tab = undefined;
     this.active = false;
-    /**
-     * When `true`, the component's contents are selected.
-     *
-     * Only one tab can be selected within the `calcite-tabs` parent.
-     */
     this.selected = false;
-    /**
-     * @internal
-     */
     this.scale = "m";
-    this.guid = `calcite-tab-title-${guid()}`;
+    this.labeledBy = undefined;
   }
   activeHandler(value) {
     this.selected = value;

package/dist/collection/components/tab-nav/tab-nav.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.649
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -11,22 +11,6 @@ import { createObserver } from "../../utils/observers";
  */
 export class TabNav {
   constructor() {
-    /**
-     * @internal
-     */
-    this.scale = "m";
-    /**
-     * @internal
-     */
-    this.layout = "inline";
-    /**
-     * @internal
-     */
-    this.position = "bottom";
-    /**
-     * @internal
-     */
-    this.bordered = false;
     this.animationActiveDuration = 0.3;
     this.resizeObserver = createObserver("resize", () => {
       // remove active indicator transition duration during resize to prevent wobble
@@ -49,6 +33,16 @@ export class TabNav {
       this.activeIndicatorEl.style.transitionDuration = "0s";
       this.updateOffsetPosition();
     };
+    this.storageId = undefined;
+    this.syncId = undefined;
+    this.scale = "m";
+    this.layout = "inline";
+    this.position = "bottom";
+    this.bordered = false;
+    this.indicatorOffset = undefined;
+    this.indicatorWidth = undefined;
+    this.selectedTab = undefined;
+    this.selectedTabEl = undefined;
   }
   async selectedTabChanged() {
     if (localStorage &&

package/dist/collection/components/tab-title/tab-title.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.649
  */
 import { Build, h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -13,31 +13,6 @@ import { updateHostInteraction } from "../../utils/interactive";
  */
 export class TabTitle {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component and its respective `calcite-tab` contents are selected.
-     *
-     * Only one tab can be selected within the `calcite-tabs` parent.
-     *
-     * @deprecated Use `selected` instead.
-     */
-    this.active = false;
-    /**
-     * When `true`, the component and its respective `calcite-tab` contents are selected.
-     *
-     * Only one tab can be selected within the `calcite-tabs` parent.
-     */
-    this.selected = false;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity.  */
-    this.disabled = false;
-    /**
-     * @internal
-     */
-    this.bordered = false;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -45,12 +20,23 @@ export class TabTitle {
     //--------------------------------------------------------------------------
     /** watches for changing text content */
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
-    /** determine if there is slotted text for styling purposes */
-    this.hasText = false;
     this.resizeObserver = createObserver("resize", () => {
       this.calciteInternalTabIconChanged.emit();
     });
     this.guid = `calcite-tab-title-${guid()}`;
+    this.active = false;
+    this.selected = false;
+    this.disabled = false;
+    this.iconEnd = undefined;
+    this.iconFlipRtl = undefined;
+    this.iconStart = undefined;
+    this.layout = undefined;
+    this.position = undefined;
+    this.scale = undefined;
+    this.bordered = false;
+    this.tab = undefined;
+    this.controls = undefined;
+    this.hasText = false;
   }
   activeHandler(value) {
     this.selected = value;

package/dist/collection/components/tabs/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.649
  */
 export const SLOTS = {
   tabNav: "tab-nav"