@esri/calcite-components 5.2.0-next.31 → 5.2.0-next.32

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

@@ -3,7 +3,8 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, g as getStylePixelValue } from "../../chunks/dom.js";
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:var(--calcite-shell-corner-radius);box-shadow:var(--calcite-shell-shadow)}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}.main.has-resizable-panel-top ::slotted(calcite-panel){border-block-start:none}.main.has-resizable-panel-bottom ::slotted(calcite-panel){border-block-end:none}.main.has-action-bar-position-panel ::slotted(calcite-panel){border:0}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   main: "main",
@@ -33,6 +34,11 @@ const panelSlots = ["panel-start", "panel-end", "panel-top", "panel-bottom"];
 class Shell extends LitElement {
   constructor() {
     super();
+    this.defaultSlotRef = createRef();
+    this.panelBottomSlotRef = createRef();
+    this.panelEndSlotRef = createRef();
+    this.panelStartSlotRef = createRef();
+    this.panelTopSlotRef = createRef();
     this.panelSlotState = {
       "panel-start": { elements: [], resizable: false },
       "panel-end": { elements: [], resizable: false },
@@ -108,9 +114,70 @@ class Shell extends LitElement {
       el.embedded = true;
     });
   }
+  configurePanels(panels, layout, position) {
+    panels.forEach((panel) => {
+      const sizingPanel = panel;
+      panel.layout = layout;
+      panel.position = position;
+      sizingPanel.shellSizingDataProvider = (axis) => this.getShellPanelSizingData(panel, axis);
+    });
+  }
+  getDefaultSlotMinSize(axis) {
+    return this.defaultSlotRef.value?.assignedElements({ flatten: true }).reduce((total, element) => {
+      const computedStyle = window.getComputedStyle(element);
+      return axis === "inline" ? total + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : total + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+    }, 0) ?? 0;
+  }
+  getDefaultSlotBounds() {
+    const defaultSlotElements = this.defaultSlotRef.value?.assignedElements({ flatten: true }) ?? [];
+    if (!defaultSlotElements.length) {
+      return null;
+    }
+    return defaultSlotElements.reduce((bounds, element) => {
+      const rect = element.getBoundingClientRect();
+      return bounds ? {
+        bottom: Math.max(bounds.bottom, rect.bottom),
+        left: Math.min(bounds.left, rect.left),
+        right: Math.max(bounds.right, rect.right),
+        top: Math.min(bounds.top, rect.top)
+      } : {
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+        top: rect.top
+      };
+    }, null);
+  }
+  getShellPanelSizingData(panel, axis) {
+    const panelLayoutContainer = panel.assignedSlot?.parentElement;
+    if (!panelLayoutContainer) {
+      return null;
+    }
+    const containerRect = panelLayoutContainer.getBoundingClientRect();
+    const defaultSlotRect = this.getDefaultSlotBounds();
+    if (!defaultSlotRect) {
+      return {
+        availableSize: axis === "inline" ? containerRect.width : containerRect.height
+      };
+    }
+    const defaultSlotMinSize = this.getDefaultSlotMinSize(axis);
+    const isRTL = window.getComputedStyle(this).direction === "rtl";
+    let availableOccupiedSize;
+    if (axis === "inline") {
+      const isStart = panel.position === "start";
+      availableOccupiedSize = isRTL ? isStart ? containerRect.right - defaultSlotRect.left : defaultSlotRect.right - containerRect.left : isStart ? defaultSlotRect.right - containerRect.left : containerRect.right - defaultSlotRect.left;
+    } else {
+      availableOccupiedSize = panel.position === "start" ? defaultSlotRect.bottom - containerRect.top : containerRect.bottom - defaultSlotRect.top;
+    }
+    const availableSize = Math.max(Math.floor(availableOccupiedSize) - Math.ceil(defaultSlotMinSize), 0);
+    return {
+      availableSize
+    };
+  }
   handlePanelTopChange(event) {
     const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelTop = slotChangeHasAssignedElement(event);
+    this.configurePanels(panelElements, "horizontal", "start");
     panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "start";
@@ -120,6 +187,7 @@ class Shell extends LitElement {
   handlePanelBottomChange(event) {
     const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelBottom = slotChangeHasAssignedElement(event);
+    this.configurePanels(panelElements, "horizontal", "end");
     panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "end";
@@ -128,6 +196,7 @@ class Shell extends LitElement {
   }
   handlePanelStartChange(event) {
     const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
+    this.configurePanels(panelElements, "vertical", "start");
     panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "start";
@@ -136,6 +205,7 @@ class Shell extends LitElement {
   }
   handlePanelEndChange(event) {
     const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
+    this.configurePanels(panelElements, "vertical", "end");
     panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "end";
@@ -180,10 +250,10 @@ class Shell extends LitElement {
   }
   renderContent() {
     const { panelIsResizing } = this;
-    const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
+    const defaultSlotNode = keyed("default-slot", html`<slot ${ref(this.defaultSlotRef)}></slot>`);
     const defaultSlotContainerNode = panelIsResizing ? html`<div class=${safeClassMap(CSS.contentNonInteractive)}>${defaultSlotNode}</div>` : defaultSlotNode;
-    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange}></slot>`);
-    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange}></slot>`);
+    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange} ${ref(this.panelBottomSlotRef)}></slot>`);
+    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange} ${ref(this.panelTopSlotRef)}></slot>`);
     const contentContainerKey = "content-container";
     const content = this.contentBehind ? [
       keyed(contentContainerKey, html`<div class=${safeClassMap({
@@ -205,7 +275,7 @@ class Shell extends LitElement {
       [CSS.hasActionBarPositionPanel]: this.hasActionBarPositionPanel,
       [CSS.hasResizablePanelBottom]: this.hasResizablePanelBottom,
       [CSS.hasResizablePanelTop]: this.hasResizablePanelTop
-    })}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange}></slot></div>`;
+    })}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange} ${ref(this.panelStartSlotRef)}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange} ${ref(this.panelEndSlotRef)}></slot></div>`;
   }
   renderPositionedSlots() {
     return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderDialogs()}${this.renderSheets()}</div>`;

package/dist/components/calcite-shell-panel/customElement.d.ts

@@ -78,6 +78,8 @@ export abstract class ShellPanel extends LitElement {
    * @default false
    */
   accessor resizable: boolean;
+  /** @internal */
+  accessor shellSizingDataProvider: ShellSizingDataProvider | undefined;
   /** Specifies the component's width. */
   accessor width: Extract<Width, Scale> | undefined;
   /**
@@ -107,4 +109,11 @@ export abstract class ShellPanel extends LitElement {
     calciteShellPanelCollapse: ShellPanel["calciteShellPanelCollapse"]["detail"];
     calciteShellPanelExpand: ShellPanel["calciteShellPanelExpand"]["detail"];
   };
-}
+}
+
+/** @param axis */
+export type ShellSizingDataProvider = (axis: "inline" | "block") => ShellPanelSizingData | null;
+
+export type ShellPanelSizingData = {
+  availableSize: number;
+};

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

@@ -40,6 +40,7 @@ class ShellPanel extends LitElement {
     super();
     this.direction = useDirection();
     this.resizeHandleRef = createRef();
+    this.actionBars = [];
     this.actionBarContainerResizeObserver = createObserver("resize", () => this.updateActionBarSize());
     this.handleActionBarExpand = () => {
       this.isActionBarExpanded = true;
@@ -48,12 +49,13 @@ class ShellPanel extends LitElement {
       this.isActionBarExpanded = false;
     };
     this.contentRef = createRef();
+    this.containerRef = createRef();
     this.messages = useT9n();
     this.sizeOverride = useSizeOverride({
       targetElement: this.contentRef,
       getBounds: () => ({
-        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
-        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+        inline: { min: this.resizeValues.minInlineSize, max: this.getMaxInlineSize() },
+        block: { min: this.resizeValues.minBlockSize, max: this.getMaxBlockSize() }
       }),
       onResize: (resizeValues) => {
         this.resizeValues = resizeValues;
@@ -85,7 +87,7 @@ class ShellPanel extends LitElement {
     this.listen("calciteActionBarCollapse", this.handleActionBarCollapseEvent);
   }
   static {
-    this.properties = { resizeValues: [16, {}, { state: true }], isActionBarExpanded: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], actionBarPosition: [3, {}, { reflect: true }], collapsed: [7, {}, { reflect: true, type: Boolean }], displayMode: [3, {}, { reflect: true }], heightScale: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], height: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { resizeValues: [16, {}, { state: true }], isActionBarExpanded: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], actionBarPosition: [3, {}, { reflect: true }], collapsed: [7, {}, { reflect: true, type: Boolean }], displayMode: [3, {}, { reflect: true }], heightScale: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], shellSizingDataProvider: [0, {}, { attribute: false }], height: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = [styles, styles$1];
@@ -201,20 +203,85 @@ class ShellPanel extends LitElement {
     this.interaction?.unset();
   }
   updateResizeValues() {
-    const { contentRef } = this;
+    const { contentRef, layout } = this;
     if (!contentRef.value) {
       return;
     }
     const computedStyle = window.getComputedStyle(contentRef.value);
+    const computedMaxInlineSize = getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth;
+    const computedMaxBlockSize = getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight;
+    const availableInlineSize = layout === "vertical" ? this.getAvailableInlineSize() : null;
+    const availableBlockSize = layout === "horizontal" ? this.getAvailableBlockSize() : null;
     this.resizeValues = {
       inlineSize: getStylePixelValue(computedStyle.inlineSize),
       blockSize: getStylePixelValue(computedStyle.blockSize),
       minInlineSize: getStylePixelValue(computedStyle.minInlineSize),
       minBlockSize: getStylePixelValue(computedStyle.minBlockSize),
-      maxInlineSize: getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth,
-      maxBlockSize: getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight
+      maxInlineSize: availableInlineSize === null ? computedMaxInlineSize : Math.min(computedMaxInlineSize, availableInlineSize),
+      maxBlockSize: availableBlockSize === null ? computedMaxBlockSize : Math.min(computedMaxBlockSize, availableBlockSize)
     };
   }
+  getAvailableBlockSize() {
+    return this.getAvailableSize("block");
+  }
+  getAvailableInlineSize() {
+    return this.getAvailableSize("inline");
+  }
+  getAvailableSize(axis) {
+    const dimension = axis === "inline" ? "width" : "height";
+    const shellSizingData = this.shellSizingDataProvider?.(axis);
+    const actionBarContainerSize = this.actionBarContainerEl?.getBoundingClientRect()[dimension] ?? 0;
+    const actionBarSize = Math.max(actionBarContainerSize, this.actionBars.reduce((total, actionBar) => total + actionBar.getBoundingClientRect()[dimension], 0));
+    if (!shellSizingData) {
+      return null;
+    }
+    const { availableSize } = shellSizingData;
+    const containerSpacingSize = this.getContainerSpacingSize(axis);
+    const contentSpacingSize = this.getContentSpacingSize(axis);
+    return Math.max(Math.floor(availableSize) - Math.ceil(actionBarSize) - Math.ceil(containerSpacingSize) - Math.ceil(contentSpacingSize), 0);
+  }
+  getContentSpacingSize(axis) {
+    const content = this.contentRef.value;
+    if (!content) {
+      return 0;
+    }
+    const computedStyle = window.getComputedStyle(content);
+    return axis === "inline" ? getStylePixelValue(computedStyle.marginInlineStart) + getStylePixelValue(computedStyle.marginInlineEnd) + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : getStylePixelValue(computedStyle.marginBlockStart) + getStylePixelValue(computedStyle.marginBlockEnd) + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+  }
+  getContainerSpacingSize(axis) {
+    const container = this.containerRef.value;
+    if (!container) {
+      return 0;
+    }
+    const computedStyle = window.getComputedStyle(container);
+    return axis === "inline" ? getStylePixelValue(computedStyle.marginInlineStart) + getStylePixelValue(computedStyle.marginInlineEnd) + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : getStylePixelValue(computedStyle.marginBlockStart) + getStylePixelValue(computedStyle.marginBlockEnd) + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+  }
+  getMaxBlockSize() {
+    const { layout, contentRef } = this;
+    if (layout !== "horizontal") {
+      return this.resizeValues.maxBlockSize;
+    }
+    if (!contentRef.value) {
+      return this.resizeValues.maxBlockSize;
+    }
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    const cssMax = getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight;
+    const availableBlockSize = this.getAvailableBlockSize();
+    return availableBlockSize === null ? cssMax : Math.min(cssMax, availableBlockSize);
+  }
+  getMaxInlineSize() {
+    const { layout, contentRef } = this;
+    if (layout !== "vertical") {
+      return this.resizeValues.maxInlineSize;
+    }
+    if (!contentRef.value) {
+      return this.resizeValues.maxInlineSize;
+    }
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    const cssMax = getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth;
+    const availableInlineSize = this.getAvailableInlineSize();
+    return availableInlineSize === null ? cssMax : Math.min(cssMax, availableInlineSize);
+  }
   async refreshResize() {
     await this.componentOnReady();
     await this.updateComplete;
@@ -230,7 +297,6 @@ class ShellPanel extends LitElement {
     }
     const rtl = this.direction === "rtl";
     const restrictSizeMin = this.resizeValues.minInlineSize === null || this.resizeValues.minBlockSize === null ? void 0 : { width: this.resizeValues.minInlineSize, height: this.resizeValues.minBlockSize };
-    const restrictSizeMax = this.resizeValues.maxInlineSize === null || this.resizeValues.maxBlockSize === null ? void 0 : { width: this.resizeValues.maxInlineSize, height: this.resizeValues.maxBlockSize };
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "end" && layout === "horizontal" ? resizeHandle : false,
@@ -238,7 +304,7 @@ class ShellPanel extends LitElement {
         bottom: position === "start" && layout === "horizontal" ? resizeHandle : false,
         left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandle : false
       },
-      modifiers: [interact.modifiers.restrictSize({ min: restrictSizeMin, max: restrictSizeMax })],
+      modifiers: [interact.modifiers.restrictSize({ min: restrictSizeMin })],
       listeners: {
         resizestart: () => {
           this.calciteInternalShellPanelResizeStart.emit();
@@ -344,10 +410,7 @@ class ShellPanel extends LitElement {
     if (effectivePosition === "end" || effectivePosition === "bottom") {
       mainNodes.reverse();
     }
-    return html`<div class=${safeClassMap({
-      [CSS.container]: true,
-      [CSS.floatAll]: displayMode === "float-all"
-    })}>${mainNodes}</div>`;
+    return html`<div class=${safeClassMap({ [CSS.container]: true, [CSS.floatAll]: displayMode === "float-all" })} ${ref(this.containerRef)}>${mainNodes}</div>`;
   }
 }
 customElement("calcite-shell-panel", ShellPanel);