@emuanalytics/flow-rdf-ui 4.1.9 → 4.1.11

package/dist/components/list/list.component.mjs

@@ -120,7 +120,6 @@ class FlowUiList extends FlowRdfElement {
   }
   handleDragStart(ev) {
     this.draggedItem = ev.target;
-    console.log(`parent drag start: ${this.draggedItem.value}`, this.draggedItem);
   }
   handleDragOver(ev) {
     ev.stopPropagation();
@@ -133,7 +132,6 @@ class FlowUiList extends FlowRdfElement {
     }
     if (target && target !== this.draggedOverItem) {
       if (this.draggedItem === target.previousElementSibling) {
-        console.log("moving down");
         this.insertBefore(this.draggedItem, target.nextSibling);
       } else if (this.draggedItem === target.nextElementSibling) {
         this.insertBefore(this.draggedItem, target);
@@ -147,11 +145,8 @@ class FlowUiList extends FlowRdfElement {
     if (!this.draggedItem || !this.draggedOverItem) {
       return;
     }
-    console.log(`parent drop: ${this.draggedItem.value} onto target: ${this.draggedOverItem.value}`);
   }
-  handleDragEnd(ev) {
-    const target = ev.target.value;
-    console.log(`parent drag end: target: ${target}`);
+  handleDragEnd(_ev) {
     this.draggedItem = null;
     this.draggedOverItem = null;
   }

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

@@ -104,13 +104,11 @@ class FlowUiListItem extends FlowRdfElement {
   }
   handleReorderPointerDown(_ev) {
     this.addEventListener("dragstart", this.handleDragStart);
-    console.log("adding dragstart");
     this.addEventListener("dragend", this.handleDragEnd);
     this.setAttribute("draggable", "true");
   }
   handleReorderPointerUp(_ev) {
     this.removeEventListener("dragstart", this.handleDragStart);
-    console.log("removing dragstart");
     this.removeEventListener("dragend", this.handleDragEnd);
     this.removeAttribute("draggable");
   }
@@ -125,7 +123,6 @@ class FlowUiListItem extends FlowRdfElement {
   handleDragEnd(ev) {
     ev.stopPropagation();
     this.removeEventListener("dragstart", this.handleDragStart);
-    console.log("removing dragstart");
     this.removeEventListener("dragend", this.handleDragEnd);
     this.removeAttribute("draggable");
     this.emit("flow-ui-drag-end");

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/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"];
@@ -302,6 +305,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,7 +352,9 @@ 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");
   }
   resizePanels() {
@@ -459,20 +465,51 @@ 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;
+  }
+  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;
+        }
+      });
+      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) {
@@ -42,9 +41,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 +57,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;
   }