@esri/calcite-components 1.3.0-next.0 → 1.3.0-next.10

package/dist/collection/components/chip-group/chip-group.js

@@ -0,0 +1,349 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.3.0-next.10
+ */
+import { h } from "@stencil/core";
+import { focusElementInGroup, toAriaBoolean } from "../../utils/dom";
+import { updateHostInteraction } from "../../utils/interactive";
+import { createObserver } from "../../utils/observers";
+import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+/**
+ * @slot - A slot for adding one or more `calcite-chip`s.
+ */
+export class ChipGroup {
+  constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    //--------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
+    this.items = [];
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.updateItems = (event) => {
+      const target = event ? event.target : this.slotRefEl;
+      this.items = target
+        .assignedElements({ flatten: true })
+        .filter((el) => el?.matches("calcite-chip"));
+      this.items.forEach((el) => {
+        el.interactive = true;
+        el.scale = this.scale;
+        el.selectionMode = this.selectionMode;
+      });
+      this.setSelectedItems(false);
+    };
+    this.setSelectedItems = (emit, elToMatch) => {
+      if (elToMatch) {
+        this.items.forEach((el) => {
+          const matchingEl = elToMatch === el;
+          switch (this.selectionMode) {
+            case "multiple":
+              if (matchingEl) {
+                el.selected = !el.selected;
+              }
+              break;
+            case "single":
+              el.selected = matchingEl ? !el.selected : false;
+              break;
+            case "single-persist":
+              el.selected = !!matchingEl;
+              break;
+          }
+        });
+      }
+      this.selectedItems = this.items.filter((el) => el.selected);
+      if (emit) {
+        this.calciteChipGroupSelect.emit();
+      }
+    };
+    this.disabled = false;
+    this.label = undefined;
+    this.scale = "m";
+    this.selectionMode = "none";
+    this.selectedItems = [];
+  }
+  onSelectionModeChange() {
+    this.updateItems();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalChipKeyEventListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      const interactiveItems = this.items.filter((el) => !el.disabled);
+      switch (event.detail.key) {
+        case "ArrowRight":
+          focusElementInGroup(interactiveItems, event.detail.target, "next");
+          break;
+        case "ArrowLeft":
+          focusElementInGroup(interactiveItems, event.detail.target, "previous");
+          break;
+        case "Home":
+          focusElementInGroup(interactiveItems, event.detail.target, "first");
+          break;
+        case "End":
+          focusElementInGroup(interactiveItems, event.detail.target, "last");
+          break;
+      }
+    }
+  }
+  calciteChipCloseListener(event) {
+    const item = event.target;
+    if (this.items.includes(item)) {
+      if (this.items.indexOf(item) > 0) {
+        focusElementInGroup(this.items, item, "previous");
+      }
+      else if (this.items.indexOf(item) === 0) {
+        focusElementInGroup(this.items, item, "next");
+      }
+      else {
+        focusElementInGroup(this.items, item, "first");
+      }
+    }
+    this.items = this.items.filter((el) => el !== item);
+  }
+  calciteChipSelectListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      this.setSelectedItems(true, event.target);
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Sets focus on the component's first focusable element.
+   */
+  async setFocus() {
+    await componentLoaded(this);
+    if (!this.disabled) {
+      (this.selectedItems[0] || this.items[0])?.setFocus();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
+    return (h("div", { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) })));
+  }
+  static get is() { return "calcite-chip-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  >",
+          "resolved": "\"multiple\" | \"none\" | \"single\" | \"single-persist\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the selection mode of the component."
+        },
+        "attribute": "selection-mode",
+        "reflect": true,
+        "defaultValue": "\"none\""
+      },
+      "selectedItems": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteChipElement[]",
+          "resolved": "HTMLCalciteChipElement[]",
+          "references": {
+            "HTMLCalciteChipElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's selected items."
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteChipGroupSelect",
+        "name": "calciteChipGroupSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits when the component's selection changes."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component's first focusable element.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "selectionMode",
+        "methodName": "onSelectionModeChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "calciteInternalChipKeyEvent",
+        "method": "calciteInternalChipKeyEventListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteChipClose",
+        "method": "calciteChipCloseListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteChipSelect",
+        "method": "calciteChipSelectListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/color-picker/color-picker.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: inline-block;
   font-size: var(--calcite-font-size--2);
@@ -183,7 +187,6 @@
 }
 
 .scope {
-  pointer-events: none;
   position: absolute;
   font-size: var(--calcite-font-size--1);
   outline-color: transparent;

package/dist/collection/components/color-picker/color-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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import Color from "color";
@@ -143,8 +143,6 @@ export class ColorPicker {
         this.captureHueSliderColor(offsetX);
         this.hueScopeNode?.focus();
       }
-      // prevent text selection outside of color field & slider area
-      event.preventDefault();
       document.addEventListener("pointermove", this.globalPointerMoveHandler);
       document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeColorFieldAndSliderRect =

package/dist/collection/components/color-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.3.0-next.0
+ * v1.3.0-next.10
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-picker/utils.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.3.0-next.0
+ * v1.3.0-next.10
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-hex-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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 /**
 * CSS Custom Properties
 *

package/dist/collection/components/combobox/combobox.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h, Host } from "@stencil/core";
 import { debounce } from "lodash-es";
 import { filter } from "../../utils/filter";
 import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
-import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition, updateAfterClose } from "../../utils/floating-ui";
+import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition } from "../../utils/floating-ui";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { guid } from "../../utils/guid";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -196,6 +196,8 @@ export class Combobox {
     };
     this.clickHandler = (event) => {
       if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
+        this.open = false;
+        event.stopPropagation();
         return;
       }
       this.open = !this.open;
@@ -301,6 +303,9 @@ export class Combobox {
       }
     };
     this.comboboxFocusHandler = () => {
+      if (this.disabled) {
+        return;
+      }
       this.textInput?.focus();
     };
     this.comboboxBlurHandler = (event) => {
@@ -336,10 +341,7 @@ export class Combobox {
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
-  openHandler(value) {
-    if (!value) {
-      updateAfterClose(this.floatingEl);
-    }
+  openHandler() {
     if (this.disabled) {
       this.open = false;
       return;
@@ -390,7 +392,7 @@ export class Combobox {
   //
   //--------------------------------------------------------------------------
   documentClickHandler(event) {
-    if (!isPrimaryPointerButton(event)) {
+    if (this.disabled || !isPrimaryPointerButton(event)) {
       return;
     }
     this.setInactiveIfNotContained(event);
@@ -450,7 +452,7 @@ export class Combobox {
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
-      this.openHandler(this.open);
+      this.openHandler();
     }
   }
   async componentWillLoad() {

package/dist/collection/components/combobox/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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/utils.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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";
@@ -25,6 +25,6 @@ export function getDepth(element) {
   if (!Build.isBrowser) {
     return 0;
   }
-  const result = document.evaluate("ancestor::calcite-combobox-item", element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
+  const result = document.evaluate("ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group", element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
   return result.snapshotLength;
 }

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

@@ -87,13 +87,17 @@
 }
 
 :host([disabled]){
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*){
+  pointer-events: none;
+}
+
 .scale--s{
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;

package/dist/collection/components/combobox-item/combobox-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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/combobox-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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.css

@@ -90,8 +90,7 @@
   line-height: 1rem;
   --calcite-combobox-item-spacing-unit-l: 0.5rem;
   --calcite-combobox-item-spacing-unit-s: 0.25rem;
-  --calcite-combobox-item-spacing-indent-1: 0.5rem;
-  --calcite-combobox-item-spacing-indent-2: 1rem;
+  --calcite-combobox-item-spacing-indent: 0.5rem;
 }
 
 .scale--m {
@@ -99,8 +98,7 @@
   line-height: 1rem;
   --calcite-combobox-item-spacing-unit-l: 0.75rem;
   --calcite-combobox-item-spacing-unit-s: 0.5rem;
-  --calcite-combobox-item-spacing-indent-1: 0.75rem;
-  --calcite-combobox-item-spacing-indent-2: 1.5rem;
+  --calcite-combobox-item-spacing-indent: 0.75rem;
 }
 
 .scale--l {
@@ -108,8 +106,7 @@
   line-height: 1.25rem;
   --calcite-combobox-item-spacing-unit-l: 1rem;
   --calcite-combobox-item-spacing-unit-s: 0.75rem;
-  --calcite-combobox-item-spacing-indent-1: 1rem;
-  --calcite-combobox-item-spacing-indent-2: 2rem;
+  --calcite-combobox-item-spacing-indent: 1rem;
 }
 
 :host,
@@ -135,15 +132,10 @@
   color: var(--calcite-ui-text-3);
 }
 
-.label--indent-1 {
-  padding-inline-start: var(--calcite-combobox-item-spacing-indent-1);
-}
-
-.label--indent-2 {
-  padding-inline-start: var(--calcite-combobox-item-spacing-indent-2);
-}
-
 .title {
+  --calcite-combobox-item-indent-value: calc(
+    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
+  );
   border: 0 solid;
   display: block;
   flex: 1 1 0%;
@@ -155,4 +147,5 @@
   border-block-end-color: var(--calcite-ui-border-3);
   padding-block: var(--calcite-combobox-item-spacing-unit-l);
   padding-inline: var(--calcite-combobox-item-spacing-unit-s);
+  margin-inline-start: var(--calcite-combobox-item-indent-value);
 }

package/dist/collection/components/combobox-item-group/combobox-item-group.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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
@@ -34,8 +34,8 @@ export class ComboboxItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { el, scale } = this;
-    const indent = `${CSS.label}--indent-${getDepth(el)}`;
-    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
+    const depth = getDepth(el);
+    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
   }
   static get is() { return "calcite-combobox-item-group"; }
   static get encapsulation() { return "shadow"; }