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

package/dist/components/resources.js

@@ -0,0 +1,24 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+const CSS = {
+  container: "container",
+  arrow: "arrow",
+  imageContainer: "image-container",
+  closeButton: "close-button",
+  content: "content",
+  hasHeader: "has-header",
+  header: "header",
+  headerContent: "header-content",
+  heading: "heading"
+};
+const TEXT = {
+  close: "Close"
+};
+const POPOVER_REFERENCE = "data-calcite-popover-reference";
+const ARIA_CONTROLS = "aria-controls";
+const ARIA_EXPANDED = "aria-expanded";
+const HEADING_LEVEL = 2;
+
+export { ARIA_EXPANDED as A, CSS as C, HEADING_LEVEL as H, POPOVER_REFERENCE as P, TEXT as T, ARIA_CONTROLS as a };

package/dist/components/resources2.js

@@ -0,0 +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.
+ */
+const CSS = {
+  container: "container",
+  arrow: "arrow"
+};
+const TOOLTIP_DELAY_MS = 500;
+const TOOLTIP_REFERENCE = "data-calcite-tooltip-reference";
+const ARIA_DESCRIBED_BY = "aria-describedby";
+
+export { ARIA_DESCRIBED_BY as A, CSS as C, TOOLTIP_REFERENCE as T, TOOLTIP_DELAY_MS as a };

package/dist/components/resources3.js

@@ -0,0 +1,18 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+const CSS = {
+  sticky: "sticky"
+};
+var ICON_TYPES;
+(function (ICON_TYPES) {
+  ICON_TYPES["circle"] = "circle";
+  ICON_TYPES["square"] = "square";
+  ICON_TYPES["grip"] = "grip";
+})(ICON_TYPES || (ICON_TYPES = {}));
+const SLOTS = {
+  menuActions: "menu-actions"
+};
+
+export { CSS as C, ICON_TYPES as I, SLOTS as S };

package/dist/components/resources4.js

@@ -0,0 +1,32 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+const CSS = {
+  header: "header",
+  heading: "heading",
+  close: "close",
+  container: "container",
+  tipContainer: "tip-container",
+  tipContainerAdvancing: "tip-container--advancing",
+  tipContainerRetreating: "tip-container--retreating",
+  pagination: "pagination",
+  pagePosition: "page-position",
+  pageNext: "page-next",
+  pagePrevious: "page-previous"
+};
+const ICONS = {
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right",
+  close: "x"
+};
+const TEXT = {
+  defaultGroupTitle: "Tips",
+  defaultPaginationLabel: "Tip",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
+};
+const HEADING_LEVEL = 2;
+
+export { CSS as C, HEADING_LEVEL as H, ICONS as I, TEXT as T };

package/dist/components/shared-list-render.js

@@ -0,0 +1,286 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { f as focusElement, b as getSlotted, a as getElementDir } from './dom.js';
+import { g as getRoundRobinIndex } from './array.js';
+import { d as debounce } from './debounce.js';
+import { h, Host } from '@stencil/core/internal/client';
+import { C as CSS, S as SLOTS } from './resources3.js';
+
+function mutationObserverCallback() {
+  this.setUpItems();
+  this.setUpFilter();
+}
+const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
+// --------------------------------------------------------------------------
+//
+//  Lifecycle
+//
+// --------------------------------------------------------------------------
+function initialize() {
+  this.setUpItems();
+  this.setUpFilter();
+  this.emitCalciteListChange = debounce(internalCalciteListChangeEvent.bind(this), 0);
+}
+function initializeObserver() {
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+}
+function cleanUpObserver() {
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+}
+// --------------------------------------------------------------------------
+//
+//  Listeners
+//
+// --------------------------------------------------------------------------
+function calciteListItemChangeHandler(event) {
+  const { selectedValues } = this;
+  const { item, value, selected, shiftPressed } = event.detail;
+  if (selected) {
+    if (this.multiple && shiftPressed) {
+      this.selectSiblings(item);
+    }
+    if (!this.multiple) {
+      this.deselectSiblingItems(item);
+    }
+    selectedValues.set(value, item);
+  }
+  else {
+    selectedValues.delete(value);
+    if (this.multiple && shiftPressed) {
+      this.selectSiblings(item, true);
+    }
+  }
+  if (!this.multiple) {
+    toggleSingleSelectItemTabbing(item, selected);
+    if (selected) {
+      focusElement(item);
+    }
+  }
+  this.lastSelectedItem = item;
+  this.emitCalciteListChange();
+}
+function calciteListItemValueChangeHandler(event) {
+  event.stopPropagation();
+  const oldValue = event.detail.oldValue;
+  const selectedValues = this.selectedValues;
+  if (selectedValues.has(oldValue)) {
+    const item = selectedValues.get(oldValue);
+    selectedValues.delete(oldValue);
+    selectedValues.set(event.detail.newValue, item);
+  }
+}
+// --------------------------------------------------------------------------
+//
+//  Private Methods
+//
+// --------------------------------------------------------------------------
+function isValidNavigationKey(key) {
+  return !!SUPPORTED_ARROW_KEYS.find((k) => k === key);
+}
+function calciteListFocusOutHandler(event) {
+  const { el, items, multiple, selectedValues } = this;
+  if (multiple) {
+    return;
+  }
+  const focusedInside = !!el.contains(event.relatedTarget);
+  if (focusedInside) {
+    toggleSingleSelectItemTabbing(event.target, false);
+    return;
+  }
+  items.forEach((item) => toggleSingleSelectItemTabbing(item, selectedValues.size === 0 ? event.target === item : item.selected));
+}
+function keyDownHandler(event) {
+  const { key, target } = event;
+  if (!isValidNavigationKey(key)) {
+    return;
+  }
+  const { items, multiple, selectionFollowsFocus } = this;
+  const { length: totalItems } = items;
+  const currentIndex = items.indexOf(target);
+  if (!totalItems || currentIndex === -1) {
+    return;
+  }
+  event.preventDefault();
+  const index = getRoundRobinIndex(currentIndex + (key === "ArrowUp" ? -1 : 1), totalItems);
+  const item = items[index];
+  items.forEach((i) => toggleSingleSelectItemTabbing(i, i === item));
+  if (!multiple && selectionFollowsFocus) {
+    item.selected = true;
+  }
+  focusElement(item);
+}
+function internalCalciteListChangeEvent() {
+  this.calciteListChange.emit(this.selectedValues);
+}
+function removeItem(event) {
+  if (event.defaultPrevented) {
+    return;
+  }
+  const item = event.target;
+  const selectedValues = this.selectedValues;
+  if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP") {
+    item.parentElement.remove();
+    Array.from(item.parentElement.children).forEach((item) => selectedValues.delete(item.value));
+  }
+  else {
+    item.remove();
+    selectedValues.delete(item.value);
+  }
+  this.emitCalciteListChange();
+}
+function toggleSingleSelectItemTabbing(item, selectable) {
+  // using attribute intentionally
+  if (selectable) {
+    item.removeAttribute("tabindex");
+  }
+  else {
+    item.setAttribute("tabindex", "-1");
+  }
+}
+async function setFocus(focusId) {
+  if (this.filterEnabled && focusId === "filter") {
+    await focusElement(this.filterEl);
+    return;
+  }
+  const { items, multiple, selectionFollowsFocus } = this;
+  if (items.length === 0) {
+    return;
+  }
+  if (multiple) {
+    return items[0].setFocus();
+  }
+  const focusTarget = items.find((item) => item.selected) || items[0];
+  if (selectionFollowsFocus) {
+    focusTarget.selected = true;
+  }
+  return focusTarget.setFocus();
+}
+function setUpItems(tagName) {
+  this.items = Array.from(this.el.querySelectorAll(tagName));
+  let hasSelected = false;
+  const { items } = this;
+  items.forEach((item) => {
+    item.icon = this.getIconType();
+    if (!this.multiple) {
+      item.disableDeselect = true;
+      toggleSingleSelectItemTabbing(item, false);
+    }
+    if (item.selected) {
+      hasSelected = true;
+      toggleSingleSelectItemTabbing(item, true);
+      this.selectedValues.set(item.value, item);
+    }
+  });
+  const [first] = items;
+  if (!hasSelected && first) {
+    toggleSingleSelectItemTabbing(first, true);
+  }
+}
+function deselectSiblingItems(item) {
+  this.items.forEach((currentItem) => {
+    if (currentItem.value !== item.value) {
+      currentItem.toggleSelected(false);
+      if (this.selectedValues.has(currentItem.value)) {
+        this.selectedValues.delete(currentItem.value);
+      }
+    }
+  });
+}
+function selectSiblings(item, deselect = false) {
+  if (!this.lastSelectedItem) {
+    return;
+  }
+  const { items } = this;
+  const start = items.findIndex((currentItem) => {
+    return currentItem.value === this.lastSelectedItem.value;
+  });
+  const end = items.findIndex((currentItem) => {
+    return currentItem.value === item.value;
+  });
+  items.slice(Math.min(start, end), Math.max(start, end)).forEach((currentItem) => {
+    currentItem.toggleSelected(!deselect);
+    if (!deselect) {
+      this.selectedValues.set(currentItem.value, currentItem);
+    }
+    else {
+      this.selectedValues.delete(currentItem.value);
+    }
+  });
+}
+let groups;
+function handleFilter(event) {
+  const filteredData = event.detail;
+  const values = filteredData.map((item) => item.value);
+  let hasSelectedMatch = false;
+  if (!groups) {
+    groups = new Set();
+  }
+  const matchedItems = this.items.filter((item) => {
+    const parent = item.parentElement;
+    const grouped = parent.matches("calcite-pick-list-group");
+    if (grouped) {
+      groups.add(parent);
+    }
+    const matches = values.includes(item.value);
+    item.hidden = !matches;
+    if (!hasSelectedMatch) {
+      hasSelectedMatch = matches && item.selected;
+    }
+    return matches;
+  });
+  groups.forEach((group) => {
+    const hasAtLeastOneMatch = matchedItems.some((item) => group.contains(item));
+    group.hidden = !hasAtLeastOneMatch;
+    if (!hasAtLeastOneMatch) {
+      return;
+    }
+    const parentItem = getSlotted(group, "parent-item");
+    if (parentItem) {
+      parentItem.hidden = false;
+      if (matchedItems.includes(parentItem)) {
+        Array.from(group.children).forEach((child) => (child.hidden = false));
+      }
+    }
+  });
+  groups.clear();
+  if (matchedItems.length > 0 && !hasSelectedMatch && !this.multiple) {
+    toggleSingleSelectItemTabbing(matchedItems[0], true);
+  }
+}
+function getItemData() {
+  return this.items.map((item) => ({
+    label: item.label,
+    description: item.description,
+    metadata: item.metadata,
+    value: item.value
+  }));
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const List = (_a) => {
+  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, el, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
+  const defaultSlot = h("slot", null);
+  return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
+    h("section", null,
+      h("header", { class: { [CSS.sticky]: true } },
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        h("slot", { name: SLOTS.menuActions })),
+      loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
+      defaultSlot)));
+};
+
+export { List as L, initializeObserver as a, calciteListItemChangeHandler as b, cleanUpObserver as c, deselectSiblingItems as d, calciteListItemValueChangeHandler as e, calciteListFocusOutHandler as f, getItemData as g, handleFilter as h, initialize as i, setUpItems as j, keyDownHandler as k, setFocus as l, mutationObserverCallback as m, removeItem as r, selectSiblings as s };