@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -0,0 +1,266 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import Sortable from "sortablejs";
+import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
+import { CSS, ICON_TYPES } from "./resources";
+import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../pick-list/shared-list-logic";
+import List from "../pick-list/shared-list-render";
+import { getRoundRobinIndex } from "../../utils/array";
+import { createObserver } from "../../utils/observers";
+/**
+ * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
+ * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
+ */
+let ValueList = class ValueList {
+    constructor() {
+        // --------------------------------------------------------------------------
+        //
+        //  Properties
+        //
+        // --------------------------------------------------------------------------
+        /**
+         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+         */
+        this.disabled = false;
+        /**
+         * When true, the items will be sortable via drag and drop.
+         */
+        this.dragEnabled = false;
+        /**
+         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+         */
+        this.filterEnabled = false;
+        /**
+         * When true, content is waiting to be loaded. This state shows a busy indicator.
+         */
+        this.loading = false;
+        /**
+         * Multiple Works similar to standard radio buttons and checkboxes.
+         * When true, a user can select multiple items at a time.
+         * When false, only a single item can be selected at a time
+         * and selecting a new item will deselect any other selected items.
+         */
+        this.multiple = false;
+        /**
+         * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+         */
+        this.selectionFollowsFocus = false;
+        // --------------------------------------------------------------------------
+        //
+        //  Private Properties
+        //
+        // --------------------------------------------------------------------------
+        this.selectedValues = new Map();
+        this.dataForFilter = [];
+        this.lastSelectedItem = null;
+        this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
+        this.setFilterEl = (el) => {
+            this.filterEl = el;
+        };
+        this.deselectRemovedItems = deselectRemovedItems.bind(this);
+        this.deselectSiblingItems = deselectSiblingItems.bind(this);
+        this.selectSiblings = selectSiblings.bind(this);
+        this.handleFilter = handleFilter.bind(this);
+        this.getItemData = getItemData.bind(this);
+        this.keyDownHandler = (event) => {
+            const handleElement = event
+                .composedPath()
+                .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+            const item = event
+                .composedPath()
+                .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+            // Only trigger keyboard sorting when the internal drag handle is focused and activated
+            if (!handleElement || !item.handleActivated) {
+                keyDownHandler.call(this, event);
+                return;
+            }
+            const { items } = this;
+            if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
+                return;
+            }
+            event.preventDefault();
+            const { el } = this;
+            const moveOffset = event.key === "ArrowDown" ? 1 : -1;
+            const currentIndex = items.indexOf(item);
+            const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+            if (nextIndex === items.length - 1) {
+                el.appendChild(item);
+            }
+            else {
+                const itemAtNextIndex = el.children[nextIndex];
+                const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+                    ? itemAtNextIndex.nextElementSibling
+                    : itemAtNextIndex;
+                el.insertBefore(item, insertionReferenceItem);
+            }
+            this.items = this.getItems();
+            this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
+            requestAnimationFrame(() => handleElement.focus());
+            item.handleActivated = true;
+        };
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        initialize.call(this);
+        initializeObserver.call(this);
+    }
+    componentDidLoad() {
+        this.setUpDragAndDrop();
+    }
+    disconnectedCallback() {
+        cleanUpObserver.call(this);
+        this.cleanUpDragAndDrop();
+    }
+    calciteListItemRemoveHandler(event) {
+        removeItem.call(this, event);
+    }
+    calciteListItemChangeHandler(event) {
+        calciteListItemChangeHandler.call(this, event);
+    }
+    calciteListItemPropsChangeHandler(event) {
+        event.stopPropagation();
+        this.setUpFilter();
+    }
+    calciteListItemValueChangeHandler(event) {
+        calciteListItemValueChangeHandler.call(this, event);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    getItems() {
+        return Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+    }
+    setUpItems() {
+        setUpItems.call(this, "calcite-value-list-item");
+    }
+    setUpFilter() {
+        if (this.filterEnabled) {
+            this.dataForFilter = this.getItemData();
+        }
+    }
+    setUpDragAndDrop() {
+        this.cleanUpDragAndDrop();
+        if (!this.dragEnabled) {
+            return;
+        }
+        this.sortable = Sortable.create(this.el, {
+            dataIdAttr: "id",
+            handle: `.${CSS.handle}`,
+            draggable: "calcite-value-list-item",
+            group: this.group,
+            onSort: () => {
+                this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+                const values = this.items.map((item) => item.value);
+                this.calciteListOrderChange.emit(values);
+            }
+        });
+    }
+    cleanUpDragAndDrop() {
+        var _a;
+        (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.sortable = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Returns the currently selected items */
+    async getSelectedItems() {
+        return this.selectedValues;
+    }
+    /** Sets focus on the component. */
+    async setFocus(focusId) {
+        return setFocus.call(this, focusId);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    getIconType() {
+        let type = null;
+        if (this.dragEnabled) {
+            type = ICON_TYPES.grip;
+        }
+        return type;
+    }
+    render() {
+        return h(List, { onKeyDown: this.keyDownHandler, props: this });
+    }
+};
+__decorate([
+    Prop({ reflect: true })
+], ValueList.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], ValueList.prototype, "dragEnabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], ValueList.prototype, "filterEnabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], ValueList.prototype, "filterPlaceholder", void 0);
+__decorate([
+    Prop()
+], ValueList.prototype, "group", void 0);
+__decorate([
+    Prop({ reflect: true })
+], ValueList.prototype, "loading", void 0);
+__decorate([
+    Prop({ reflect: true })
+], ValueList.prototype, "multiple", void 0);
+__decorate([
+    Prop()
+], ValueList.prototype, "selectionFollowsFocus", void 0);
+__decorate([
+    State()
+], ValueList.prototype, "selectedValues", void 0);
+__decorate([
+    State()
+], ValueList.prototype, "dataForFilter", void 0);
+__decorate([
+    Element()
+], ValueList.prototype, "el", void 0);
+__decorate([
+    Event()
+], ValueList.prototype, "calciteListChange", void 0);
+__decorate([
+    Event()
+], ValueList.prototype, "calciteListOrderChange", void 0);
+__decorate([
+    Listen("calciteListItemRemove")
+], ValueList.prototype, "calciteListItemRemoveHandler", null);
+__decorate([
+    Listen("calciteListItemChange")
+], ValueList.prototype, "calciteListItemChangeHandler", null);
+__decorate([
+    Listen("calciteListItemPropsChange")
+], ValueList.prototype, "calciteListItemPropsChangeHandler", null);
+__decorate([
+    Listen("calciteListItemValueChange")
+], ValueList.prototype, "calciteListItemValueChangeHandler", null);
+__decorate([
+    Method()
+], ValueList.prototype, "getSelectedItems", null);
+__decorate([
+    Method()
+], ValueList.prototype, "setFocus", null);
+ValueList = __decorate([
+    Component({
+        tag: "calcite-value-list",
+        styleUrl: "value-list.scss",
+        shadow: true
+    })
+], ValueList);
+export { ValueList };

package/dist/collection/utils/conditionalSlot.js

@@ -3,24 +3,35 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { forceUpdate } from "@stencil/core";
-const slotChangedMap = new WeakMap();
-function onSlotChange() {
-  forceUpdate(this);
-}
-const eventType = "slotchange";
+import { createObserver } from "./observers";
+const observed = new Set();
+let mutationObserver;
+const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
  */
 export function connectConditionalSlotComponent(component) {
-  const boundSlotChange = onSlotChange.bind(component);
-  component.el.shadowRoot.addEventListener(eventType, boundSlotChange);
-  slotChangedMap.set(component, boundSlotChange);
+  if (!mutationObserver) {
+    mutationObserver = createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(component.el, observerOptions);
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
  */
 export function disconnectConditionalSlotComponent(component) {
-  const boundSlotChange = slotChangedMap.get(component);
-  component.el.shadowRoot.removeEventListener(eventType, boundSlotChange);
-  slotChangedMap.delete(component);
+  observed.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element] of observed.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    forceUpdate(target);
+  });
 }

package/dist/collection/utils/dom.js

@@ -21,7 +21,8 @@ export function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
 export function getThemeName(el) {
-  return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
+  const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
+  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
 }
 export function getElementDir(el) {
   const prop = "dir";
@@ -40,10 +41,14 @@ export function getRootNode(el) {
 export function getHost(root) {
   return root.host || null;
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
+/**
+ * This helper queries an element's rootNodes and any ancestor rootNodes.
+ *
+ * @returns {Element[]} The elements.
+ */
 export function queryElementsRoots(element, selector) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFromAll(el, allResults) {
     if (!el) {
       return allResults;
@@ -60,10 +65,16 @@ export function queryElementsRoots(element, selector) {
   }
   return queryFromAll(element, []);
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
-export function queryElementRoots(element, selector) {
+/**
+ * This helper queries an element's rootNode and any ancestor rootNodes.
+ *
+ * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
+ *
+ * @returns {Element} The element.
+ */
+export function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFrom(el) {
     if (!el) {
       return null;
@@ -72,7 +83,11 @@ export function queryElementRoots(element, selector) {
       el = el.assignedSlot;
     }
     const rootNode = getRootNode(el);
-    const found = rootNode.querySelector(selector);
+    const found = id
+      ? rootNode.getElementById(id)
+      : selector
+        ? rootNode.querySelector(selector)
+        : null;
     const host = getHost(rootNode);
     return found ? found : host ? queryFrom(host) : null;
   }
@@ -94,16 +109,31 @@ export async function focusElement(el) {
   }
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
+const defaultSlotSelector = ":not([slot])";
 export function getSlotted(element, slotName, options) {
-  const slotSelector = `[slot="${slotName}"]`;
+  if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
+    options = slotName;
+    slotName = null;
+  }
+  const slotSelector = slotName
+    ? Array.isArray(slotName)
+      ? slotName.map((name) => `[slot="${name}"]`).join(",")
+      : `[slot="${slotName}"]`
+    : defaultSlotSelector;
   if (options === null || options === void 0 ? void 0 : options.all) {
     return queryMultiple(element, slotSelector, options);
   }
   return querySingle(element, slotSelector, options);
 }
+function getDirectChildren(el, selector) {
+  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+}
 function queryMultiple(element, slotSelector, options) {
-  let matches = Array.from(element.querySelectorAll(slotSelector));
+  let matches = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)
+    : Array.from(element.querySelectorAll(slotSelector));
   matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
+  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector
     ? matches
@@ -113,10 +143,13 @@ function queryMultiple(element, slotSelector, options) {
     : matches;
 }
 function querySingle(element, slotSelector, options) {
-  let match = element.querySelector(slotSelector);
+  let match = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)[0] || null
+    : element.querySelector(slotSelector);
   match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
+  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
-  return selector ? match.querySelector(selector) : match;
+  return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
 }
 export function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));

package/dist/collection/utils/globalAttributes.js

@@ -0,0 +1,59 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createObserver } from "./observers";
+const allowedGlobalAttributes = ["lang"];
+const elementToComponentAndObserverOptionsMap = new Map();
+let mutationObserver;
+function updateGlobalAttributes(component, attributeFilter) {
+  const { el } = component;
+  const updatedAttributes = {};
+  attributeFilter
+    .filter((attr) => !!allowedGlobalAttributes.includes(attr) && !!el.hasAttribute(attr))
+    .forEach((attr) => {
+    const value = el.getAttribute(attr);
+    if (value !== null) {
+      updatedAttributes[attr] = value;
+    }
+  });
+  component.globalAttributes = updatedAttributes;
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    const [component, options] = elementToComponentAndObserverOptionsMap.get(target);
+    updateGlobalAttributes(component, options.attributeFilter);
+  });
+}
+/**
+ * Helper to set up listening for changes to global attributes.
+ *
+ * render(): VNode {
+ *   const lang = this.inheritedAttributes['lang'] ?? 'en';
+ *   return <div>My lang is {lang}</div>;
+ * }
+ */
+export function watchGlobalAttributes(component, attributeFilter) {
+  const { el } = component;
+  const observerOptions = { attributeFilter };
+  elementToComponentAndObserverOptionsMap.set(el, [component, observerOptions]);
+  updateGlobalAttributes(component, attributeFilter);
+  if (!mutationObserver) {
+    mutationObserver = createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(el, observerOptions);
+}
+/**
+ * Helper remove listening for changes to inherited attributes.
+ */
+export function unwatchGlobalAttributes(component) {
+  elementToComponentAndObserverOptionsMap.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element, [, observerOptions]] of elementToComponentAndObserverOptionsMap.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}

package/dist/collection/utils/label.js

@@ -12,7 +12,7 @@ const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
   const { id } = componentEl;
-  const forLabel = id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`);
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
   if (forLabel) {
     return forLabel;
   }
@@ -72,6 +72,9 @@ export function getLabelText(component) {
   return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
 }
 function onLabelClick(event) {
+  if (this.disabled) {
+    return;
+  }
   const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
   if (containedLabelableChildClicked) {
     return;

package/dist/collection/utils/locale.js

@@ -2,9 +2,10 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { sanitizeDecimalString } from "./number";
+import { sanitizeDecimalString, sanitizeExponentialNumberString } from "./number";
 export const locales = [
   "ar",
+  "bg",
   "bs",
   "ca",
   "cs",
@@ -60,23 +61,25 @@ function createLocaleNumberFormatter(locale) {
   });
 }
 export function delocalizeNumberString(numberString, locale) {
-  if (numberString) {
-    const groupSeparator = getGroupSeparator(locale);
-    const decimalSeparator = getDecimalSeparator(locale);
-    const splitNumberString = numberString.split("");
-    const decimalIndex = splitNumberString.lastIndexOf(decimalSeparator);
-    const delocalizedNumberString = splitNumberString
-      .map((value, index) => {
-      if (value === groupSeparator || (value === decimalSeparator && index !== decimalIndex)) {
-        return "";
-      }
-      return value;
-    })
-      .reduce((string, part) => string + part)
-      .replace(decimalSeparator, ".");
-    return isNaN(Number(delocalizedNumberString)) ? numberString : delocalizedNumberString;
-  }
-  return numberString;
+  return sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
+    if (nonExpoNumString) {
+      const groupSeparator = getGroupSeparator(locale);
+      const decimalSeparator = getDecimalSeparator(locale);
+      const splitNumberString = nonExpoNumString.split("");
+      const decimalIndex = splitNumberString.lastIndexOf(decimalSeparator);
+      const delocalizedNumberString = splitNumberString
+        .map((value, index) => {
+        if (value === groupSeparator || (value === decimalSeparator && index !== decimalIndex)) {
+          return "";
+        }
+        return value;
+      })
+        .reduce((string, part) => string + part)
+        .replace(decimalSeparator, ".");
+      return isNaN(Number(delocalizedNumberString)) ? nonExpoNumString : delocalizedNumberString;
+    }
+    return nonExpoNumString;
+  });
 }
 export function getGroupSeparator(locale) {
   const formatter = createLocaleNumberFormatter(locale);
@@ -91,25 +94,27 @@ export function getDecimalSeparator(locale) {
   return value.trim().length === 0 ? " " : value;
 }
 export function localizeNumberString(numberString, locale, displayGroupSeparator = false) {
-  if (numberString) {
-    const number = Number(sanitizeDecimalString(numberString));
-    if (!isNaN(number)) {
-      const formatter = createLocaleNumberFormatter(locale);
-      const parts = formatter.formatToParts(number);
-      const localizedNumberString = parts
-        .map(({ type, value }) => {
-        switch (type) {
-          case "group":
-            return displayGroupSeparator ? getGroupSeparator(locale) : "";
-          case "decimal":
-            return getDecimalSeparator(locale);
-          default:
-            return value;
-        }
-      })
-        .reduce((string, part) => string + part);
-      return localizedNumberString;
+  return sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
+    if (nonExpoNumString) {
+      const number = Number(sanitizeDecimalString(nonExpoNumString));
+      if (!isNaN(number)) {
+        const formatter = createLocaleNumberFormatter(locale);
+        const parts = formatter.formatToParts(number);
+        const localizedNumberString = parts
+          .map(({ type, value }) => {
+          switch (type) {
+            case "group":
+              return displayGroupSeparator ? getGroupSeparator(locale) : "";
+            case "decimal":
+              return getDecimalSeparator(locale);
+            default:
+              return value;
+          }
+        })
+          .reduce((string, part) => string + part);
+        return localizedNumberString;
+      }
+      return nonExpoNumString;
     }
-  }
-  return numberString;
+  });
 }