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

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

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -97,12 +85,20 @@
 }
 
 :host {
+  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: flex;
   box-shadow: 0 1px 0 var(--calcite-ui-border-3);
   transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
 }
 
+:host * {
+  box-sizing: border-box;
+}
+
 calcite-pick-list-item {
   box-shadow: none;
   flex-grow: 1;

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

@@ -65,9 +65,14 @@ export class CalciteValueListItem {
   //  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();
@@ -360,7 +365,7 @@ export class CalciteValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Used to 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": []
       }
     },
@@ -376,7 +381,7 @@ export class CalciteValueListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";
+import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
 const ICONS = {
   chevronsLeft: "chevrons-left",
   chevronsRight: "chevrons-right"
@@ -11,7 +12,7 @@ function getCalcitePosition(position, el) {
 }
 export function toggleChildActionText({ parent, expanded }) {
   queryActions(parent)
-    .filter((el) => el.slot !== "menu-actions")
+    .filter((el) => el.slot !== ACTION_GROUP_SLOTS.menuActions)
     .forEach((action) => (action.textEnabled = expanded));
   parent.querySelectorAll("calcite-action-group").forEach((group) => (group.expanded = expanded));
 }

package/dist/collection/utils/dom.js

@@ -117,9 +117,6 @@ function querySingle(element, slotSelector, options) {
 export function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
 }
-export function hasLabel(labelEl, el) {
-  return labelEl.contains(el);
-}
 // set a default icon from a defined set or allow an override with an icon name string
 export function setRequestedIcon(iconObject, iconValue, matchedValue) {
   if (typeof iconValue === "string" && iconValue !== "") {

package/dist/collection/utils/filter.js

@@ -1,7 +1,7 @@
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
   const escapedValue = escapeRegExp(value);
-  const regex = new RegExp(escapedValue, "ig");
+  const regex = new RegExp(escapedValue, "i");
   if (data.length === 0) {
     console.warn(`No data was passed to the filter function.
     The data argument should be an array of objects`);

package/dist/collection/utils/label.js

@@ -0,0 +1,47 @@
+import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
+const labelTagName = "calcite-label";
+const labelClickEvent = "calciteInternalLabelClick";
+const onLabelClickMap = new WeakMap();
+const findLabelForComponent = (componentEl) => {
+  const id = componentEl.id;
+  return ((id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`)) ||
+    closestElementCrossShadowBoundary(componentEl, labelTagName));
+};
+/**
+ * Helper to set up label interactions on connectedCallback.
+ */
+export function connectLabel(component) {
+  const labelEl = findLabelForComponent(component.el);
+  if (!labelEl) {
+    return;
+  }
+  component.labelEl = labelEl;
+  const boundOnLabelClick = onLabelClick.bind(component);
+  onLabelClickMap.set(component.el, boundOnLabelClick);
+  component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
+}
+/**
+ * Helper to tear down label interactions on disconnectedCallback.
+ */
+export function disconnectLabel(component) {
+  if (!component.labelEl) {
+    return;
+  }
+  const boundOnLabelClick = onLabelClickMap.get(component.el);
+  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
+  onLabelClickMap.delete(component.el);
+}
+/**
+ * Helper to get the label text from a component.
+ */
+export function getLabelText(component) {
+  var _a, _b;
+  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) {
+  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
+  if (containedLabelableChildClicked) {
+    return;
+  }
+  this.onLabelClick(event);
+}

package/dist/collection/utils/observers.js

@@ -0,0 +1,15 @@
+import { Build } from "@stencil/core";
+/**
+ * This utility ensures observers are created only for browser contexts.
+ *
+ * @param type - the type of observer to create
+ * @param callback - the observer callback
+ * @param options - the observer options
+ */
+export function createObserver(type, callback, options) {
+  const Observer = getObserver(type);
+  return Build.isBrowser ? new Observer(callback, options) : undefined;
+}
+function getObserver(type) {
+  return (type === "intersection" ? IntersectionObserver : type === "mutation" ? MutationObserver : ResizeObserver);
+}

package/dist/collection/utils/resources.js

@@ -1,7 +1,24 @@
+const autoTheme = "calcite-theme-auto";
+const darkTheme = "calcite-theme-dark";
+const lightTheme = "calcite-theme-light";
+export const THEMES = [
+  {
+    name: "light",
+    className: lightTheme
+  },
+  {
+    name: "dark",
+    className: darkTheme
+  },
+  {
+    name: "auto",
+    className: autoTheme
+  }
+];
 export const CSS_UTILITY = {
-  autoTheme: "calcite-theme-auto",
-  darkTheme: "calcite-theme-dark",
-  lightTheme: "calcite-theme-light",
+  autoTheme,
+  darkTheme,
+  lightTheme,
   rtl: "calcite--rtl"
 };
 export const TEXT = {

package/dist/custom-elements/bundles/pick-list.js

@@ -1,5 +1,5 @@
-import { CalcitePickList, CalciteFilter, CalciteScrim, CalciteIcon, CalciteLoader, CalcitePickListGroup, CalcitePickListItem, CalciteAction } from "../index";
+import { CalcitePickList, CalciteFilter, CalciteScrim, CalciteInput, CalciteIcon, CalciteLoader, CalcitePickListGroup, CalcitePickListItem, CalciteAction } from "../index";
 import { register } from "../utils";
 register({
-    "calcite-pick-list": CalcitePickList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-pick-list-group": CalcitePickListGroup, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
+    "calcite-pick-list": CalcitePickList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-input": CalciteInput, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-pick-list-group": CalcitePickListGroup, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
 });

package/dist/custom-elements/bundles/value-list.js

@@ -1,5 +1,5 @@
-import { CalciteValueList, CalciteFilter, CalciteScrim, CalciteIcon, CalciteLoader, CalciteValueListItem, CalcitePickListItem, CalciteAction } from "../index";
+import { CalciteValueList, CalciteFilter, CalciteScrim, CalciteInput, CalciteIcon, CalciteLoader, CalciteValueListItem, CalcitePickListItem, CalciteAction } from "../index";
 import { register } from "../utils";
 register({
-    "calcite-value-list": CalciteValueList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-value-list-item": CalciteValueListItem, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
+    "calcite-value-list": CalciteValueList, "calcite-filter": CalciteFilter, "calcite-scrim": CalciteScrim, "calcite-input": CalciteInput, "calcite-icon": CalciteIcon, "calcite-loader": CalciteLoader, "calcite-value-list-item": CalciteValueListItem, "calcite-pick-list-item": CalcitePickListItem, "calcite-action": CalciteAction
 });