@esri/calcite-components 1.0.0-next.292 → 1.0.0-next.296

package/dist/collection/components/calcite-tile/calcite-tile.css

@@ -142,6 +142,7 @@
   flex-direction: column;
   grid-gap: 0.5rem;
   gap: 0.5rem;
+  width: 10%;
 }
 
 .content-container {
@@ -153,6 +154,7 @@
   align-items: stretch;
   padding: 0;
   color: var(--calcite-ui-text-2);
+  width: 100%;
 }
 
 .content-slot-container {
@@ -177,6 +179,8 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   font-weight: var(--calcite-font-weight-medium);
   pointer-events: none;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .large-visual {

package/dist/collection/components/calcite-tile/calcite-tile.js

@@ -153,8 +153,8 @@ export class CalciteTile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the tile."
       },

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -22,8 +22,6 @@ export class CalciteTileSelect {
     this.disabled = false;
     /** The hidden state of the tile select. */
     this.hidden = false;
-    /** 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. */
-    this.name = "";
     /** Display an interactive radio or checkbox. */
     this.inputEnabled = false;
     /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
@@ -273,11 +271,11 @@ export class CalciteTileSelect {
       "reflect": true
     },
     "name": {
-      "type": "string",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       },
       "required": false,
@@ -287,8 +285,7 @@ export class CalciteTileSelect {
         "text": "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."
       },
       "attribute": "name",
-      "reflect": true,
-      "defaultValue": "\"\""
+      "reflect": true
     },
     "inputEnabled": {
       "type": "boolean",

package/dist/collection/components/calcite-time-picker/calcite-time-picker.js

@@ -645,8 +645,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hour\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hour\""
           }],
         "text": "aria-label for the hour input"
       },
@@ -666,8 +666,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease hour\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease hour\""
           }],
         "text": "aria-label for the hour down button"
       },
@@ -687,8 +687,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase hour\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase hour\""
           }],
         "text": "aria-label for the hour up button"
       },
@@ -708,8 +708,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"AM/PM\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"AM/PM\""
           }],
         "text": "aria-label for the meridiem (am/pm) input"
       },
@@ -729,8 +729,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease AM/PM\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease AM/PM\""
           }],
         "text": "aria-label for the meridiem (am/pm) down button"
       },
@@ -750,8 +750,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase AM/PM\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase AM/PM\""
           }],
         "text": "aria-label for the meridiem (am/pm) up button"
       },
@@ -771,8 +771,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Minute\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Minute\""
           }],
         "text": "aria-label for the minute input"
       },
@@ -792,8 +792,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease minute\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease minute\""
           }],
         "text": "aria-label for the minute down button"
       },
@@ -813,8 +813,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase minute\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase minute\""
           }],
         "text": "aria-label for the minute up button"
       },
@@ -834,8 +834,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Second\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Second\""
           }],
         "text": "aria-label for the second input"
       },
@@ -855,8 +855,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Decrease second\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Decrease second\""
           }],
         "text": "aria-label for the second down button"
       },
@@ -876,8 +876,8 @@ export class CalciteTimePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Increase second\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Increase second\""
           }],
         "text": "aria-label for the second up button"
       },
@@ -975,8 +975,8 @@ export class CalciteTimePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -998,8 +998,8 @@ export class CalciteTimePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -1021,8 +1021,8 @@ export class CalciteTimePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-tooltip/calcite-tooltip.js

@@ -117,7 +117,7 @@ export class CalciteTooltip {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -224,8 +224,8 @@ export class CalciteTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "6",
-            "name": "default"
+            "name": "default",
+            "text": "6"
           }],
         "text": "Offset the position of the popover away from the reference element."
       },
@@ -309,8 +309,8 @@ export class CalciteTooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)",
-            "name": "see"
+            "name": "see",
+            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.js

@@ -165,8 +165,8 @@ export class CalciteTooltipManager {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "`[data-calcite-tooltip-reference]`",
-            "name": "default"
+            "name": "default",
+            "text": "`[data-calcite-tooltip-reference]`"
           }],
         "text": "CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip."
       },

package/dist/collection/components/calcite-tree/calcite-tree.js

@@ -224,8 +224,8 @@ export class CalciteTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "use \"ancestors\" selection-mode for checkbox input",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use \"ancestors\" selection-mode for checkbox input"
           }],
         "text": "Display input"
       },
@@ -245,8 +245,8 @@ export class CalciteTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "If this tree is nested within another tree, set to false",
-            "name": "internal"
+            "name": "internal",
+            "text": "If this tree is nested within another tree, set to false"
           }],
         "text": ""
       },
@@ -293,11 +293,11 @@ export class CalciteTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"single\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"single\""
           }, {
-            "text": " [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L5)"
           }],
         "text": "Customize how tree selection works (single, multi, children, multi-children, ancestors)"
       },
@@ -314,8 +314,8 @@ export class CalciteTree {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L1)"
           }],
         "text": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property."
       },

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -45,10 +45,17 @@ export class CalciteTreeItem {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.updateParentIsExpanded = (el, expanded) => {
+      const items = getSlotted(el, SLOTS.children, {
+        all: true,
+        selector: "calcite-tree-item"
+      });
+      items.forEach((item) => (item.parentExpanded = expanded));
+    };
     this.updateAncestorTree = () => {
       if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
         const ancestors = [];
-        let parent = this.el.parentElement.closest("calcite-tree-item");
+        let parent = this.parentTreeItem;
         while (parent) {
           ancestors.push(parent);
           parent = parent.parentElement.closest("calcite-tree-item");
@@ -59,11 +66,7 @@ export class CalciteTreeItem {
     };
   }
   expandedHandler(newValue) {
-    const items = getSlotted(this.el, "children", {
-      all: true,
-      selector: "calcite-tree-item"
-    });
-    items.forEach((item) => (item.parentExpanded = newValue));
+    this.updateParentIsExpanded(this.el, newValue);
   }
   //--------------------------------------------------------------------------
   //
@@ -71,7 +74,11 @@ export class CalciteTreeItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.expandedHandler(this.expanded);
+    this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
+    if (this.parentTreeItem) {
+      const { expanded } = this.parentTreeItem;
+      this.updateParentIsExpanded(this.parentTreeItem, expanded);
+    }
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");
@@ -191,7 +198,7 @@ export class CalciteTreeItem {
           break;
         }
         // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-        const parentItem = this.el.parentElement.closest("calcite-tree-item");
+        const parentItem = this.parentTreeItem;
         if (parentItem && (!this.hasChildren || this.expanded === false)) {
           parentItem.focus();
           e.preventDefault();
@@ -301,8 +308,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Is the parent of this item expanded?",
-            "name": "internal"
+            "name": "internal",
+            "text": "Is the parent of this item expanded?"
           }],
         "text": ""
       },
@@ -322,8 +329,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "What level of depth is this item at?",
-            "name": "internal"
+            "name": "internal",
+            "text": "What level of depth is this item at?"
           }],
         "text": ""
       },
@@ -343,8 +350,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Does this tree item have a tree inside it?",
-            "name": "internal"
+            "name": "internal",
+            "text": "Does this tree item have a tree inside it?"
           }],
         "text": ""
       },
@@ -364,8 +371,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Draw lines (set on parent)",
-            "name": "internal"
+            "name": "internal",
+            "text": "Draw lines (set on parent)"
           }],
         "text": ""
       },
@@ -384,11 +391,11 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }, {
-            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes"
           }],
         "text": "Display checkboxes (set on parent)"
       },
@@ -412,8 +419,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Scale of the parent tree, defaults to m",
-            "name": "internal"
+            "name": "internal",
+            "text": "Scale of the parent tree, defaults to m"
           }],
         "text": ""
       },
@@ -432,8 +439,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected",
-            "name": "internal"
+            "name": "internal",
+            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
           }],
         "text": ""
       },
@@ -457,8 +464,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tree selection-mode (set on parent)",
-            "name": "internal"
+            "name": "internal",
+            "text": "Tree selection-mode (set on parent)"
           }],
         "text": ""
       },
@@ -474,8 +481,8 @@ export class CalciteTreeItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.js

@@ -173,8 +173,8 @@ export class CalciteValueListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When false, the item cannot be deselected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When false, the item cannot be deselected by user interaction."
           }],
         "text": ""
       },
@@ -212,8 +212,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "- stores the activated state of the drag handle.",
-            "name": "internal"
+            "name": "internal",
+            "text": "- stores the activated state of the drag handle."
           }],
         "text": ""
       },
@@ -238,8 +238,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },