@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.83

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

@@ -87,6 +87,11 @@
   outline-offset: 2px;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -138,10 +143,7 @@
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   height: 96%;
   content: "";
   background-color: var(--calcite-ui-border-2);
@@ -170,9 +172,7 @@
 }
 
 :host {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) {
@@ -216,10 +216,7 @@
 }
 .node-container .checkmark, .node-container .bullet-point {
   opacity: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   color: var(--calcite-ui-border-1);
 }
 
@@ -267,10 +264,7 @@
   position: relative;
   align-self: center;
   color: var(--calcite-ui-text-3);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   flex: 0 0 auto;
   transform: rotate(0deg);
 }

package/dist/collection/components/tree-item/tree-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-beta.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
@@ -11,7 +11,7 @@ import { CSS_UTILITY } from "../../utils/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the item.
- * @slot children - A slot for adding nested calcite-tree elements.
+ * @slot children - A slot for adding nested `calcite-tree` elements.
  */
 export class TreeItem {
   constructor() {
@@ -24,11 +24,17 @@ export class TreeItem {
     this.selected = false;
     /** Expanded state of the item. */
     this.expanded = false;
-    /** @internal Expanded state of the parent. */
+    /**
+     * @internal
+     */
     this.parentExpanded = false;
-    /** @internal Level of depth of the item. */
+    /**
+     * @internal
+     */
     this.depth = -1;
-    /** @internal Does this tree item have a tree inside it? */
+    /**
+     * @internal
+     */
     this.hasChildren = null;
     this.iconClickHandler = (event) => {
       event.stopPropagation();
@@ -161,7 +167,7 @@ export class TreeItem {
       const target = link.target === "" ? "_self" : link.target;
       window.open(link.href, target);
     }
-    this.calciteTreeItemSelect.emit({
+    this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
       forceToggle: false
     });
@@ -170,7 +176,7 @@ export class TreeItem {
     let root;
     switch (e.key) {
       case " ":
-        this.calciteTreeItemSelect.emit({
+        this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
@@ -184,7 +190,7 @@ export class TreeItem {
           this.selected = true;
         }
         else {
-          this.calciteTreeItemSelect.emit({
+          this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false
           });
@@ -266,7 +272,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Expanded state of the parent."
+            "text": undefined
           }],
         "text": ""
       },
@@ -287,7 +293,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Level of depth of the item."
+            "text": undefined
           }],
         "text": ""
       },
@@ -308,7 +314,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Does this tree item have a tree inside it?"
+            "text": undefined
           }],
         "text": ""
       },
@@ -329,7 +335,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Draws lines (set on parent)."
+            "text": undefined
           }],
         "text": ""
       },
@@ -377,7 +383,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Scale of the parent tree."
+            "text": undefined
           }],
         "text": ""
       },
@@ -397,9 +403,9 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected."
+            "text": undefined
           }],
-        "text": ""
+        "text": "In ancestor selection mode, show as indeterminate when only some children are selected."
       },
       "attribute": "indeterminate",
       "reflect": true
@@ -422,7 +428,7 @@ export class TreeItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Tree selection-mode (set on parent)."
+            "text": undefined
           }],
         "text": ""
       },
@@ -431,8 +437,8 @@ export class TreeItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteTreeItemSelect",
-      "name": "calciteTreeItemSelect",
+      "method": "calciteInternalTreeItemSelect",
+      "name": "calciteInternalTreeItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/value-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-beta.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   container: "container",

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

@@ -1,17 +1,17 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.83
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
+import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot - A slot for adding calcite-value-list-item elements. List items are displayed as a vertical list.
+ * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
 export class ValueList {
@@ -128,12 +128,13 @@ export class ValueList {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   // --------------------------------------------------------------------------
   //
@@ -182,7 +183,11 @@ export class ValueList {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -422,7 +427,10 @@ export class ValueList {
       "complexType": {
         "signature": "(focusId?: ListFocusId) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -438,7 +446,10 @@ export class ValueList {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }
@@ -462,14 +473,14 @@ export class ValueList {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemPropsChange",
-      "method": "calciteListItemPropsChangeHandler",
+      "name": "calciteInternalListItemPropsChange",
+      "method": "calciteInternalListItemPropsChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemValueChange",
-      "method": "calciteListItemValueChangeHandler",
+      "name": "calciteInternalListItemValueChange",
+      "method": "calciteInternalListItemValueChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/value-list-item/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-beta.82
+ * v1.0.0-beta.83
  */
 export const ICONS = {
   drag: "drag"

package/dist/collection/components/value-list-item/value-list-item.css

@@ -122,9 +122,7 @@ calcite-pick-list-item {
   padding-right: 0.25rem;
   color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);

package/dist/collection/components/value-list-item/value-list-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-beta.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -23,7 +23,7 @@ export class ValueListItem {
      */
     this.disabled = false;
     /**
-     * @internal When false, the list item cannot be deselected by user interaction.
+     * @internal
      */
     this.disableDeselect = false;
     /**
@@ -31,11 +31,12 @@ export class ValueListItem {
      */
     this.nonInteractive = false;
     /**
-     * @internal - Stores the activated state of the drag handle.
+     * @internal
      */
     this.handleActivated = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
@@ -89,6 +90,8 @@ export class ValueListItem {
   /**
    * Toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.pickListItem.toggleSelected(coerce);
@@ -191,7 +194,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "When false, the list item cannot be deselected by user interaction."
+            "text": undefined
           }],
         "text": ""
       },
@@ -230,7 +233,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "- Stores the activated state of the drag handle."
+            "text": undefined
           }],
         "text": ""
       },
@@ -375,7 +378,10 @@ export class ValueListItem {
       "complexType": {
         "signature": "(coerce?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "coerce"
+              }],
             "text": ""
           }],
         "references": {
@@ -387,7 +393,10 @@ export class ValueListItem {
       },
       "docs": {
         "text": "Toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "coerce"
+          }]
       }
     },
     "setFocus": {

package/dist/collection/demos/_assets/demo-spacer.js

@@ -0,0 +1,17 @@
+class DemoSpacer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+          <style>
+            :host {
+              display: grid;
+              grid-template-columns: 1fr;
+              grid-gap: ${this.getAttribute("gap") || "12px"};
+            }
+          </style>
+          <slot></slot>
+        `;
+    }
+}
+customElements.define("demo-spacer", DemoSpacer);

package/dist/collection/demos/_assets/demo-template.js

@@ -0,0 +1,13 @@
+const toggleDir = () => {
+    document.dir = document.dir === "rtl" ? "ltr" : "rtl";
+};
+const toggleTheme = () => {
+    document.body.classList.toggle("calcite-theme-dark");
+};
+const loadDemoToggles = () => {
+    document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
+    document.getElementById("demo-heading").textContent = document.title;
+    document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
+    document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
+};
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();

package/dist/collection/demos/_assets/head.js

@@ -0,0 +1,45 @@
+(() => {
+    const DEMO_ROOT = "demos";
+    const ASSETS_PATH = "demos/_assets";
+    const CSS = [`${ASSETS_PATH}/demos.css`, "build/calcite.css"];
+    const urlParams = new URLSearchParams(window.location.search);
+    const DISABLE_HEADER_URL_PARAM = "header-disabled";
+    const SCRIPTS = [
+        {
+            src: "build/calcite.esm.js",
+            type: "module"
+        }
+    ];
+    const parseTemplate = (text) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(text, "text/html");
+        return doc.head.querySelector("template");
+    };
+    const loadHeader = async () => {
+        const root = window.location.pathname.split(DEMO_ROOT).shift();
+        const response = await window.fetch(`${root}${ASSETS_PATH}/demo-template.html`);
+        const text = await response.text();
+        const template = parseTemplate(text);
+        const firstChild = document.body.firstChild;
+        firstChild && document.body.insertBefore(template.content, firstChild);
+    };
+    if (window.location.pathname.includes("/demos/") && !urlParams.has(DISABLE_HEADER_URL_PARAM)) {
+        document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadHeader) : loadHeader();
+    }
+    const ROOT = window.location.pathname.split(DEMO_ROOT).shift();
+    function loadCss(url) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = ROOT + url;
+        document.head.appendChild(link);
+    }
+    function loadScript(script) {
+        const scriptElement = document.createElement("script");
+        Object.keys(script).forEach((key) => {
+            scriptElement[key] = key === "src" ? ROOT + script[key] : script[key];
+        });
+        document.head.appendChild(scriptElement);
+    }
+    CSS.forEach(loadCss);
+    SCRIPTS.forEach(loadScript);
+})();