@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/components/calcite-tree.js

@@ -0,0 +1,216 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { f as focusElement, n as nodeListToArray } from './dom.js';
+import { T as TreeSelectionMode } from './interfaces2.js';
+
+const calciteTreeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;outline:2px solid transparent;outline-offset:2px}";
+
+let CalciteTree$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Display indentation guide lines */
+    this.lines = false;
+    /** Display input
+     * @deprecated use "ancestors" selection-mode for checkbox input
+     */
+    this.inputEnabled = false;
+    /** Specify the scale of the tree, defaults to m */
+    this.scale = "m";
+    /** Customize how tree selection works (single, multi, children, multi-children, ancestors)
+     * @default "single"
+     * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tree/interfaces.ts#L5)
+     */
+    this.selectionMode = TreeSelectionMode.Single;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillRender() {
+    const parent = this.el.parentElement.closest("calcite-tree");
+    this.lines = parent ? parent.lines : this.lines;
+    this.scale = parent ? parent.scale : this.scale;
+    this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
+    this.child = !!parent;
+  }
+  render() {
+    return (h(Host, { "aria-multiselectable": (this.selectionMode === TreeSelectionMode.Multi ||
+        this.selectionMode === TreeSelectionMode.MultiChildren).toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() }, h("slot", null)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  onFocus() {
+    if (!this.child) {
+      const focusTarget = this.el.querySelector("calcite-tree-item[selected]") ||
+        this.el.querySelector("calcite-tree-item");
+      focusElement(focusTarget);
+    }
+  }
+  onFocusIn(event) {
+    const focusedFromRootOrOutsideTree = event.relatedTarget === this.el || !this.el.contains(event.relatedTarget);
+    if (focusedFromRootOrOutsideTree) {
+      this.el.tabIndex = -1;
+    }
+  }
+  onFocusOut(event) {
+    const willFocusOutsideTree = !this.el.contains(event.relatedTarget);
+    if (willFocusOutsideTree) {
+      this.el.tabIndex = this.getRootTabIndex();
+    }
+  }
+  onClick(e) {
+    const target = e.target;
+    const childItems = nodeListToArray(target.querySelectorAll("calcite-tree-item"));
+    if (this.child) {
+      return;
+    }
+    if (!this.child) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (this.selectionMode === TreeSelectionMode.Ancestors && !this.child) {
+      this.updateAncestorTree(e);
+      return;
+    }
+    const shouldSelect = this.selectionMode !== null &&
+      (!target.hasChildren ||
+        (target.hasChildren &&
+          (this.selectionMode === TreeSelectionMode.Children ||
+            this.selectionMode === TreeSelectionMode.MultiChildren)));
+    const shouldModifyToCurrentSelection = e.detail.modifyCurrentSelection &&
+      (this.selectionMode === TreeSelectionMode.Multi ||
+        this.selectionMode === TreeSelectionMode.MultiChildren);
+    const shouldSelectChildren = this.selectionMode === TreeSelectionMode.MultiChildren ||
+      this.selectionMode === TreeSelectionMode.Children;
+    const shouldClearCurrentSelection = !shouldModifyToCurrentSelection &&
+      (((this.selectionMode === TreeSelectionMode.Single ||
+        this.selectionMode === TreeSelectionMode.Multi) &&
+        childItems.length <= 0) ||
+        this.selectionMode === TreeSelectionMode.Children ||
+        this.selectionMode === TreeSelectionMode.MultiChildren);
+    const shouldExpandTarget = this.selectionMode === TreeSelectionMode.Children ||
+      this.selectionMode === TreeSelectionMode.MultiChildren;
+    if (!this.child) {
+      const targetItems = [];
+      if (shouldSelect) {
+        targetItems.push(target);
+      }
+      if (shouldSelectChildren) {
+        childItems.forEach((treeItem) => {
+          targetItems.push(treeItem);
+        });
+      }
+      if (shouldClearCurrentSelection) {
+        const selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
+        selectedItems.forEach((treeItem) => {
+          if (!targetItems.includes(treeItem)) {
+            treeItem.selected = false;
+          }
+        });
+      }
+      if (shouldExpandTarget && !e.detail.forceToggle) {
+        target.expanded = true;
+      }
+      if (shouldModifyToCurrentSelection) {
+        window.getSelection().removeAllRanges();
+      }
+      if ((shouldModifyToCurrentSelection && target.selected) ||
+        (shouldSelectChildren && e.detail.forceToggle)) {
+        targetItems.forEach((treeItem) => {
+          treeItem.selected = false;
+        });
+      }
+      else {
+        targetItems.forEach((treeItem) => {
+          treeItem.selected = true;
+        });
+      }
+    }
+    this.calciteTreeSelect.emit({
+      selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
+    });
+  }
+  updateAncestorTree(e) {
+    const item = e.target;
+    const children = item.querySelectorAll("calcite-tree-item");
+    const ancestors = [];
+    let parent = item.parentElement.closest("calcite-tree-item");
+    while (parent) {
+      ancestors.push(parent);
+      parent = parent.parentElement.closest("calcite-tree-item");
+    }
+    item.selected = !item.selected;
+    item.indeterminate = false;
+    if (children === null || children === void 0 ? void 0 : children.length) {
+      children.forEach((el) => {
+        el.selected = item.selected;
+        el.indeterminate = false;
+      });
+    }
+    if (ancestors) {
+      ancestors.forEach((ancestor) => {
+        const descendants = nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
+        const activeDescendants = descendants.filter((el) => el.selected);
+        if (activeDescendants.length === 0) {
+          ancestor.selected = false;
+          ancestor.indeterminate = false;
+          return;
+        }
+        const indeterminate = activeDescendants.length < descendants.length;
+        ancestor.indeterminate = indeterminate;
+        ancestor.selected = !indeterminate;
+      });
+    }
+    this.calciteTreeSelect.emit({
+      selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  getRootTabIndex() {
+    return !this.child ? 0 : -1;
+  }
+  get el() { return this; }
+  static get style() { return calciteTreeCss; }
+};
+CalciteTree$1 = /*@__PURE__*/ proxyCustomElement(CalciteTree$1, [1, "calcite-tree", {
+    "lines": [1540],
+    "inputEnabled": [4, "input-enabled"],
+    "child": [1540],
+    "scale": [1537],
+    "selectionMode": [1537, "selection-mode"]
+  }, [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteTreeItemSelect", "onClick"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-tree"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tree":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteTree$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTree = CalciteTree$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTree, defineCustomElement };

package/dist/components/calcite-value-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteValueListItem extends Components.CalciteValueListItem, HTMLElement {}
+export const CalciteValueListItem: {
+  prototype: CalciteValueListItem;
+  new (): CalciteValueListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,180 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { I as ICON_TYPES } from './resources3.js';
+import { g as guid } from './guid.js';
+import { S as SLOTS$1, a as CSS, d as defineCustomElement$2 } from './calcite-pick-list-item2.js';
+import { b as getSlotted } from './dom.js';
+import { d as defineCustomElement$5 } from './calcite-action2.js';
+import { d as defineCustomElement$4 } from './calcite-icon2.js';
+import { d as defineCustomElement$3 } from './calcite-loader2.js';
+
+const ICONS = {
+  drag: "drag"
+};
+const SLOTS = {
+  actionsEnd: "actions-end",
+  actionsStart: "actions-start"
+};
+
+const calciteValueListItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1);margin-bottom:1px;display:-ms-flexbox;display:flex;-webkit-box-shadow:0 1px 0 var(--calcite-ui-border-3);box-shadow:0 1px 0 var(--calcite-ui-border-3);-webkit-transition:background-color 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;transition:background-color 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;transition:background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;transition:background-color 150ms ease-in-out, box-shadow 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}calcite-pick-list-item{-webkit-box-shadow:none;box-shadow:none;-ms-flex-positive:1;flex-grow:1;position:relative;margin:0}:host([active]),:host([selected]){-webkit-box-shadow:0 0 0 1px var(--calcite-ui-brand);box-shadow:0 0 0 1px var(--calcite-ui-brand)}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-top:0;padding-bottom:0;padding-left:0.25rem;padding-right:0.25rem;background-color:transparent;border-style:none;color:var(--calcite-ui-text-1);cursor:move;color:var(--calcite-ui-border-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.handle:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.handle:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.handle--activated{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.handle calcite-icon{color:inherit}";
+
+let CalciteValueListItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
+    /**
+     * When true, the item cannot be clicked and is visually muted
+     */
+    this.disabled = false;
+    /**
+     * @internal When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * When true, prevents the content of the list item from user interaction.
+     */
+    this.nonInteractive = false;
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    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/calcite-pick-list/resources.ts#L5)
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    this.pickListItem = null;
+    this.guid = `calcite-value-list-item-${guid()}`;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getPickListRef = (el) => (this.pickListItem = el);
+    this.handleKeyDown = (event) => {
+      if (event.key === " ") {
+        this.handleActivated = !this.handleActivated;
+      }
+    };
+    this.handleBlur = () => {
+      this.handleActivated = false;
+    };
+    this.handleSelectChange = (event) => {
+      this.selected = event.detail.selected;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Used to 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.
+   */
+  async toggleSelected(coerce) {
+    this.pickListItem.toggleSelected(coerce);
+  }
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  calciteListItemChangeHandler(event) {
+    // adjust item payload from wrapped item before bubbling
+    event.detail.item = this.el;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsEnd() {
+    const { el } = this;
+    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
+    return hasActionsEnd ? (h("slot", { name: SLOTS.actionsEnd, slot: SLOTS$1.actionsEnd })) : null;
+  }
+  renderActionsStart() {
+    const { el } = this;
+    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);
+    return hasActionsStart ? (h("slot", { name: SLOTS.actionsStart, slot: SLOTS$1.actionsStart })) : null;
+  }
+  renderHandle() {
+    const { icon } = this;
+    if (icon === ICON_TYPES.grip) {
+      return (h("span", { "aria-pressed": this.handleActivated.toString(), class: {
+          [CSS.handle]: true,
+          [CSS.handleActivated]: this.handleActivated
+        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+    }
+  }
+  render() {
+    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, disableDeselect: this.disableDeselect, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd())));
+  }
+  get el() { return this; }
+  static get style() { return calciteValueListItemCss; }
+};
+CalciteValueListItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteValueListItem$1, [1, "calcite-value-list-item", {
+    "description": [513],
+    "disabled": [516],
+    "disableDeselect": [4, "disable-deselect"],
+    "nonInteractive": [516, "non-interactive"],
+    "handleActivated": [1028, "handle-activated"],
+    "icon": [513],
+    "label": [513],
+    "metadata": [16],
+    "removable": [516],
+    "selected": [1540],
+    "value": [8],
+    "toggleSelected": [64],
+    "setFocus": [64]
+  }, [[0, "calciteListItemChange", "calciteListItemChangeHandler"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-value-list-item", "calcite-action", "calcite-icon", "calcite-loader", "calcite-pick-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-value-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteValueListItem$1);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-pick-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteValueListItem = CalciteValueListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteValueListItem, defineCustomElement };

package/dist/components/calcite-value-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteValueList extends Components.CalciteValueList, HTMLElement {}
+export const CalciteValueList: {
+  prototype: CalciteValueList;
+  new (): CalciteValueList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;