@emuanalytics/flow-rdf-ui 4.1.8 → 4.1.10

package/dist/components/query-builder/query-builder.component.mjs

@@ -384,6 +384,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
         .value=${ruleSet}
         .config=${this.config}
         size=${this.size}
+        !borders=${this.borders}
         ?tree-lines=${this.treeLines}
         @flow-ui-change=${this.handleSubQueryValueChange}
         @flow-ui-remove=${(ev) => this.handleRemoveRule(ev, index)}

package/dist/components/query-builder/query-builder.styles.mjs

@@ -226,7 +226,7 @@ const styles = css`
     &::after {
       content: '';
       left: -10px;
-      border-color: var(--flow-ui-color-neutral-200);
+      border-color: var(--control-border-color);
       border-style: solid;
       width: 9px;
       position: absolute;
@@ -315,6 +315,14 @@ const styles = css`
   .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {
     margin-inline-start: var(--flow-ui-spacing-x-small);
   }
+
+  /* Sub query builder styling */
+
+  .query-builder--child[borders='true'] {
+    /* remove right border */
+    border-radius: var(--control-border-radius) 0 0 var(--control-border-radius);
+    border-right: 0;
+  }
 `;
 
 export { styles as default };

package/dist/components/range/range.component.mjs

@@ -7,6 +7,7 @@ import { boolean } from '../../internal/boolean.mjs';
 import { defaultValue } from '../../internal/default-value.mjs';
 import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
 import { FormControlController } from '../../internal/form.mjs';
+import { clamp } from '../../internal/math.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import { isNumber } from '../../internal/type-checks.mjs';
 import { watch } from '../../internal/watch.mjs';
@@ -78,13 +79,15 @@ class FlowUiRange extends FlowRdfFormControl {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);
   }
-  handleChange() {
+  handleRangeChange(event) {
+    event.stopPropagation();
     this.emit("flow-ui-change");
   }
-  handleInput() {
+  handleRangeInput(event) {
+    event.stopPropagation();
     this.value = parseFloat(this.input.value);
-    this.emit("flow-ui-input");
     this.syncRange();
+    this.emit("flow-ui-input");
   }
   /*
     Handler for flow-ui-input & flow-ui-change events from number input.
@@ -97,11 +100,13 @@ class FlowUiRange extends FlowRdfFormControl {
       this.syncRange();
     }
   }
-  handleBlur() {
+  handleBlur(event) {
+    event.stopPropagation();
     this.hasFocus = false;
     this.emit("flow-ui-blur");
   }
-  handleFocus() {
+  handleFocus(event) {
+    event.stopPropagation();
     this.hasFocus = true;
     this.emit("flow-ui-focus");
   }
@@ -114,8 +119,7 @@ class FlowUiRange extends FlowRdfFormControl {
   }
   handleValueChange() {
     this.formControlController.updateValidity();
-    this.input.value = this.value?.toString();
-    this.value = parseFloat(this.input.value);
+    this.value = clamp(this.value, this.min, this.max);
     this.syncRange();
   }
   handleDisabledChange() {
@@ -126,7 +130,7 @@ class FlowUiRange extends FlowRdfFormControl {
     const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
     this.syncProgress(percent);
   }
-  handleInvalid(event) {
+  handleRangeInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
   }
@@ -240,30 +244,35 @@ class FlowUiRange extends FlowRdfFormControl {
               step=${ifDefined(this.step)}
               .value=${live(this.value.toString())}
               aria-describedby="help-text"
-              @change=${this.handleChange}
+              @change=${this.handleRangeChange}
               @focus=${this.handleFocus}
-              @input=${this.handleInput}
-              @invalid=${this.handleInvalid}
+              @input=${this.handleRangeInput}
+              @invalid=${this.handleRangeInvalid}
               @blur=${this.handleBlur}
             />
             <slot name="suffix" part="suffix" class="range__suffix"></slot>
 
-            ${this.noInput ? nothing : html`
-                  <flow-ui-input
-                    class="number-input"
-                    type="number"
-                    inline
-                    filled
-                    exportparts="form-control:number-input"
-                    no-step-buttons
-                    size=${this.size}
-                    format=${this.format}
-                    ?disabled=${this.disabled}
-                    .value=${this.value.toString()}
-                    @flow-ui-input=${this.handleNumberChange}
-                    @flow-ui-change=${this.handleNumberChange}
-                  ></flow-ui-input>
-                `}
+            <flow-ui-input
+              class=${classMap({
+      "number-input": true,
+      "no-input": this.noInput
+    })}
+              type="number"
+              inline
+              filled
+              exportparts="form-control:number-input"
+              no-step-buttons
+              size=${this.size}
+              format=${this.format}
+              min=${ifDefined(this.min)}
+              max=${ifDefined(this.max)}
+              step=${ifDefined(this.step)}
+              ?disabled=${this.disabled}
+              .value=${this.value.toString()}
+              @flow-ui-change=${this.handleNumberChange}
+              @flow-ui-focus=${this.handleFocus}
+              @flow-ui-blur=${this.handleBlur}
+            ></flow-ui-input>
           </div>
         </div>
 

package/dist/components/range/range.styles.mjs

@@ -210,6 +210,10 @@ const styles = css`
     color: var(--flow-ui-control-icon-color);
   }
 
+  .number-input.no-input {
+    display: none;
+  }
+
   @media (forced-colors: active) {
     .range__control,
     .range__control::-webkit-slider-thumb {

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

@@ -23,6 +23,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FlowUiSplitView extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    // Saved panel layouts for restoring when panels are dynamically added/removed
+    // The key is a comma-separated concatenation of panel ids e.g. 'pane-1,pane-2,pane-3'
+    this._panelLayouts = {};
     this._panels = [];
     this.noDragClose = false;
     this.positions = ["auto", "auto", "auto", "auto"];
@@ -41,9 +44,11 @@ class FlowUiSplitView extends FlowRdfElement {
       const panelsRemoved = mutations.map((m) => Array.from(m.removedNodes.values())).flat().filter((n) => n instanceof FlowUiSplitViewPane);
       if (panelsAdded.length > 0) {
         this.handlePanelAdded(panelsAdded[0]);
+        console.log("Split view panel added:", this._panels.map((panel) => panel.id).join(":"));
       }
       if (panelsRemoved.length > 0) {
         this.handlePanelRemoved(panelsRemoved[0]);
+        console.log("Split view panel removed:", this._panels.map((panel) => panel.id).join(":"));
       }
       this.layoutPanels();
     });
@@ -302,6 +307,7 @@ class FlowUiSplitView extends FlowRdfElement {
     if (splitViewSize === 0) {
       return;
     }
+    this.savePanelLayouts();
     const numOpenPanels = this._panels.filter((panel) => !panel.closed && !panel.hidden).length;
     const panelSizes = this._panels.map((panel) => {
       if (panel.hidden) {
@@ -348,8 +354,11 @@ class FlowUiSplitView extends FlowRdfElement {
       panel.divider = !panel.hidden;
     }
     const lastVisiblePanel = this._panels.slice().reverse().find((panel) => !panel.hidden);
-    lastVisiblePanel.divider = false;
+    if (lastVisiblePanel) {
+      lastVisiblePanel.divider = false;
+    }
     this.positions = panelSizes.map((size) => size + "px");
+    console.log("Panel layouts", this._panelLayouts);
   }
   resizePanels() {
     const boundingRect = this.splitView.getBoundingClientRect();
@@ -459,20 +468,53 @@ class FlowUiSplitView extends FlowRdfElement {
   }
   handlePanelAdded(panel) {
     this.updatePanelInfo();
-    if (isUndefined(panel.size) || panel.size === "auto") {
-      panel.size = panel.minSize ?? "50px";
+    if (!this.restorePanelLayouts()) {
+      if (isUndefined(panel.size) || panel.size === "auto") {
+        panel.size = panel.minSize ?? "50px";
+      }
+      this.shrinkPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
     }
-    this.shrinkPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
   }
   handlePanelRemoved(panel) {
     this.updatePanelInfo();
-    this.growPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
+    if (!this.restorePanelLayouts()) {
+      this.growPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
+    }
   }
   updatePanelInfo() {
     this._panels = [...this.panelSlot.assignedElements()].filter(
       (el) => el.tagName.toLowerCase() === "flow-ui-split-view-pane"
     );
   }
+  // Key used to stor panel layouts for a given set of panels
+  // This is a comma-separated concatenation of panel ids e.g. 'pane-1,pane-2,pane-3'
+  panelLayoutsKey() {
+    return this._panels.map((panel) => panel.id).join(",");
+  }
+  savePanelLayouts() {
+    const panelLayoutsKey = this.panelLayoutsKey();
+    const panelLayouts = this._panels.map(
+      (panel) => ({ id: panel.id, size: panel.size, closed: panel.closed })
+    );
+    this._panelLayouts[panelLayoutsKey] = panelLayouts;
+    console.log("Saving panel layouts:", panelLayoutsKey, panelLayouts);
+  }
+  restorePanelLayouts() {
+    const panelLayoutsKey = this.panelLayoutsKey();
+    if (this._panelLayouts[panelLayoutsKey]) {
+      this._panelLayouts[panelLayoutsKey].forEach((panelLayout) => {
+        const panel = this._panels.find((p) => p.id === panelLayout.id);
+        if (panel) {
+          panel.size = panelLayout.size;
+          panel.closed = panelLayout.closed;
+        }
+      });
+      console.log("Restoring panel layouts:", panelLayoutsKey, this._panelLayouts[panelLayoutsKey]);
+      return true;
+    } else {
+      return false;
+    }
+  }
 }
 FlowUiSplitView.styles = styles;
 __decorateClass([

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

@@ -5,6 +5,7 @@ import { boolean } from '../../internal/boolean.mjs';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.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;
@@ -17,9 +18,12 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+let id = 0;
 class FlowUiSplitViewPane extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `flow-ui-split-view-pane-${this.attrId}`;
     this.vertical = false;
     this.closed = false;
     this.divider = false;
@@ -27,6 +31,7 @@ class FlowUiSplitViewPane extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.id = isStringFull(this.id) ? this.id : this.componentId;
     this.vertical = boolean(this.vertical, true);
     this.closed = boolean(this.closed, true);
     this.divider = boolean(this.divider, true);

package/dist/components/timer/ticker.mjs

@@ -3,12 +3,11 @@ import { floorDateTime } from '../../internal/datetime.mjs';
 
 const TIMER_INTERVAL = 100;
 class Ticker {
-  constructor(tickUnit, tickValue, zone) {
+  constructor(tickInterval = { seconds: 5 }, zone) {
     this.subscribers = [];
     this.currentDateTime = DateTime.fromMillis(0);
     this.nextUpdateAt = DateTime.fromMillis(0);
-    this.tickUnit = tickUnit;
-    this.tickValue = tickValue;
+    this.tickInterval = tickInterval;
     this.zone = zone;
   }
   subscribe(fn) {
@@ -34,6 +33,7 @@ class Ticker {
     if (!this.timer) {
       return;
     }
+    console.log("Ticker stop");
     clearInterval(this.timer);
     this.timer = void 0;
     this.nextUpdateAt = DateTime.fromMillis(0);
@@ -42,9 +42,8 @@ class Ticker {
   setZone(zone) {
     this.zone = zone;
   }
-  setTick(tickUnit, tickValue) {
-    this.tickUnit = tickUnit;
-    this.tickValue = tickValue;
+  setTickInterval(tickInterval) {
+    this.tickInterval = tickInterval;
   }
   /**
    * Tick the clock
@@ -59,8 +58,10 @@ class Ticker {
     const now = DateTime.local({ zone: this.zone }).set({ millisecond: 0 });
     if (now >= this.nextUpdateAt) {
       this.nextUpdateAt = floorDateTime(now.plus({ second: 1 }), "second", 1);
+      const majorStepUnit = Object.keys(this.tickInterval)[0];
+      const majorStepValue = this.tickInterval[majorStepUnit];
       let minorFlooredNow = floorDateTime(now, "second", 1);
-      const majorFlooredNow = floorDateTime(now, this.tickUnit, this.tickValue);
+      const majorFlooredNow = floorDateTime(now, majorStepUnit, majorStepValue);
       if (forceMajor) {
         minorFlooredNow = majorFlooredNow;
       }

package/dist/components/timer/timer.component.mjs

@@ -35,6 +35,7 @@ class FlowUiTimer extends FlowRdfElement {
     this.zoneFormat = "ZZZZ";
     this.majorStep = "1 minute";
     this.minorStep = "5 seconds";
+    this.updateInterval = "5 seconds";
     this.hideZone = false;
     this.placement = "bottom-start";
     this.debouncedEmitChange = debounce(
@@ -50,7 +51,7 @@ class FlowUiTimer extends FlowRdfElement {
     super.connectedCallback();
     this.hideZone = boolean(this.hideZone, true);
     this.running = boolean(this.running, true);
-    this.ticker = new Ticker("second", 5, "Europe/London");
+    this.ticker = new Ticker({ seconds: 5 }, "Europe/London");
     this.tickerSubscription = this.ticker.subscribe((dateTime, tickType) => {
       if (tickType === "major") {
         this.value = dateTime;
@@ -72,6 +73,10 @@ class FlowUiTimer extends FlowRdfElement {
     this.minorStepDuration = parseDuration(this.minorStep) ?? { second: 5 };
     this.majorStepDuration = parseDuration(this.majorStep) ?? { minute: 1 };
   }
+  updateUpdateInterval() {
+    const updateIntervalDuration = parseDuration(this.updateInterval) ?? { second: 5 };
+    this.ticker.setTickInterval(updateIntervalDuration);
+  }
   updateRunning() {
     if (this.running) {
       this.ticker.start();
@@ -113,32 +118,16 @@ class FlowUiTimer extends FlowRdfElement {
     const minorStepValue = this.minorStepDuration[minorStepUnit];
     switch (direction) {
       case "fast-back":
-        dateTime = ceilDateTime(
-          this._displayDateTime.minus(this.majorStepDuration),
-          majorStepUnit,
-          majorStepValue
-        );
+        dateTime = ceilDateTime(this._displayDateTime.minus(this.majorStepDuration), majorStepUnit, majorStepValue);
         break;
       case "back":
-        dateTime = ceilDateTime(
-          this._displayDateTime.minus(this.minorStepDuration),
-          minorStepUnit,
-          minorStepValue
-        );
+        dateTime = ceilDateTime(this._displayDateTime.minus(this.minorStepDuration), minorStepUnit, minorStepValue);
         break;
       case "forward":
-        dateTime = floorDateTime(
-          this._displayDateTime.plus(this.minorStepDuration),
-          minorStepUnit,
-          minorStepValue
-        );
+        dateTime = floorDateTime(this._displayDateTime.plus(this.minorStepDuration), minorStepUnit, minorStepValue);
         break;
       case "fast-forward":
-        dateTime = floorDateTime(
-          this._displayDateTime.plus(this.majorStepDuration),
-          majorStepUnit,
-          majorStepValue
-        );
+        dateTime = floorDateTime(this._displayDateTime.plus(this.majorStepDuration), majorStepUnit, majorStepValue);
         break;
       default:
         dateTime = this._displayDateTime;
@@ -182,11 +171,17 @@ class FlowUiTimer extends FlowRdfElement {
             <div class="timer__time-container">
               <span class="timer__time">${this.formattedDisplayDateTime(this.timeFormat)}</span>
 
-              ${!this.hideZone ? html`
-                    <flow-ui-tooltip hoist placement="top" content=${this.formattedDisplayDateTime("ZZZZZ")}>
-                      <span class="timer__zone">${this.formattedDisplayDateTime(this.zoneFormat)}</span>
-                    </flow-ui-tooltip>
-                  ` : nothing}
+              ${// Note that flow-ui-show event was causing timer to stop because of dropdown handling of flow-ui-show above
+    !this.hideZone ? html`
+                      <flow-ui-tooltip
+                        hoist
+                        placement="top"
+                        content=${this.formattedDisplayDateTime("ZZZZZ")}
+                        @flow-ui-show=${(ev) => ev.stopImmediatePropagation()}
+                      >
+                        <span class="timer__zone">${this.formattedDisplayDateTime(this.zoneFormat)}</span>
+                      </flow-ui-tooltip>
+                    ` : nothing}
             </div>
           </div>
 
@@ -279,6 +274,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "minor-step" })
 ], FlowUiTimer.prototype, "minorStep", 2);
+__decorateClass([
+  property({ attribute: "update-interval" })
+], FlowUiTimer.prototype, "updateInterval", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-zone" })
 ], FlowUiTimer.prototype, "hideZone", 2);
@@ -291,6 +289,9 @@ __decorateClass([
 __decorateClass([
   watch(["majorStep", "minorStep"])
 ], FlowUiTimer.prototype, "updateParsedSteps", 1);
+__decorateClass([
+  watch(["updateInterval"])
+], FlowUiTimer.prototype, "updateUpdateInterval", 1);
 __decorateClass([
   watch("running")
 ], FlowUiTimer.prototype, "updateRunning", 1);

package/dist/components/tree-item/tree-item.component.mjs

@@ -36,6 +36,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
     this.disabled = false;
     this.lazy = false;
     this.size = "medium";
+    this.hidden = false;
   }
   /** @internal */
   static isTreeItem(node) {
@@ -47,6 +48,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
     this.selected = boolean(this.selected, true);
     this.disabled = boolean(this.disabled, true);
     this.lazy = boolean(this.lazy, true);
+    this.hidden = boolean(this.hidden, true);
     this.setAttribute("role", "treeitem");
     this.setAttribute("tabindex", "-1");
     if (this.isNestedItem()) {
@@ -158,6 +160,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
       "tree-item--expanded": this.expanded,
       "tree-item--selected": this.selected,
       "tree-item--disabled": this.disabled,
+      "tree-item--hidden": this.hidden,
       "tree-item--small": this.size === "small",
       "tree-item--medium": this.size === "medium",
       "tree-item--large": this.size === "large",
@@ -272,6 +275,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], _FlowUiTreeItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _FlowUiTreeItem.prototype, "hidden", 2);
 __decorateClass([
   query("slot:not([name])")
 ], _FlowUiTreeItem.prototype, "defaultSlot", 2);

package/dist/components/tree-item/tree-item.styles.mjs

@@ -106,6 +106,10 @@ const styles = css`
     display: none;
   }
 
+  .tree-item.tree-item--hidden {
+    display: none;
+  }
+
   .tree-item__expand-button--visible {
     cursor: pointer;
   }