@esri/calcite-components 1.0.0-next.573 → 1.0.0-next.576

package/dist/components/label2.js

@@ -1,101 +1,126 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label.js';
+import { q as queryElementRoots, m as closestElementCrossShadowBoundary } from './dom.js';
 
-const CSS = {
-  container: "container"
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
+const labelClickEvent = "calciteInternalLabelClick";
+const labelConnectedEvent = "calciteInternalLabelConnected";
+const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
+const labelTagName = "calcite-label";
+const onLabelClickMap = new WeakMap();
+const onLabelConnectedMap = new WeakMap();
+const onLabelDisconnectedMap = new WeakMap();
+const unlabeledComponents = new Set();
+const findLabelForComponent = (componentEl) => {
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel ||
+    // labelable components within other custom elements are not considered labelable
+    hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
 };
-
-const labelCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host(:not([disable-spacing])[scale=s]) .container{-webkit-margin-after:var(--calcite-label-margin-bottom, 0.5rem);margin-block-end:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host(:not([disable-spacing])[scale=m]) .container{-webkit-margin-after:var(--calcite-label-margin-bottom, 0.75rem);margin-block-end:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:not([disable-spacing])[scale=l]) .container{-webkit-margin-after:var(--calcite-label-margin-bottom, 1rem);margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;-webkit-margin-before:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-ui-text-1)}:host([layout=default]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.75rem}:host([layout=inline-space-between]) .container{-ms-flex-pack:justify;justify-content:space-between}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([disable-spacing]) .container{margin:0px;gap:0px}";
-
-const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 2);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** specify the text alignment of the label */
-    this.alignment = "start";
-    /**
-     * specify the status of the label and any child input / input messages
-     *
-     * @deprecated set directly on child element instead
-     */
-    this.status = "idle";
-    /** specify the scale of the label, defaults to m */
-    this.scale = "m";
-    /** is the wrapped element positioned inline with the label slotted text */
-    this.layout = "default";
-    /**
-     * is the label disabled
-     *
-     * @deprecated use the `disabled` property on the interactive components instead
-     */
-    this.disabled = false;
-    /**
-     * eliminates any space around the label
-     *
-     * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
-     */
-    this.disableSpacing = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.labelClickHandler = (event) => {
-      this.calciteInternalLabelClick.emit({
-        sourceEvent: event
-      });
-    };
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = (event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  };
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements
+    .filter((el) => el !== componentEl && el !== label)
+    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
+  return ancestorCustomElements.length > 0;
+}
+/**
+ * Helper to set up label interactions on connectedCallback.
+ *
+ * @param component
+ */
+function connectLabel(component) {
+  const labelEl = findLabelForComponent(component.el);
+  if (onLabelClickMap.has(labelEl) || (!labelEl && unlabeledComponents.has(component))) {
+    return;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    document.dispatchEvent(new CustomEvent(labelConnectedEvent));
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  if (labelEl) {
+    component.labelEl = labelEl;
+    const boundOnLabelClick = onLabelClick.bind(component);
+    onLabelClickMap.set(component.labelEl, boundOnLabelClick);
+    component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
   }
-  disconnectedCallback() {
-    document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
+  else if (!unlabeledComponents.has(component)) {
+    boundOnLabelDisconnected();
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
   }
-  render() {
-    return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
+}
+/**
+ * Helper to tear down label interactions on disconnectedCallback on labelable components.
+ *
+ * @param component
+ */
+function disconnectLabel(component) {
+  unlabeledComponents.delete(component);
+  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  onLabelConnectedMap.delete(component);
+  onLabelDisconnectedMap.delete(component);
+  if (!component.labelEl) {
+    return;
   }
-  get el() { return this; }
-  static get style() { return labelCss; }
-}, [1, "calcite-label", {
-    "alignment": [513],
-    "status": [513],
-    "for": [513],
-    "scale": [513],
-    "layout": [513],
-    "disabled": [516],
-    "disableSpacing": [4, "disable-spacing"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
+  const boundOnLabelClick = onLabelClickMap.get(component.labelEl);
+  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
+  onLabelClickMap.delete(component.labelEl);
+}
+/**
+ * Helper to get the label text from a component.
+ *
+ * @param component
+ */
+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) {
+  if (this.disabled) {
     return;
   }
-  const components = ["calcite-label"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-label":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Label);
-      }
-      break;
-  } });
+  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
+  if (containedLabelableChildClicked) {
+    return;
+  }
+  this.onLabelClick(event);
+}
+function onLabelConnected() {
+  if (unlabeledComponents.has(this)) {
+    connectLabel(this);
+  }
+}
+function onLabelDisconnected() {
+  unlabeledComponents.add(this);
+  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+  onLabelConnectedMap.set(this, boundOnLabelConnected);
+  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
 }
-defineCustomElement();
 
-export { Label as L, defineCustomElement as d };
+export { labelDisconnectedEvent as a, connectLabel as c, disconnectLabel as d, getLabelText as g, labelConnectedEvent as l };

package/dist/components/link.js

@@ -1,11 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
-import { b as getElementDir, f as focusElement } from './dom.js';
-import { C as CSS_UTILITY } from './resources.js';
+import { c as getElementDir, C as CSS_UTILITY, f as focusElement } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { d as defineCustomElement$1 } from './icon.js';
 

package/dist/components/loader.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.0.0-next.573
+ * v1.0.0-next.576
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/locale.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.0.0-next.573
+ * v1.0.0-next.576
  */
 import { n as numberKeys } from './key.js';
 

package/dist/components/math.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.0.0-next.573
+ * v1.0.0-next.576
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalPlaces = (value) => {

package/dist/components/observers.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.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/openCloseComponent.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.0.0-next.573
+ * v1.0.0-next.576
  */
 const componentToTransitionListeners = new WeakMap();
 function transitionStart(event) {