@esri/calcite-components 5.0.2 → 5.0.3-next.1

package/dist/components/calcite-sheet/customElement.js

@@ -5,10 +5,11 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { A as ensureId, g as getElementDir, a as getStylePixelValue } from "../../chunks/dom.js";
+import { z as ensureId, g as getElementDir, a as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
+import { a as ariaValueFromSize } from "../../chunks/aria.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
@@ -70,7 +71,10 @@ class Sheet extends LitElement {
       getBounds: () => ({
         inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
         block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
-      })
+      }),
+      onResize: (resizeValues) => {
+        this.resizeValues = { ...resizeValues };
+      }
     });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
@@ -222,16 +226,7 @@ class Sheet extends LitElement {
     if (!this.contentRef.value) {
       return;
     }
-    const appliedSize = this.sizeOverride.resize(size);
-    this.resizeValues = {
-      ...this.resizeValues,
-      ...appliedSize.inline !== void 0 && {
-        inlineSize: appliedSize.inline
-      },
-      ...appliedSize.block !== void 0 && {
-        blockSize: appliedSize.block
-      }
-    };
+    this.sizeOverride.resize(size);
   }
   cleanupInteractions() {
     this.interaction?.unset();
@@ -247,7 +242,12 @@ class Sheet extends LitElement {
       return;
     }
     await this.el.componentOnReady();
-    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentRef.value);
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    this.resizeValues.minInlineSize = parseInt(computedStyle.minInlineSize) || 0;
+    this.resizeValues.maxInlineSize = parseInt(computedStyle.maxInlineSize) || window.innerWidth;
+    this.resizeValues.minBlockSize = parseInt(computedStyle.minBlockSize) || 0;
+    this.resizeValues.maxBlockSize = parseInt(computedStyle.maxBlockSize) || window.innerHeight;
+    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = computedStyle;
     const values = {
       inlineSize: getStylePixelValue(inlineSize),
       blockSize: getStylePixelValue(blockSize),
@@ -256,7 +256,6 @@ class Sheet extends LitElement {
       maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
       maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
     };
-    this.resizeValues = values;
     const rtl = getElementDir(el) === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
@@ -332,7 +331,7 @@ class Sheet extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
       [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
+    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
   }
 }
 customElement("calcite-sheet", Sheet);

package/dist/components/calcite-shell-panel/customElement.js

@@ -7,6 +7,7 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as getElementDir, a as getStylePixelValue, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
+import { a as ariaValueFromSize } from "../../chunks/aria.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const styles$1 = css`.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@keyframes in{0%{opacity:0}to{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0,-5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(.95,.95,1)}to{opacity:1;transform:scaleZ(1)}}`;
 const CSS = {
@@ -42,7 +43,10 @@ class ShellPanel extends LitElement {
       getBounds: () => ({
         inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
         block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
-      })
+      }),
+      onResize: (resizeValues) => {
+        this.resizeValues = resizeValues;
+      }
     });
     this.resizeValues = {
       inlineSize: null,
@@ -96,16 +100,7 @@ class ShellPanel extends LitElement {
     if (!this.contentRef.value) {
       return;
     }
-    const appliedSize = this.sizeOverride.resize(size);
-    this.resizeValues = {
-      ...this.resizeValues,
-      ...appliedSize.inline !== void 0 && {
-        inlineSize: appliedSize.inline
-      },
-      ...appliedSize.block !== void 0 && {
-        blockSize: appliedSize.block
-      }
-    };
+    this.sizeOverride.resize(size);
   }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
@@ -232,7 +227,8 @@ class ShellPanel extends LitElement {
   render() {
     const { collapsed, position, resizable, layout, displayMode, resizeValues } = this;
     const dir = getElementDir(this.el);
-    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${layout === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${layout == "horizontal" ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${layout == "horizontal" ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${layout == "horizontal" ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
+    const isBlockPosition = layout === "horizontal";
+    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
     const getAnimationDir = () => {
       if (layout === "horizontal") {
         return position === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp;

package/dist/components/calcite-slider/customElement.js

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as guid } from "../../chunks/guid.js";
-import { k as isPrimaryPointerButton, y as intersects } from "../../chunks/dom.js";
+import { k as isPrimaryPointerButton, x as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";

package/dist/components/calcite-tab-nav/customElement.js

@@ -5,7 +5,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../../chunks/core.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, B as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
+import { g as getElementDir, A as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {

package/dist/components/calcite-tab-title/customElement.js

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { o as nodeListToArray, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
+import { o as nodeListToArray, g as getElementDir } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";

package/dist/components/calcite-tabs/customElement.js

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { b as slotChangeGetAssignedElements, C as getSlotAssignedElements } from "../../chunks/dom.js";
+import { b as slotChangeGetAssignedElements, B as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
 };

package/dist/components/calcite-tooltip/customElement.js

@@ -8,7 +8,7 @@ import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { q as queryElementRoots, D as getShadowRootNode } from "../../chunks/dom.js";
+import { q as queryElementRoots, C as getShadowRootNode } from "../../chunks/dom.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container"

package/dist/components/calcite-tree/customElement.js

@@ -2,7 +2,8 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
-import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements, t as toAriaBoolean } from "../../chunks/dom.js";
+import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 function isTreeItem(element) {
   return element?.tagName === "CALCITE-TREE-ITEM";
 }

package/dist/components/calcite-tree-item/customElement.js

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { B as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
+import { A as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {