@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.70

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

@@ -1,3 +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.
+ */
 import { Component, h, Listen, Prop, Element } from "@stencil/core";
 import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../calcite-tooltip/resources";
 import { queryElementRoots } from "../../utils/dom";
@@ -71,13 +75,14 @@ export class CalciteTooltipManager {
     };
     this.activeTooltipHover = (event) => {
       const { tooltipEl, hoverTimeouts } = this;
+      const { type } = event;
       if (!tooltipEl) {
         return;
       }
-      if (event.composedPath().includes(tooltipEl)) {
+      if (type === "mouseover" && event.composedPath().includes(tooltipEl)) {
         this.clearHoverTimeout(tooltipEl);
       }
-      else if (!hoverTimeouts.has(tooltipEl)) {
+      else if (type === "mouseout" && !hoverTimeouts.has(tooltipEl)) {
         this.hoverTooltip({ tooltip: tooltipEl, value: false });
       }
     };
@@ -160,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

@@ -1,3 +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.
+ */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, nodeListToArray } from "../../utils/dom";
 import { TreeSelectionMode } from "./interfaces";
@@ -220,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"
       },
@@ -241,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": ""
       },
@@ -289,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)"
       },
@@ -310,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/interfaces.js

@@ -1,3 +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.
+ */
 export var TreeSelectionMode;
 (function (TreeSelectionMode) {
   TreeSelectionMode["Single"] = "single";

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

@@ -85,51 +85,75 @@
 }
 
 :host {
-  --calcite-tree-indicator: var(--calcite-ui-border-1);
-  --calcite-tree-indicator-active: var(--calcite-ui-brand);
-  --calcite-tree-text: var(--calcite-ui-text-3);
-  --calcite-tree-text-active: var(--calcite-ui-text-1);
   display: block;
   cursor: pointer;
   outline: 2px solid transparent;
   outline-offset: 2px;
   max-width: 100%;
-  color: var(--calcite-tree-text);
+  color: var(--calcite-ui-text-3);
 }
 
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
+}
+
+:host([scale=s]) .node-container {
   --calcite-tree-padding-y: 0.25rem;
 }
 
-:host([scale=s]) .node-container .checkbox {
-  margin-inline-start: 1.5rem;
+:host([scale=s]) .node-container .checkbox,
+:host([scale=s]) .node-container .chevron,
+:host([scale=s]) .node-container .checkmark,
+:host([scale=s]) .node-container .bullet-point {
+  margin-inline: 0.25rem;
 }
 
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+}
+
+:host([scale=m]) .node-container {
   --calcite-tree-padding-y: 0.5rem;
 }
 
-:host([scale=m]) .node-container .checkbox {
-  margin-inline-start: 2rem;
+:host([scale=m]) .node-container .checkbox,
+:host([scale=m]) .node-container .chevron,
+:host([scale=m]) .node-container .checkmark,
+:host([scale=m]) .node-container .bullet-point {
+  margin-inline: 0.5rem;
 }
 
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
+}
+
+:host([scale=l]) .node-container {
   --calcite-tree-padding-y: 0.75rem;
 }
 
-:host([scale=l]) .node-container .checkbox {
-  margin-inline-start: 2.5rem;
+:host([scale=l]) .node-container .checkbox,
+:host([scale=l]) .node-container .chevron,
+:host([scale=l]) .node-container .checkmark,
+:host([scale=l]) .node-container .bullet-point {
+  margin-inline: 0.75rem;
 }
 
-:host([lines]) {
-  --calcite-tree-line: var(--calcite-ui-border-2);
-  --calcite-tree-line-hover: var(--calcite-ui-border-1);
+:host([lines]) .children-container:after {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  transition-property: background-color, border-color, color, fill, stroke;
+  top: 0;
+  position: absolute;
+  width: 1px;
+  height: 96%;
+  content: "";
+  background-color: var(--calcite-ui-border-2);
+  z-index: -1;
 }
 
 :host(:not([lines])) .node-container:after {
@@ -182,28 +206,12 @@
   overflow: hidden;
   height: 0;
   margin-inline-start: 1.25rem;
-  margin-inline-end: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
   transition: 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
   transform-origin: top;
 }
 
-.children-container:after {
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
-  transition-property: background-color, border-color, color, fill, stroke;
-  top: 0;
-  position: absolute;
-  width: 1px;
-  height: 96%;
-  content: "";
-  background-color: var(--calcite-tree-line);
-  z-index: -1;
-}
-
 :host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
@@ -217,16 +225,6 @@
   padding: var(--calcite-tree-padding-y) 0;
 }
 
-.node-container .checkmark,
-.node-container .bullet-point {
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
-.node-container .checkbox {
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
 .node-container .checkmark,
 .node-container .bullet-point {
   transition-property: all;
@@ -234,13 +232,7 @@
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   opacity: 0;
-  color: var(--calcite-tree-indicator);
-}
-
-.node-container:hover ::slotted(*),
-:host([selected]) .node-container:hover ::slotted(*),
-:host(:focus) .node-container ::slotted(*) {
-  color: var(--calcite-tree-text-hover);
+  color: var(--calcite-ui-border-1);
 }
 
 .node-container:hover .checkmark,
@@ -254,8 +246,8 @@
 
 :host([selected]) > .node-container,
 :host([selected]) > .node-container:hover {
-  color: var(--calcite-tree-text-active);
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([selected]) > .node-container .bullet-point,
@@ -266,15 +258,15 @@
   color: var(--calcite-ui-brand);
 }
 
-:host(:not([has-children]))[scale=s] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }
 
-:host(:not([has-children]))[scale=m] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=m]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.5rem;
 }
 
-:host(:not([has-children]))[scale=l] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=l]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.75rem;
 }
 
@@ -289,11 +281,11 @@
 
 :host([has-children][expanded]:not([selected])) > .node-container ::slotted(*) {
   font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-tree-text-active);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([has-children][selected]) > .node-container[data-selection-mode=children], :host([has-children][selected]) > .node-container[data-selection-mode=multi-children] {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }
 
 .chevron {
@@ -303,11 +295,9 @@
   transition-delay: 0s;
   position: relative;
   align-self: center;
+  color: var(--calcite-ui-text-3);
   flex: 0 0 auto;
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
   transform: rotate(0deg);
-  color: var(--calcite-tree-text);
 }
 
 .calcite--rtl .chevron {
@@ -318,19 +308,7 @@
   transform: rotate(90deg);
 }
 
-:host([scale=s]) > .node-container .checkbox {
-  margin-inline-end: 0.5rem;
-}
-
-:host([scale=m]) > .node-container .checkbox {
-  margin-inline-end: 0.75rem;
-}
-
-:host([scale=l]) > .node-container .checkbox {
-  margin-inline-end: 1rem;
-}
-
 :host([selected]) .checkmark,
 :host([selected]) .bullet-point {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }

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

@@ -1,3 +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.
+ */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
@@ -41,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");
@@ -55,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);
   }
   //--------------------------------------------------------------------------
   //
@@ -67,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");
@@ -187,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();
@@ -297,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": ""
       },
@@ -318,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": ""
       },
@@ -339,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": ""
       },
@@ -360,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": ""
       },
@@ -380,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)"
       },
@@ -408,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": ""
       },
@@ -428,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": ""
       },
@@ -453,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": ""
       },
@@ -470,8 +481,8 @@ export class CalciteTreeItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -1,3 +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.
+ */
 export const CSS = {
   checkboxLabel: "checkbox-label",
   checkbox: "checkbox",

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

@@ -1,3 +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.
+ */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";

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

@@ -1,3 +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.
+ */
 export const CSS = {
   container: "container",
   handle: "handle"

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
 import { guid } from "../../utils/guid";
@@ -169,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": ""
       },
@@ -208,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": ""
       },
@@ -234,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."
       },

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

@@ -1,3 +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.
+ */
 export const ICONS = {
   drag: "drag"
 };

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -1,3 +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.
+ */
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";

package/dist/collection/components/functional/CalciteHeading.js

@@ -1,3 +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.
+ */
 import { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/collection/components/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/utils/array.js

@@ -1,3 +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.
+ */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;
 }

package/dist/collection/utils/date.js

@@ -1,3 +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.
+ */
 /**
  * Check if date is within a min and max
  */

package/dist/collection/utils/dom.js

@@ -1,3 +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.
+ */
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
 /**

package/dist/collection/utils/filter.js

@@ -1,3 +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.
+ */
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
   const escapedValue = escapeRegExp(value);