@emuanalytics/flow-rdf-ui 4.1.11 → 4.1.13

package/dist/components/panel/panel.component.mjs

@@ -67,8 +67,8 @@ class FlowUiPanel extends FlowRdfElement {
         <slot
           name="header"
           class="panel__header"
-          @flow-ui-expand=${this.expand}
-          @flow-ui-collapse=${this.collapse}
+          @flow-ui-expand=${() => this.expand(false)}
+          @flow-ui-collapse=${() => this.collapse(false)}
         ></slot>
 
         <div class="panel__body-wrapper">

package/dist/components/panel-header/panel-header.component.mjs

@@ -37,13 +37,15 @@ class FlowUiPanelHeader extends FlowRdfElement {
     if (this.fixed) {
       return;
     }
-    this.closed = !this.closed;
-    this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
+    this.toggleButton.toggle();
     this.header.focus();
   }
   handleAccessoryClick(event) {
     event.stopPropagation();
   }
+  handleToggleClick(event) {
+    event.stopPropagation();
+  }
   handleHeaderKeyDown(event) {
     if (this.fixed) {
       return;
@@ -62,8 +64,8 @@ class FlowUiPanelHeader extends FlowRdfElement {
     }
     this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
   }
-  handleToggleButtonExpandCollapse(event) {
-    event.stopPropagation();
+  handleExpandCollapse() {
+    this.closed = this.toggleButton.closed;
   }
   render() {
     return html`
@@ -83,6 +85,8 @@ class FlowUiPanelHeader extends FlowRdfElement {
         @click=${this.handleHeaderClick}
         @keydown=${this.handleHeaderKeyDown}
         title=""
+        @flow-ui-expand=${this.handleExpandCollapse}
+        @flow-ui-collapse=${this.handleExpandCollapse}
       >
         <slot
           name="prefix"
@@ -105,10 +109,10 @@ class FlowUiPanelHeader extends FlowRdfElement {
         ></slot>
         ${this.fixed ? nothing : html`
               <flow-ui-split-view-toggle-button
+                class="panel-header__toggle-button"
                 position="top"
                 ?closed=${this.closed}
-                @flow-ui-expand=${this.handleToggleButtonExpandCollapse}
-                @flow-ui-collapse=${this.handleToggleButtonExpandCollapse}
+                @click=${this.handleToggleClick}
               ></flow-ui-split-view-toggle-button>
             `}
       </div>
@@ -119,6 +123,9 @@ FlowUiPanelHeader.styles = styles;
 __decorateClass([
   query(".panel-header")
 ], FlowUiPanelHeader.prototype, "header", 2);
+__decorateClass([
+  query(".panel-header__toggle-button")
+], FlowUiPanelHeader.prototype, "toggleButton", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiPanelHeader.prototype, "closed", 2);

package/dist/components/split-view/split-view.component.mjs

@@ -199,7 +199,10 @@ class FlowUiSplitView extends FlowRdfElement {
       let sizeDelta = this.sizeToPixels(panel.size) - this.sizeToPixels(panel.closedSize);
       sizeDelta -= this.shrinkPanels(panelIndex + 1, 1, false, sizeDelta);
       if (sizeDelta > 0) {
-        this.shrinkPanels(panelIndex, -1, false, sizeDelta);
+        sizeDelta -= this.shrinkPanels(panelIndex, -1, false, sizeDelta);
+      }
+      if (sizeDelta > 0) {
+        panel.size = "auto";
       }
     }
   }
@@ -334,20 +337,28 @@ class FlowUiSplitView extends FlowRdfElement {
       return panelSize;
     });
     const totalFixedSize = panelSizes.filter((size) => typeof size === "number").reduce((a, b) => a + b, 0);
-    let availableFlexSize = splitViewSize - totalFixedSize;
-    let numAutoPanels = panelSizes.filter((size) => size === "auto").length;
-    for (const [i, panelSize] of panelSizes.entries()) {
+    const autoPanels = panelSizes.reduce((accum, panelSize, index) => {
       if (panelSize === "auto") {
-        const panelPixelSize = clamp(
-          availableFlexSize / numAutoPanels,
-          this.sizeToPixels(this._panels[i].minSize ?? "0px"),
-          this.sizeToPixels(this._panels[i].maxSize ?? "100%")
-        );
-        panelSizes[i] = panelPixelSize;
-        availableFlexSize -= panelPixelSize;
-        numAutoPanels--;
+        accum.push({ panelIndex: index, size: 0 });
       }
+      return accum;
+    }, []);
+    let availableFlexSize = splitViewSize - totalFixedSize;
+    let layoutIteration = 0;
+    while (availableFlexSize > 0 && layoutIteration < 5) {
+      availableFlexSize = this.layoutAutoPanels(autoPanels, availableFlexSize, layoutIteration === 0);
+      layoutIteration++;
     }
+    autoPanels.forEach((panelInfo) => {
+      panelSizes[panelInfo.panelIndex] = panelInfo.size;
+    });
+    const totalLayoutSize = panelSizes.reduce((a, b) => isNumber(a) && isNumber(b) ? a + b : a, 0);
+    if (totalLayoutSize > splitViewSize) {
+      console.warn(
+        `Total panel size (${totalLayoutSize}px) exceeds split view size (${splitViewSize}px). This may lead to unexpected layout issues.`
+      );
+    }
+    this.positions = panelSizes.map((size) => size + "px");
     for (const panel of this._panels) {
       panel.divider = !panel.hidden;
     }
@@ -355,7 +366,37 @@ class FlowUiSplitView extends FlowRdfElement {
     if (lastVisiblePanel) {
       lastVisiblePanel.divider = false;
     }
-    this.positions = panelSizes.map((size) => size + "px");
+  }
+  layoutAutoPanels(autoPanels, totalAutoSize, initialize = false) {
+    if (autoPanels?.length === 0) {
+      return totalAutoSize;
+    }
+    if (initialize) {
+      autoPanels.forEach((panelInfo) => {
+        const panel = this._panels[panelInfo.panelIndex];
+        const minSize = this.sizeToPixels(panel.minSize ?? "0px");
+        panelInfo.size = minSize;
+        totalAutoSize -= minSize;
+      });
+    }
+    const expandableAutoPanels = autoPanels.filter((panelInfo) => {
+      const panel = this._panels[panelInfo.panelIndex];
+      const panelMaxSize = this.sizeToPixels(panel.maxSize ?? "100%");
+      return panelInfo.size < panelMaxSize;
+    });
+    if (expandableAutoPanels.length > 0) {
+      const autoSizePerPanel = totalAutoSize / expandableAutoPanels.length;
+      let allocatedSize = 0;
+      expandableAutoPanels.forEach((panelInfo) => {
+        const panel = this._panels[panelInfo.panelIndex];
+        const panelMaxSize = this.sizeToPixels(panel.maxSize ?? "100%");
+        const newSize = Math.min(panelInfo.size + autoSizePerPanel, panelMaxSize);
+        allocatedSize += newSize - panelInfo.size;
+        panelInfo.size = newSize;
+      });
+      totalAutoSize -= allocatedSize;
+    }
+    return totalAutoSize;
   }
   resizePanels() {
     const boundingRect = this.splitView.getBoundingClientRect();

package/dist/components/split-view-divider/split-view-divider.component.mjs

@@ -63,6 +63,8 @@ class FlowUiSplitViewDivider extends FlowRdfElement {
     function __closestFrom(el) {
       if (!el || el === document || el === window)
         return null;
+      if (el.matches(selector))
+        return el;
       if (el.assignedSlot)
         el = el.assignedSlot;
       const found = el.closest(selector);

package/dist/components/split-view-pane/split-view-pane.component.mjs

@@ -3,9 +3,9 @@ import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { boolean } from '../../internal/boolean.mjs';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { isStringFull } from '../../internal/type-checks.mjs';
 import { setDefaultAnimation } from '../../utilities/animation-registry.mjs';
 import styles from './split-view-pane.styles.mjs';
-import { isStringFull } from '../../internal/type-checks.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -74,8 +74,14 @@ class FlowUiSplitViewPane extends FlowRdfElement {
       "split-view-pane--hidden": this.hidden,
       "split-view-pane--closed": this.closed
     })}
-        @flow-ui-expand=${this.expand}
-        @flow-ui-collapse=${this.collapse}
+        @flow-ui-expand=${(ev) => {
+      ev.stopPropagation();
+      this.expand();
+    }}
+        @flow-ui-collapse=${(ev) => {
+      ev.stopPropagation();
+      this.collapse();
+    }}
       >
         <div part="contents" class="split-view-pane__contents">
           <slot></slot>

package/dist/components/split-view-toggle-button/split-view-toggle-button.component.mjs

@@ -45,15 +45,22 @@ class FlowUiSplitViewToggleButton extends FlowUiIconButton {
       this.parentPanelObserver = null;
     }
   }
+  toggle(emitEvents = true) {
+    this.closed = !this.closed;
+    if (emitEvents) {
+      this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
+    }
+  }
   handleClick(event) {
     super.handleClick(event);
-    this.closed = !this.closed;
-    this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
+    this.toggle();
   }
   closestElement(selector, base = this) {
     function __closestFrom(el) {
       if (!el || el === document || el === window)
         return null;
+      if (el.matches(selector))
+        return el;
       if (el.assignedSlot)
         el = el.assignedSlot;
       const found = el.closest(selector);